1. CSS 적용하기

HTML로 기본 뼈대를 잡았으면 CSS로는 디자인을 잡을 수 있고, 이 CSS를 HTML에 적용하는 방법은 총 3가지가 있다!

1) 첫번째 방법 : 인라인 스타일

태그 속성(속성은 style을 사용함)을 사용해서 html에 직접 작성해서 css를 적용할 수 있다.

<h3 style = "color-red">최고가 될테야!</h3>

2) 두번째 방법 : style 태그 안에 작성

html의 style 태그 안에 작성해서 적용할 수도 있다.

<style> 
h3 { 
  color: red;
  }
</style>
(생략)
<h3>최고가 될테야!</h3>

3) 세번째 방법 : css 파일 생성해서 작성

파일명.css 로 새로운 파일을 만들고 css 부분만 작성하는 방법이다.
첫번째와 두번째는 html에 직접 작성하는 방법으로 가독성이 떨어지고 이후 유지보수가 힘들기 때문에 css 파일을 따로 만들어서 작성해주는 방법이 좋다.

대신 html 파일과 css 파일을 연결해주어야하므로 링크 태그로 연결한다!

<link href="파일명.css" rel="stylesheet" type="text/css"/>

1. link : link 태그로 사용할 css파일을 링크한다.
2. href : href 속성에 css 파일 경로를 쓴다.
3. type : link 태그로 연결되는 파일이 어떤 것인지 작성
   (여기서 css file을 연결하므로 type값은 항상 "text/css"이다)
4. rel : rel은 HTML file과 CSS file과의 관계를 설명하는 속성으로 css파일을 링크할 때는 항상 "stylesheet" 값을 사용한다.

2. CSS 작성하기

1) CSS 작성 기본 구조

h3 {
 color: red;
}

1. h3 : selector(=선택자). 어떤 것에 css 적용할지 선택한다. 여러 종류들이 들어갈 수 있다.
2. color : property(=속성)
3. red : property value(=속성값)

2) 선택자

(1) tag(태그)

h3 {
 color: red;
}

위에 써있는 기본 구조처럼 태그를 쓰고 { } 안에 속성: 속성값; 을 써준다.
html의 모든 h3 태그에 효과가 적용된다.

(2) class(클래스)

.classsname {
 color: red;
}

.클래스명을 쓰고 { } 안에 속성: 속성값;을 쓴다.
.(dot)은 오타가 아니다! 클래스를 선택자로 부르려면 꼭 .(dot)을 앞에 써야한다!

(3) id(아이디)

#idname {
 color: red;
}

#아이디명을 쓰고 { } 안에 속성: 속성값; 을 입력한다.
클래스는 . 을 사용하고 아이디는 #을 사용한다!