html에 css를 적용시키는 방법은 크게 세 가지가 있다.
인라인 방식
태그 안에 style 속성을 작성하는 방법.
1 2 3 | <p style="color: darkmagenta;"> 태그 안에 style 속성을 작성하는 방법. </p> | cs |
속성과 속성끼리는 세미콜론으로 구분한다.
간편해보이지만 html과 css는 서로 독립된 문서에 작성하는 게 원칙이다. 특별한 경우가 아니면 사용하지 않는다.
link 방식
.css 확장자로 된 파일을 html의 head
부분에 연결하는 방식이다.
href
에는 파일 경로를 쓰고, rel="stylesheet"
를 꼭 붙여야한다.
가장 많이 쓰이는 방식이다.
1 2 | <link href="/diary/css/diary.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/diary/css/ex_css/ex05.css"> | cs |
@import 방식
css 문서에 css를 연결할 수 있는 방법이다.
관리하기도 편할뿐만 아니라 정확한 파일 경로가 눈에 잘 띄지 않아 문서를 보호할 수 있다.
구글 폰트에서 웹폰트를 임포트로 연결하여 예제에 적용시켰다.
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap'); | cs |
import 방식은 속성과 경로를 쓴 후 마지막에 세미콜론으로 닫아야한다.
LightSalmon | FFA07A | |
Coral | FF7F50 | |
Tomato | FF6347 | |
OrangeRed | FF4500 | |
DarkOrange | FF8C00 | |
Orange | FFA500 |