CSS & SELECTOR

WHAT IS CSS?
- Cascading Style Sheets의 약자
- 웹 페이지 구성요소의 스타일을 정의하는 언어

HTML EXAMPLE

로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치
웹 페이지의 요소(element)들을 구성하는 역할

CSS EXAMPLE

로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치
- 검색창의 너비
- 버튼의 크기
- 구성요소를 어디에 위치할 것인가

HOW TO USE CSS?

css를 html에 적용하는 세가지 방법
- inline
- HTML 내부에 stylesheet 작성
- HTML 외부에 stylesheet 작성

inline
```
<h1 style="color: red; font-style: italic">Hello world</h1>
```
- h1태그에 style이라는 속성을 부여해서 적용
- 색상은 빨간색, 스타일은 기울임꼴임을 명시

HTML 내부에 stylesheet 작성

<style>태그 이용
보통 <head>태그 안에 삽입
태그를 선택하는 규칙(Selector)에 따라 일괄 적용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page title</title>
  <style>
    h1 {
      color: red;
      font-style: italic;
    }
    /* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
  </style>
</head>
<body>
  <h1>Hello world</h1>
  <div>Contents here
    <span>Here too!</span>
  </div>
</body>
</html>

HTML 외부에 stylesheet작성

<Link>태그 이용
css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello world</h1>
  <div>Contents here
    <span>Here too!</span>
  </div>
</body>
</html>

CSS SELECTOR

CSS에서 요소(element)를 선택하는 규칙
Note: 태그라는 용어는 시작 및 종료 태그와 같이 마크업( Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미합니다

CASE STUDY

만일 다음 문서에서 hello world에는 빨간색, code states에는 파란색을 적용하고 싶을 경우는?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello world</h1>
  <h1>code states</h1>
</body>
</html>

style.css

h1 {color: red}

SOLUTION 1: 각각의 ELEMENT에 고유한 ID를 부여
- id 속성 이용
- #indentifier와 같이 #을 이용해 고유한 id를 선택
index.html
```
  <h1 id="hello">Hello world</h1>
  <h1 id="codestates">code states</h1>
```
style.css
```
#hello {color:red;}
#codestates {color: blue;}
```