HTML과 CSS의 연동
- HTML은 CSS를 포함할수 있다.
- CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS(user agent stylesheet)에 의해 렌더링 된다.
- CSS와 HTML을 연동하는 방법
① Link style (HTML에서 외부에 있는 CSS 파일을 로드하는 방식)
| Link style | |
| HTML | CSS |
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>안뇽 세상아~</h1> <p>이것은 웹 페이지다이</p> </body> </html> |
h1 { color: red; } p { background: blue; } |
② Embedding style
- HTML 내부에 CSS를 포함시키는 방식.
- 간단한 웹페이지의 경우 문제될것이 없지만 Link style을 사용하는것이 좋다.
- HTML과 CSS는 서로 역할이 다르니 구분되어 작성하고 관리되는것이 바람직.
| <!DOCTYPE html> <html> <head> <style> h1 { color: red; } p { background: blue; } </style> </head> <body> <h1>안뇽 세상아~</h1> <p>이것은 웹 페이지다이</p> </body> </html> |
③ inline style
- HTML 요소의 style 프로퍼티에 CSS를 기술하는 방식.
- Js가 동적으로 CSS를 생성할때 사용하는 경우가 있지만 일반적인 경우 Link style을 사용하는게 좋음.
| <!DOCTYPE html> <html> <body> <h1 style = "color : red ">안뇽 세상아~</h1> <p style = "background: blue">이것은 웹 페이지다이</p> </body> </html> |
'개발 > CSS' 카테고리의 다른 글
| [CSS] CSS font-size / em과 rem의 차이 / color / text-align (0) | 2020.06.08 |
|---|---|
| [CSS] CSS font-size / em과 rem의 차이 / color / text-align (0) | 2020.06.08 |
| [CSS] Reset CSS 사용하기 / reset css 란? / 자주 사용되는 css reset (0) | 2020.05.27 |
| [CSS3] Css Rule / CSS Rule set / CSS Selector (0) | 2020.05.27 |
| [CSS] CSS(Cascading Style Sheets)란? / CSS Rule Set (0) | 2020.05.27 |
