|
개요 | |
|
본 글은 웹에 표현되는 html에서 css 를 활용하기 위한 CSS 개념정리 글. css 구문의 세세한 속성 설정법 등은 본 글에서 설명되지 않는다. 본글에서 CSS의 명확한 개념정리가 되면, 그 다음 할일은 css 구문의 속성별 상세한 성질, 구문에서 selector 설정법을 알아야 함을 알게되며 이들 정보를 어디서 구할 수 있는지 정리한다.
 | |
|
1. CSS (Cascading Style Sheet) 가 무엇? | |
|
CSS : Cascading Style Sheet 의 약어.
CSS 기능 : 웹페이지에 정보를 표현하는 규격인 html 과 연동되어 웹에서 html(xhtml, xml 포함 일반적으로는 마크업언어) 이 웹브라우저에서 "표현"되는 방식(웹페이지 레이아웃 및 글자의 폰트, 색상 등)을 지정한다.
CSS 가 표준인가? : W3C 에서 표준으로 지정했음.
CSS Level(버전) : W3C의 CSS 스펙문서를 보면 CSS1, 2,3 등의 번호는 버전이 아니라, Level 이라고 한다. W3C 스스로도 버전이라고 하지 않는다고 명시하고 있음.
CSS1 : 1996년 12월 W3C에서 표준으로 발표, CSS2 : 1998년 5월 발표, W3C에서 개발. CSS3 : 2005년 12월 이후 개발중 아직(2014년10월) 끝나지 않았음. 현재 개발 상태 정보 제공하는 곳 -> http://www.w3.org/standards/techs/css#w3c_all
CSS 공식사이트 : W3C 에서 CSS 정보 제공 -> http://www.w3.org/Style/CSS/
CSS 문법 및 레퍼런스 원천 정보 구할 수 있는 곳. 위 공식사이트 보면 Learn & USE 메뉴 등에서 제공하는 내용은 각 언어별로 외부사이트 및 개인 블로그등 으로 링크걸린 것등 다소 산만한 사이트 구성이다.
명확하고 확정적인 정보는 아래 링크 걸린 곳에서 확보할 수 있다.
1.W3C에서 CSS의 관련 스펙류 제공 페이지 : http://www.w3.org/Style/CSS/current-work
2. 현재 시점의 CSS 최종 스펙 정리된 곳 -> http://www.w3.org/TR/css-2010/ <- 이 곳에서 CSS Level1, Level 2, Level 3 에서 제공하는 명확한 정의가 있다.
CSS와 HTML의 기능적 역할 분리 명확히 이해하기.
css는 코드(html) 에서 정보를 제외한 나머지 요소인 시각적인 요소(웹브라우저에서 보이는 모습)를 "분리" 구현하기 위한 수단임. html에서 표현된 정보라 함은 어떤 문서의 제목, 내용들을 우리가 문자로 기록했다면 이들 제목에 기록한 문자들, 내용에 기록한 문자들이 정보다. 한편, 웹페이지에 표현할 때 시각적인 요소란 제목은 이 자리에, 내용은 저 자리에, 글자의 크기, 색상, 폰트 종류 등은 시각적인 요소다. 이들 시각적인 요소를 html 내에서 각각의 정보요소마다 고정적으로 설정을 해도 웹에서 보일 때는 설정한대로 보인다.
웹페이지의 레이아웃을 html 내에서 테이블을 이용하여 사이드바는 오른족, 메인 본문 내용은 왼쪽 이런식으로 고정 지정해도 웹페이지에서는 지정한 레이아웃대로 보인다.
html 에서 시각적인 표현을 하지 못해서 css 를 이용하는 것이 아니다. css를 도입하면 html 에서는 시각적인 표현부는 최소화 되고, 정보자체에만 집중된 처리를 할 수 있고, 정보요소와 별개의 처리로 css파일만 수정하는 것으로 시각적인 요소를 변경가능하다.
이와 같은 "코드와 디자인의 분리" 라는 요구사항은 웹페이지 뿐만이 아니라 일반 소프트웨어 개발에서도 강력히 요구된다. 코드 전문가는 미적인 능력이 뛰어나지 못한 경우가 많다. 반면에 디자인 전문가는 코드 구현능력이 약하다. 그런데 소프트웨어는 코드와 디자인이 결합되어 최종적으로 표현된다. 구현과정자체가 코드개발자와 디자이너가 거의 독립적으로 구현 가능해야 효율적인 협업시스템이다.
즉,CSS는 웹페이지를 구축할 때 코드와 디자인을 분리하고자 하는 것이며 php든 asp 등의 코드로 정보 부분을 핸들링하는 처리부와 그것을 표현하고 시각적인 효과를 만들어내는 것을 css에서 대부분 이뤄지도록 한것.
css가 html 과 연동되어 구체적으로 무슨 일을 하는가? 1. html이 보여질 때 웹페이지에서 레이아웃을 설정할 수 있다.-> 레이아웃 변경할 일 생겼다면 코드파일(php, asp등)은 그냥 두고 css를 수정한다. 2. 글자들의 크기, 색상, 줄간격, 등을 지정할 수 있다. -> 변경할 일 생겼다면, 코드파일 변경없이 css를 수정한다.
| |
|
2. html 과 css 연동 방식. | ||
|
html(php, asp) 과 css 는 연동되어야 하므로 연동시키는 형식이 당연히 있다.
html 내에서는 css 가 연결되어야 할 것이고, css에서도 html 내의 어떤 요소를 처리할지 지정해야하므로 html 내에 css가 접근가능한 표식 수단이 있다.
1. html 에서 css를 연결시키는 법. html 에서 css를 활용하기 위해서는 html내에 바로 기록하는 것과 별도로 css파일을 만드는 방법이 있다. 본 글에서는 확장자 css 인 파일을 별도로 준비해두고, html 내 에서는 이 파일을 링크 걸어 사용하는 방식만 이용 한다. 별도로 만들어져 있는 css파일이름이 style.css라고 하자. html 의 <hrad> </head> 사이에 아래처럼 기록되면 된다. css 파일이 있는 곳은 웹서버와 동일서버/ 외부 서버 모두 가능.
2. css에서 제어할 html 의 요소를 식별하는 법. css파일 내에서는 Selector {property : value;} 라는 구문으로 css가 구현된다. 이때 Selector 란 html 내의 특정 요소를 지정하는 것이므로 html 내에서도 Selector 에 해당하는 것을 기록하게된다. | ||
|
3. CSS 문법 및 Selector, Property 정보 구하기 | |
|
CSS 구문은 아래 한 줄이 전부, CSS 작성시 아래 구문의 나열식으로 사용함.
Selector {property : value;} 한글로는 선택자 {속성 : 값;}.
구문의 작용 : selector (선택자) 에 해당하는 html 대상의 property(속성) 을 value (값) 으로 설정한다.
예 : P {color : red;} 이 구문의 의미 html 에 있는 p 태그(<P>이 부분 </P> ) 의 것의 색상을 붉은색으로 표현한다.
선택자 : css가 제어하고자하는 html 내의 대상. 속성 : 선택자로 선택한 html 대상의 설정할 속성 지정함. 값 : 속성의 값을 기록함.
중괄호 내에 property : value; 는 여러 개 가능함. 순서관계없음. 즉, 아래와 같이 1개의 Selector 에 여러 개의 속성 설정가능함. Selector { property1 : value; property2 : value; .. propertyN : value; }
CSS활용 시 구문자체가 어려워서 능숙해지지 못하는게 아니다. 속성이 여러 개가 있고, 각각의 속성이 무엇을 의미하며 값에 따라 최종적인 웹상에서는 어떤 효과를 주는지 이 부분이 습득 되어야 자유자재로 구사하게 된다.
결론적으로, 실전 활용을 위해 명확히 알아야 할 것은 Selector 와 property 단 2개다. (value는 property 에 설정하는 값이므로 property 를 알면됨.)
Selector 관련으로 알아야 할 사항들. Selector 의 용도는 CSS 구문이 설정할 html의 대상을 지정하는 것이다. 따라서, html 에서 selector 에 해당하는 것을 어떻게 기록해야하는가? html 에서 기록된 것을 CSS 의 Selector 부분에 어떤 형식으로 기록해야하는가? 이에 대한 정해진 규칙과 의미를 알면 활용이 가능하다.
property 관련으로 알아야 할 사항들. property 에 기록가능한 것들이 무엇이 있으며, 각 property 마다 웹브라우저에서 보일 때 어떤 작용을 하는지 알아야 한다.
위 2가지 정보모두 CSS 를 개발하는 W3C에서 제공한다. 단, 세세한 활용 예까지는 모두 제공되지 않으므로 검색 및 직접 적용해보는 과정을 거치면서 이해할 수 있도록 한다.
W3C 에서 제공하는 Selector 정리 테이블 -> http://www.w3.org/TR/css-2010/#selectors W3C 제공 CSS3 Selector 상세설명 -> http://www.w3.org/TR/css3-selectors/
W3C 에서 제공하는 Property 정리 테이블 -> http://www.w3.org/TR/css-2010/#properties
| |
|
끝. - CSS 문법및 Selector, Property 정보구하기. |
|
본 글이 포함된 통합 정리 글
WordPress 활용정보 정리 : http://igotit.tistory.com/23
|
146.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
| CSS Property(속성) 전체 리스트. (0) | 2014.10.29 |
|---|---|
| CSS Selector(선택자) 전체 리스트. (0) | 2014.10.29 |
| 워드프레스 테마 만들기 7편. archive.php, 404.php, search.php 추가하기. (0) | 2014.10.28 |
| 워드프레스 테마에 공백 생기는 오류 해결 - php 파일 인코딩을 UTF-8 BOM없는것으로 해야함. (0) | 2014.10.24 |
| 워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가. (0) | 2014.10.23 |
댓글