CSS코드 저장, 병합
여러 파일의 병합
HTML 파일은 콘텐츠, 구조 그리고 메타데이터가 포함된 파일이기 때문에 가장 먼저 요청되며 그 후에 CSS파일 등을 브라우저에서 자동으로 요청하게 된다. 따라서, HTML 파일에 외부 파일을 포함하거나 불러오는 경우 해당 파일의 위치가 지정되어 있다면 페이지가 로드될 때 브라우저가 이러한 추가 파일을 자동으로 요청한다.
외부 파일에 CSS코드 저장
하나의 편집기에서 CSS코드와 HTML코드을 한번에 작성할 경우, 굉장히 복잡해질 수 있는데 이는 CSS파일을 따로 저장하여 분리가 가능하다. style 안에 있는 CSS코드를 따로 분리하여 ‘.css’확장자로 저장하면 이는 CSS코드로 인식이 된다.
이러한 파일은 HTML 코드에서 <link> 요소를 사용하여 HTML코드로 불러오기가 가능하며
예를 들면,
<head>
<link href="link.css" rel="stylesheet">
<title>name of title</title>
</head>
와 같이 표현 가능하며 <link> 요소는 HTML의 <head> 부분에 위치하여야 한다. 또한, <title> 역시 <head> 내부에 위치하여야 한다.
그러나, <link>로 CSS파일을 연동한다고 해도 자동으로 HTML 파일에 병합되지 않기 때문에 요소 안에 ‘rel=”stylesheet”’ 라는 콘텐츠를 입력하여 해당 요소가 CSS파일 이라는 것을 설명해 주어야 한다.
728x90
'CSS' 카테고리의 다른 글
| 가상 선택자(Pseudo Selectors) (0) | 2024.12.07 |
|---|---|
| ID 선택자(ID Selectors) (0) | 2024.12.05 |
| CSS 변수 정의법 (1) | 2024.12.02 |
| SVG(Scalable Vector Graphics) (0) | 2024.12.01 |
| 변환과 전환(Trnaformation & Transitions) (1) | 2024.11.29 |