본문 바로가기

CSS22

CSS 방법론 CSS 방법론 대표적인 CSS 방법론은 OOCSS, BEM, SMACSS로 정의할 수 있습니다. CSS 설계의 중요성 - CSS 개발의 문제점 CSS를 작성하는 것이 쉽지만 한 번 확장하고 관리하기는 어렵습니다. CSS의 전역환경 일관적이지 않은 코드 구조, 각자 다른 사고 방식 스타일 정의 지나치게 복잡한 선택자 동일 요소에 대한 중복 설정, 불필요한 CSS의 증가 CSS 셀렉터 우선순위 or !important 사용 CSS (표현), JS (동작), HTML (내용) 간 명확한 분리가 안됨 (높은 결합도) - 사이트 규모가 커질수록 문제가 발생합니다. 유지 보수가 불가능한 코드 -> 중복, 코드분석 시간 -> 새로운 기능의 개발 속도 저하 - CSS 작성 방법 적절한 의미 사용 (시맨틱) 중첩 선택자.. 2022. 4. 23.

HTML/CSS HTML HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 만약 어떠한 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중 ()로 감싸 엘리먼트를 문단으로 명시할 수 있습니다. My Code is Good 특징 .. 2022. 4. 12.

Express - 정적인 파일의 서비스 정적인 파일의 서비스 express에서 이미지, 자바스크립트, CSS와 같은 파일을 서비스하는 방법이 있다. app.use(express.static('public')); 위 코드를 추가시켜줘야 정적인 파일을 적용할 수 있다. main.js const express = require('express') const app = express() const port = 3000 var fs = require('fs'); var qs = require('querystring'); var template = require('./lib/template.js'); var path = require('path'); var sanitizeHtml = require('sanitize-html'); var bodyParse.. 2021. 1. 14.

JQuery 엘리먼트 제어 엘리먼트 제어 jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다. http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of api.jquer.. 2020. 12. 28.

JQuery Chain Chain jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. chain의 장점 코드가 간결해진다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 예시 Jin seok kim 탐색(traversing) chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다. 참고 사이트 http://api.jquery.com/category/traversing/ Traversing | jQuery API Documentation Create a new jQuery object with elements added to the set of m.. 2020. 12. 23.

CSS+Javacript - 슬라이더 메뉴 구현하기 메뉴바가 메뉴 아이콘을 클릭하면 슬라이더 기능으로 튀어나오고 닫기 버튼을 누르면 다시 들어가는 슬라이드 메뉴를 간단하게 구성해보았다. HTML HOME Menu 2 Menu 3 Menu 4 Menu 5 Close 메뉴바를 구성하는 문서중 Close는 닫기 버튼이므로 onclick="closeLetfMenu();라는 함수를 일단 선언해 주었다. 추후 자바스크립트 부분에서 조정할 수 있다. 또한 메뉴바를 열기전 메뉴 클릭 버튼에는 onclick="showLeftMenu();라는 함수를 선언해주어 자바스크립트에서 조정하도록 해두었다. CSS CSS 부분은 메뉴가 움직이는 슬라이드 기능 구현을 담당하고 있다. CSS 부분은 컬러와 폰트에 신경을 조금 써서 비율과 시각에 대해 알맞게 디자인해보았다. transto.. 2020. 12. 15.

Javascript 문서의 기하학적 특성 문서의 기하학적 특성 CSS 등으로 만들어낸 요소들의 위치와 크기를 알아낼 수 있다. 요소의 크기와 위치 Coding 요소의 엘리먼트 크기와 위치 등의 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect인 것을 이용하면 된다. (※getBoundingClientRect의 width 값을 IE는 제공하지 않는다.) 또 엘리먼트의 위치를 의미하는 top, right의 값을 정하는 기준이 그 부모가 아니라 body이다. 그리고 이를 명시적으로 확인할 수 있는 방법은 offsetParent 속성을 호출하는 것이다. 만약 부모 중 CSS position의 값이 static인 td, th, table 엘리먼트가 있다면 이 엘리먼트가 offsetParent가 된다. Viewport 뷰포트.. 2020. 11. 23.

Javascript DOM - HTMLElement HTMLElement getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 예제1 HTML CSS JavaScript 위의 코드의 결과로 알 수 있는 것은 document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection 즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다. 예제2 jin seok blog HTML CSS JavaScript 위 결과를 통해서.. 2020. 11. 17.

