CSS 기본구조 및 선택자

 

CSS 기본구조 및 선택자

 

CSS를 시작하는 분들이 꼭 알아야 할 기본구조 및 선택자에 대하여 알아보도록 하겠습니다.

 

  CSS 기본구조

 

선택자 {속성 : 속성값;}

 

- 선택자란

HTML 태그에 CSS 속성을 적용하기 위해서는 선택자(selector)에 대한 이해가 필요 합니다.

바로 이 선택자가 HTML 영역에서 적용 될 대상 정보이기 때문입니다.

 

- 속성과 속성값

선택자에 대한 속성과 속성값을 설정하는 부분은 { 와 } 사이에 정의하게 됩니다.

속성과 속성값은 콜론(:)으로 연결하며, 하나의 속성에 대하여 속성값 선언이 끝나면 다음 속성과의 구분을 위해 세미콜론(;)으로 구분 합니다.

 

 

  태그명을 사용

HTML	CSS
<p> p태그명을 선택자로 사용하는 예 </p>	p {font-size : 14px;}

▶ body, p 등 다양한 태그의 CSS를 지정하여 사용하게 됩니다.

 

 

  class 속성을 사용

HTML	CSS
<p class="title"> class 속성 사용 예 </p>	.title {font-size : 14px;}

▶ 태그의 class명을 선택자로 사용 할 경우 점(.) 을 사용하여 지정 합니다.

▶ class명은 중복 사용이 가능합니다. 따라서 1개 이상의 요소에 동일한 CSS(style) 을 지정 할 경우 사용 합니다.

 

 

  id 속성을 사용

HTML	CSS
<p id="title"> id 속성 사용 예 </p>	#title {font-size : 14px;}

▶ 태그의 id명을 선택자로 사용 할 경우 해시(#) 을 사용하여 지정 합니다.

▶ 화면(파일)별 id 값은 고유합니다. 따라서 화면별 고유한 한 요소에만 사용 될 때 사용 합니다.

 

 

  자식(하위)요소를 사용

HTML	CSS
<부모요소>   <자식요소 class="title">     내용   </자식요소>  </부모요소>	부모요소 .자식요소(class명) {font-size : 14px;}  ※ 선택자 점(.) 은 class명의 사용을 의미 합니다.
<p>   <div class="title">      자식요소 사용 예    <div>  </p>	p .title {font-size : 14px;}

▶ 부모요소 선택자 + 띄우기(스페이스) + 자식요소선택자 의 구조로 사용 할 수 있습니다. 

 

 

  병합요소 사용

HTML	CSS
<p id="title"> id 속성 사용 예 </p>	p#title {font-size : 14px;}

▶ 띄어쓰기 없이 태그명 + id또는class 의 병합으로 사용이 가능합니다.

 

 

  동일한 속성 지정

HTML	CSS
<h1> 내용 </h1>  <h2> 내용 </h2>	h1, h2 {font-size : 14px;}

▶ 콤마(,)를 사용하여 다수개의 태그에 동일 한 속성을 지정 할 수 있습니다.  

 

이것 이외에 더욱 많은 선택자가 존재하며, 사용자환경(브라우저)에 따라 적용 여부가 다릅니다.

이 부분들에 대하여는 천천히 다루어 보도록 하겠습니다.

 

2018/05/22 - [유유 IT로그/웹디자인] - CSS 사용 방법 완벽 가이드