웹 페이지는 스타일 시트를 사용해 스타일을 적용한다.
우리는 다음과 같은 두가지 방법으로 스타일시트를 적용할 수 있다 !
" 내부 스타일시트 "
말그대로 HTML의 내부에 작성된다.
style 태그를 통해 직접 입력한다.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <title></title> <style></style> </head> <body> </body> </html> | cs |
" 외부 스타일시트 "
간단한 짧은 스타일 시트라면 내부에 입력을 해줘도 괜찮지만
규모가 큰 작업에서는 HTML과 스타일 시트를 따로 분리해서 사용합니다.
외부 스타일 시트는 스타일시트를 별도로 생성하고 link 태그의 href 속성을 이용해
HTML 페이지로 불러옵니다.
파일명.css 의 스타일 시트를 하나 만든 후
1 2 3 4 | h1 { color: white; background: green; } | cs |
HTML에 불러와 줍니다.
이때 내부 스타일시트와는 다르게 <style> 태그를 사용하지 않습니다.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> 안녕 도담씨 :) </h1> </body> </html> | cs |
실행 화면👍
'웹 프로그래밍' 카테고리의 다른 글
| CSS 속성 1편 ( 단위 + 박스 속성 ) (1) | 2018.05.08 |
|---|---|
| CSS 선택자 (0) | 2018.05.04 |
| HTML 입력 양식 태그 <form> <input> (0) | 2018.04.16 |
| HTML 멀티미디어 태그와 입력 양식 태그 (0) | 2018.04.15 |
| HTML 기본 태그 (0) | 2018.04.15 |