javascript DOM - 제어 대상을 찾기 DOM이란? Document Object Model의 약자로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 제어 대상을 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. document.getElementsByTagName getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는.. 2020. 11. 17.

HTML+CSS+Media Query 반응형 클론 웹 사이트 제작. 구현된 영상 HTML 본문 바로가기 회사소개 사업영역 투자정보 인재채용 알기 쉬운 개발 내 삶 속의에 개발 상품검색 안녕하세요 Kim, jin seok 입니다. 창의적이고 경쟁력 있는 선도 개발자 view more ABOUT COMPANY. 대한민국을 대표하는 웹 개발자, 저를 소개합니다. 회사소개 삶의 가치를 높이는 개발기업 more 중앙 시스템 설립 이래 한결 같은 자세로 개발에 전념해 오고있습니다. more 투자정보 주요 경영사항을 제공합니다. more OUR PRODUCT innovations. 끊임없는 기술 혁신으로 미래 성장 동력을 지속 발굴 합니다. 01.Chlorinated Polyvinyl Chloride 국내에서 처음으로 자체 기술로 CPVC를 생산하는데 성공하고 2017년 울산 2공장.. 2020. 11. 2.

HTML CSS (feat. jQuery) 간단한 포트폴리오 웹 사이트 코딩. html Kim, jin seok I'm Web Programer 1. 을 이용하여 reset.css을 지정해주고 따로 style.css 또한 따로 링크화 해주었다. 2. fontello을 사용하기 위해 fontello.css 파일 또한 링크화 해주었다. 바로 body부분에 class로 demo에 나온 각각의 "아이콘 이름"을 지정해주면 바로 아이콘 효과가 적용된다. 3. 을 이용하여 jquery의 정보를 받아오고 bxslider라는 jquery 플로그인 또한 받아왔다. 또 bxslider의 활용을 구체화하기 위해 옵션들을 설정해주었다. bxslider의 옵션들(controls: , pager: , auto:)로 인해 화면상의 배경화면들이 자동으로 슬라이드화 되며 배경화면을 넘기는 컨트롤창 또한 보이지 .. 2020. 10. 27.

CSS 폰텔로 fontello 활용하기 폰텔로 fontello fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스다. 특히 SVG 파일을 업로드하면 폰트로 만들어주기도 한다. 폰텔로를 사용하기 위한 사이트 fontello.com/ Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"4f281663992d71f728e8efc840ca28ff","page_data":{},"locale":"en-US","layout":"fontello.layout"} fontello.com 폰텔로 적용 과정 1. 을 이용하여 fontello.com 사이트에서 다운 받은 파일 안에있는 css/fon.. 2020. 10. 26.

CSS 코드 경량화 minify 코드 경량화 minify CSS는 네트워크를 통해서 전송된다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해이기 때문에 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify 도구이다. 코드 경량화 사이트 adamburgess.github.io/clean-css-online/ clean-css online adamburgess.github.io 2020. 10. 26.

CSS link와 import를 이용한 유지 보수 link와 import 똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 천개의 페이지를 수정하는 것은 CSS의 수정을 소극적으로 만들고 장애물이 될 수 있다. 이때 link와 import을 이용한다면 매우 효율적이며 웹 페이지의 로딩시간이 줄어들어 경제적이다. 2020. 10. 26.

CSS 그래픽 - background, filter, transform, transition 배경화면 Background - background-size : width height / cover / contain 크기에 관한 설정이다. (cover, contain : 손실있어도 꽉차게, 꽉안차도 손실없게) - background-attachment : scroll / fixed 배경화면 이미지를 스크롤 할때 고정할지 고장 하지 않을지 설정. - background-position : center right /top bottom /left 배경화면 이미지의 위치 설정이다. - background-image : url(' '); 배경화면 이미지 주소 및 파일 불러오기. (배경이 투명한 이미지를 쓰면 color와 같이 쓸수있음) - background-repeat : no-repeat,repeat; .. 2020. 10. 22.

