[CSS] 선택자(Selector),block-level과 inline-level에 대해서

CSS 선택자(Selector)

CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다. 선택자(Selector)의 종류 선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다. 공통 선택자(Universal Selector) 타입 선택자(Type Selector) ID 선택자(ID Selector) Class 선택자(Class Selector) 공통 선택자(Universal Selector) 공통 선택자(Universal Selector)는 *로 표현되는 선택자입니다. * { color: gray; } 위와 같이 정의하면 모든 element 에 color: gray; 라는 스타일을 지정한다는 의미입니다. 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 p, div, span, table, td, form...등과 같은 HTML 태그를 선택하는 선택자 입니다. p { color: gray; } 이런식으로 정의하면 P element에 color: gray; 라는 스타일을 지정한다는 의미입니다. ID 선택자(ID Selector) #이라는 지시어를 사용하면서 element의 아이디값을 지정해주면 됩니다. 즉 특정 element에만 스타일을 지정한다는 의미입니다. #gray_text { color: gray; } 위와 같이 지정하면 id 값이 gray_text 인 element에만 스타일이 적용됩니다. Class 선택자(Class Selector) .이라는 지시어를 사용하면서 element의 클래스값을 지정해주면 됩니다. 특정 element에만 스타일을 지정한다는 의미로 ID 선택자와 차이점이라면 클래스의 경우는 한 문서에 동일한 이름의 클래스가 여러개 위치해도 괜찮으나 아이디는 유일해야 한다는 차이가 있습니다. .gray_text { color: gray; } 위와 같이 지정하면 클래스 값이 gray_text 인 element에만 스타일이 적용됩니다.

Class 선택자(Class Selector)

아래는 클래스 선택자를 사용한 예제입니다. <style type="text/css"> <!-- * {font-size: 9pt;} .title {color: #004000; font-weight:bold; font-size: 11pt; padding:5 0 5 0;} .sub_title {color:#333333 ; font-weight:bold; font-size: 10pt;  padding:5 0 5 0;} .str {color: #666666; padding:5px;} .u_list {margin-top:5px;} .u_list li {line-height:150%;} //--> </style> <div class="title">CSS 선택자(Selector)</div> <div class="str">CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다.</div> <div class="sub_title">선택자(Selector)의 종류</div> <div class="str">선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다.</div> <ul class="u_list">     <li>공통 선택자(Universal Selector)     <li>타입 선택자(Type Selector)     <li>ID 선택자(ID Selector)     <li>Class 선택자(Class Selector) </ul> <div class="sub_title">공통 선택자(Universal Selector)</div> <div class="str">공통 선택자(Universal Selector)는 *로 표현되는 선택자입니다.</div> CSS 선언부를 살펴보면 먼저 * 공통 선택자를 이용하여 문서 전체의 font-size를 9pt로 지정했습니다. 일종의 기본값을 지정한다고 볼 수도 있습니다. 위의 예제에서는 총 4개의 클래스 선택자가 정의되었습니다. 제목을 표시하는 title, 소제목을 표시하는 sub_title, 설명을 표시하는 str 마지막으로 순서없는 리스트를 표시하는 u_list를 지정하였습니다. 클래스를 어떤 식으로 지정할지, 클래스의 이름은 어떻게 정할지는 만드는 사람 마음대로 입니다. 이런식으로 클래스를 일관성있게 지정하여 사용하여 외부 css 파일로 적용하면 css 파일 수정만으로 홈페이지 전체의 스타일을 수정할 수 있습니다. 그러기에 경험이 쌓이다 보면 자신만의 클래스를 규정하는 방식을 가지게 됩니다. 위의 예제에서 특이한 부분이 클래스 선택자와 타입 선택자를 혼용하여 사용한 부분입니다. .u_list li {line-height:150%;} 이런 식으로 클래스는 중첩하여 사용할 수 있습니다.

block-level과 inline-level

HTML element 를 크게 2가지로 구분해보면 head element 처럼 화면에 표시되지 않은 element가 있고 div, p, table...과 같은 element 처럼 화면에 표시되는 element로 나눌 수 있습니다. 그릭 화면에 표시되는 element를 다시 두 가지로 분류하면 block-level과 inline-level로 구분할 수 있습니다. 화면에 표시되지 않는 element 화면에 표시되는 element block-level inline-level block-level과 inline-level의 구분 block-level과 inline-level을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다. block-level element는 한 라인에 하나만 위치할 수 있습니다. 반대로 inline-level element는 한 라인에 2개 이상 올 수가 있죠. div(block-level element)와 span(inline-level element) element를 사용해 보면 이 차이를 확실하게 느낄 수 있습니다. <div style="border:1px gray solid;">block-level element</div> <div style="border:1px gray solid;">block-level element</div> 위와 같이 block-level element인 div element를 연속으로 2개를 넣으면 각각 한라인을 차지하게 됩니다. 반면 inline-level element는 한줄에 옆으로 여러개가 위치할 수 있습니다. <span style="border:1px gray solid;">inline-level element</span> <span style="border:1px gray solid;">inline-level element</span> 물론 block-level element가 한줄을 다 차지한다고 하더라도 자신을 포함한 element가 허용하는 한도내에서 차지합니다. 만일 테이블의 셀안에 넣어버리면 그 셀의 크기가 허용하는 범위내에서 width를 차지하게 됩니다. <table width="400"> <tr>     <td><div style="border:1px gray solid;">block-level element</div></td>     <td><div style="border:1px gray solid;">block-level element</div></td> </tr> </table> 기타 다른 차이점은, block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능합니다. 다소 개념적인 부분이라서 쉽게 이해하기 힘들 수도 있지만 block-level과 inline-level의 차이를 확실하게 알고 있어야 CSS를 전문적으로 사용할 수 있습니다. block-level elements p h1~h6 ul ol pre dl div noscript blockquote form hr table fieldset address inline-level elements samp kbd var cite abbr acronym a img object br script map q sub sup span bdo input select textarea label button