CSS

CSS는 스타일링이다.

CSS는 웹 애플리케이션의 모양새를 담당한다.
더 나은 사용자 경험(UX : User Experience)를 갖기 위해 필요한 세가지 요소가 있다.
1. 적당한 위치에 콘텐츠 배치 (레이아웃)
2. 텍스트 강조와 같은 최소한의 타이포그래피 (조판, typography)
3. 최소한의 접근성 (ex. 색상)

위의 세가지 요소를 응용하여 기존의 웹사이트에 심미적으로 꾸밀 수 있다.

CSS 문법의 구성

셀렉터(selector) : 중괄호 앞에 등장하는 태그 이름
중괄호에 속성과 값을 적어 스타일을 표현한다.
각 속성과 속성 사이는 반드시 세미콜론(;)으로 구분해야 한다.

기본적인 셀렉터 (selector)

1. id로 이름 붙여서 스타일링 적용하기

CSS에는 # 기호를 이용해 id를 선택할 수 있다.

ex) navigation section 아래의 <h4>를 특정하기 위해서는
이 엘리먼트에 id를 이용해 이름을 붙여서 해결할 수 있다.

<h4 id="navigation-title">This is the navigation section.</h4>

# navigation-title {
  color: red;
}

2. class로 스타일을 분류하여 적용하기

id는 문서 내에 단 하나의 엘리먼트에만 적용할 수 있다.
class는 #이 아닌 .을 이용해 class를 선택할 수 있다.

ex) navigation section의 `<li>` 엘리먼트와 footer의 `<li>` 엘리먼트를 구분하고자 하면

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Home</li>
  <li class="menu-item">Home</li>
  <li class="menu-item">Home</li>
</ul>

.menu-item {
  text-decoration: underline;
}

3. 여러 개의 class를 하나의 엘리먼트에 적용하기

class는 하나의 엘리먼트에 여러 개를 적용할 수 있다.
공백을 이용해서 class 이름을 분리해주자.

ex) "menu-item"이라는 클래스에서 선택되어 있는 메뉴라는 class를 적용하려면

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

id와 class의 차이점

id	class
# 으로 선택	. 으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음	목적에 맞게 자유롭게 이름 붙일 수 있음
문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐	동일한 값을 갖는 엘리먼트 많음
엘리먼트 단 하나의 값을 가짐	엘리먼트가 여러 값을 가질 수 있음
특정 엘리먼트를 이름 붙이는 데 사용	스타일의 분류(classification)에 사용