CSS의 기초

CSS(Cascading Style Sheet)는 HTML로 작성된 문서를 HTML 사용하지 않고 보기 좋게 꾸미기 위하여 고안된 언어이다. 즉, 순전히 미적인 목적을 위하여 존재하는 언어이다.

CSS를 사용하면 문서의 레이아웃, 색상 및 글꼴 등을 포함하는 디자인 요소를 HTML 문서와 분리할 수 있고 이를 통해 HTML을 이렇게 하면 콘텐츠와 정보를 담는 그릇 역할에 집중시킬 수 있다.

CSS 문장은 CSS 외부문서(stylesheet.css)를 따로 만들어서 사용할 수도 있고, HTML 문서 내부에 <style> 태그를 사용하여 삽입(Inline style)할 수도 있다. 하지만 Inline style은 전체 코드 가독성을 저하시키고 모듈화를 힘들기 때문에 지양하는 것이 좋다.

HTML	CSS
<li><font color="red"> 1. html </li> <li><font color="red"> 2. CSS </li> <li><font color="red"> 3. JavaScript </li> <li><font color="red"> 4. Python </li> <li><font color="red"> 5. Django </li>	<style>   li {     color=red;   } </style>

CSS의 구조

선택자(Collector)와 선언부(Declaration)로 구성된다.

CSS는 앞서 설명한 바와 같이 외부문서로 따로 작성하는 것이 좋으나 교육 목적으로 HTML 태그를 사용하여 Inline style로 설명하였다.

선택자

효과(Style)를 적용할 요소를 가리키는 역할을 하는 것을 선택자(Collector)라 한다.
즉, 어떤 태그를 가진 요소에 어떤 Style을 줄 것인지 타게팅하는 역할을 한다.

선택자로 여러 개의 태그를 다양한 방법으로 조합하거나 id를 부여하여 스타일 효과를 줄 수 있는데 조합의 순서에 따라 스타일이 결정되는 우선 순위가 달라진다. 예를 들어 요소에 여러 개 스타일이 부여되면 보다 구체적인(지엽적인) 효과가 최종적으로 반영된다. 따라서 스타일이 중첩될 때 우선 적용되는 순서를 아는 것은 중요하다.

선택자의 종류

1. 기본 선택자

기본 선택자는 선택자의 기본적인 형태이다. 그저 스타일을 적용할 특정 태그 또는 ID를 지정하면 되는데 특정 태그 또는 ID를 선택하면 CSS 문서가 영향을 끼치는 범위 내 HTML 문서의 모든 태그에 스타일이 적용된다.

/* 일반 태그 선택자 */
li {
  color: red;
}

/* Class 선택자 */
div.dht84a {
  color: green;
}

/* id 선택자 */
#ht74t2 {
  color: blue;
}

/* 속성 선택자 */
a[href="https://example.com"] {
  color: yellow;
}

2. 그룹 선택자

콤마(,)를 활용하여 선택자를 여러 개 입력한 형태를 그룹 선택자라고 한다. 그룹 선택자를 사 용하면 선택자로 지정한 모든 요소에 스타일이 동일하게 적용할 수 있어 여러 요소에 동일한 스타일을 적용하는 경우 경제적이다.

/* 문서에 있는 h1, h2, h3 요소에 모두 적용 */
h1, h2, h3 {
	color: red; 
}

3. 결합 선택자

일부 자식, 형제 요소 등 특정한 요소에 스타일을 적용하기 위하여 약속한 기호로 선택자를 조합한 형태를 결합 선택자라고 한다. 결합 선택자는 일반 선택자보다 우선하기 때문에 결합 선택자를 선언하면 광역적(Global)으로 적용된 스타일을 무시하고 결합 선택자로 선언된 스타일이 적용된다.

4. 자식 결합 선택자

선택자로써 특정 하위 컨테이너에 도달할 때까지 상위 컨테이너를 열거하며 해당 요소에 스타일을 적용하는 것을 자식 결합 선택자라고 한다. 이때 결합자로 공백( ) 또는 >를 사용한다.

5. 형제 결합 선택자

선택자로써 동급인 컨테이너를 열거하고 해당 조건에 정확하게 일치하는 요소에 스타일을 적용하는 것을 형제 결합 선택자라고 하며 이때 결합자로 ~ 또는 +를 사용한다.

/* 자식 결합자(공백) */
article .main {
	font-size: 16px;
}

/* 형제 결합자(~) */
h2+p {
	color: gray;
}

6. 의사 선택자

선택자의 상태를 지정하고 선언한 상태에 해당하는 요소에 스타일을 적용하는 것을 의사 선택자라고 한다. 선택자 뒤에 : 입력 후 속성을 입력하여 선언한다.

div.main li:hover > ol {
  display: block;
}

선언부(Declaration)

스타일의 속성명칭(Property)과 속성값(Value)의 쌍을 선언부(Declaration)이라고 한다. 선언부의 마지막은 언제나 세미콜론으로 종료된다. 여러 개의 효과(선언)는 세미콜론으로 구분하여 포함할 수 있으며 앞 뒤로 중괄호를 사용하여 선언부의 시작과 끝을 나타낸다.

h2 {
  background-color: gray;
  /* ↑ Property	  ↑ Value */
}

속성의 종류는 매우 다양한데 배경(Background), 글꼴(Font), 테두리(Border), 여백(Margin, Padding) 관련 속성은 빈번히 사용하므로 숙지하는 것이 편리하다. 억지로 외우지 않아도 서서히 익숙해지게 된다.

반응형 디자인과 미디어쿼리

요즘에는 웹 콘텐츠를 소비할 수 있는 디바이스의 종류가 대단히 많다. 디바이스의 종류가 많은 만큼 디바이스 화면의 크기도 다양한데 CSS는 웹이 다양한 Display에 대응하여 동작하도록 할 수 있다. 미디어쿼리를 사용하면 뷰포트의 크기에 따라 요소들이 동작한다.

/* 뷰포트(화면 크기) 상한값 */
@media (max-width: 800px)
  /* 조건에 맞으면(뷰포트 800px 이상) 그리드하지 않음 */
  #grid {
    display: none;
  }
  /* 조건에 맞으면 우측 테두리 숨김 */
  ol {
    border-right: none;
  }
  /* 조건에 맞으면 하단 테두리 숨김 */
  h1 {
    border-bottom: none;
  }