본문 바로가기

Web Development/HTML / CSS

[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