CSS 선언방법
1 2 3 | span { color: red; } | cs |
span : selector(선택자)
color : property
red : value
CSS를 HTML에 적용하는 방법
∎ inline
HTML 태그 안에다가 넣는 방법으로, 다른 CSS 파일에 적용한 것보다 가장 먼저 적용된다.
1 | <p style="border:1px solid gray; color:red; font-size:2em;"> | cs |
∎ internal
style 태그로 지정하는 방법으로 구조와 스타일이 섞이게 되므로 유지보수가 어렵다.
별도의 CSS파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 브라우저가 요청을 보낼 필요가 없다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head> <style> p { font-size: 2em; border: 1px solid gray; color: red; } </style> </head> <body> <div> <p>Hello CSS</p> </div> </body> | cs |
∎ external
외부파일(.css)로 지정하는 방식으로, CSS코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋다.
현업에서는 여러 개의 CSS파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 한다.
internal방식처럼 CSS코드를 구현하고, style.css와 같은 별도 파일로 만든 후 link태그를 이용하여 HTML문서에 추가한다.
1 2 3 4 5 6 7 8 | <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p>Hello CSS</p> </div> </body> | cs |
∎ 적용 우선순위
inline은 별도의 우선순위를 갖지만, internal과 external은 우선순위가 동등하다.
따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.
참고자료
https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css
'Web > CSS' 카테고리의 다른 글
| [WEB] CSS 요소 배치(2) (0) | 2018.11.18 |
|---|---|
| [WEB] CSS 요소 배치(1) (0) | 2018.11.17 |
| [WEB] CSS 기본 Style (0) | 2018.11.17 |
| [WEB] CSS Selector (0) | 2018.11.17 |
| [WEB] CSS 선택자 우선순위 (0) | 2018.11.17 |