CSS 다단(multi column)에 대하여 다단(multi column) 이란? 다단(multi column)은 아래 신문처럼 화면을 분할해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미한다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공하고 있다. 다단을 위해 쓰는 컬럼 예 -column-count : 컬럼을 몇 개로 나눌지 정한다. -column-width : 나뉘어진 하나의 컬럼의 크기를 정한다. -column-gap : 컬럼 사이 간격을 정한다. -column-rule-style : 컬럼 사이의 선 스타일을 정한다. -column-rule-width : 컬럼 사이의 선의 두께을 정한다. -column-rule-color : 컬럼 사이의 선의 색깔을 정한다. -coulmn-span : 특정 태그가 컬럼을 초월하게 하고 싶을 때.. 2020. 10. 21.

CSS 플루트 (float) float 이란? Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이다. ※ clear는 float가 적용된 요소에 대하여 피해가지 않기 하기 위해서 피해가지 말라는 요소에게 적용한다.) 응용 실습 1. 삽입된 이미지에 float : right을 이용하여 float을 적용해 주었다. right 로 삽입된 이미지가 웹 페이지의 오른쪽에 위치시키도록 하였다. 2. 문장의 두번째 단락은 float가 적용된 이미지를 피해가지 말라고 단락을 구별짓는 태그 안에 clear : both을 넣어주었다. 2020. 10. 21.

CSS 레이아웃의 기본 inline과 block inline : 블록라인이 화면 일부를 차지하는 태그이다. block : 블록라인이 화면 전체를 사용하는 태그이다. 1. inline이 적용된 "인라인" 텍스트의 border는 일부분 공간으로 바뀌고, block은 "이 텍스트는 블럭레벨 입니다."의 텍스트 문장이 있는 라인 전체 공간을 사용한다. 2. display 속성 특성을 인하여 텍스트 글의 줄바꿈이 자동으로 되는 것을 볼 수 있다. 1. display와 inline, block을 쓰지 않으니 줄바꿈은 되지 않으며 border와 soild의 효과만 적용된 것을 볼 수 있다. 박스 모델 box model 각 태그들이 웹 페이지에 표현될 때 사각형의 형태(box)로 그 태그의 부피감을 결정한다. - margin : 태그와 태그.. 2020. 10. 20.

CSS 서체 다루기 크기 font-size rem html 태그에 적용된 font-size의 영향을 받는다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 더 유용하며 가장 바람직한 단위이다. 이것을 사용하는 것이 좋다. px 모니터 상의 화소 하나의 크기에 대응되는 단위이다. 고정된 값이기 때문에 이해하기 쉽지만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋다. em 부모 태그의 영향을 받는 상대적인 크기이다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵기 때문데. rem이 등장하면서 이 단위 역시 사용이 권장되지 않는다. 색상 color RGB 값 CSS에서는 다음 공식을 사용하여 색상을 RGB 값으로 지정할 수 있다. EX) rgb ( 255, 0 , 0.. 2020. 10. 20.

CSS 케스케이딩에 대하여 케스케이딩 이란? 다양한 CSS 선언의 영향을 받을 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 한다. CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라지며 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아진다. 또한 CSS선언을 나중에 할수록 우선순위가 높아진다. style>id 선택자>class 선택자>tag 선택자 순으로 우선순위가 정해진다. 단 !important을 사용한다면 제일 큰 우선순위가 정해진다. 2020. 10. 20.

CSS 선택자(selector)에 대하여 선택자 selector와 선언(declaration) CSS의 id 활용 html 텍스트에 CSS을 적용할 때 여러개의 공통된 selector 중 특정 하나만 하고 싶다면 id 기능을 적용하면 id을 적용한 html 텍스트만이 효과가 적용된 것을 확인할 수 있다. html의 태그에id="select"가 적용된 것이 보인다. CSS에는id="select"의 select에다 '#'을 앞에다가 붙여줘야 CSS부분에서 id을 받아준다. 부모 자식 선택자 id만으로 특정 텍스트에 효과를 주는 것에는 하나 하나 씩 해줘야하는 한계가 있어 미리 CSS 부분에서 해주는 선택자 설정이 있다. 부모 자식 선택자 수식들을 사용한다면 더욱 빨리 일을 처리해 나갈 수 있다. 가상 클래스 선택자 가상 클래스 선택자는 body안의.. 2020. 10. 20.

CSS 기본 입문 CSS 이란? 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따라서 이를 보완하기 위해 만들어진 것이 스타일 시트이고 이 스타일 시트의 표준안이 CSS라고 한다. 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. CSS 예시 2020. 10. 19.

이전 1 다음

티스토리툴바