반응형
1. html 파일에 css 코드를 추가한다.
<head>
<title>탭에 나오는 제목</title>
<style>
</style>
</head>css를 html에 적용하는 첫 번째 방법은 바로 head 태그 안에 style 태그를 만드는 것이다. style 태그 안에 적용하고자 하는 css 코드를 추가하면 html에 css가 적용된 상태를 확인할 수 있다. 이 방법으로 CSS를 사용하는 것을 inline CSS라 한다.
2. css 파일을 html 파일에 주입한다.
<head>
<title>탭에 보여지는 제목</title>
<link href="style.css" rel="stylesheet">
</head>위의 코드는 "style.css" 라는 파일명을 가진 css 파일을 주입한다는 뜻이다. 이 때 rel 속성을 적어주는데 이는 해당 html 파일과 style.css 파일간의 관계를 설명해주는 부분이다. style.css 파일은 html 파일과 stylesheet 관계를 맺는다는 것이다. 이 방법은 external CSS라고 부른다.
1번 방법과 비교했을 때 더 추천하는 방법은 css 파일을 따로 생성한 후 link 태그를 이용하여 css 파일을 주입하는 것이다. 왜냐하면 css 파일이 따로 만들어져있는 경우 해당 파일을 여러 html 파일들에서 사용가능하게 되기 때문이다.
반응형
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css 개념 정리 (0) | 2023.07.19 |
댓글