Inline
Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. Inline 스타일 방식이라고 부른다.
<div style="color:red;"> 내용 </div>
Internal
Internal은 문서에 <style>을 활용한 방법이다. <style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어간다.
<style> div {color: red;} </style>
위의 코드로 모든 <div>에 같은 스타일을 줄 수 있다. 하지만 이것도 한계가 있다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 한다. 페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일은 아니다.
External
External은 외부 스타일 시트 파일을 이용한 방법이다. 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이다. 외부 파일은 확장자가 .css가 되며 css 파일이라고 부른다. 우선 CSS 파일을 하나 만들고 스타일 규칙을 선언한다. 그다음 <link>을 이용해서 CSS 파일을 연결하면 된다.
div {color: red;}
<link rel="stylesheet" href="css/style.css"><head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적는다. rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 한다. 외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있다. 또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있다. 외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법이다.
Import
Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이다.
@import url("css/style.css");<style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않는다. 이에 본 강의에서는 다루지 않습니다. 궁금하신 분들은 따로 찾아보시길 바란다.
[ 출처 ]
BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/33508
'CSS > Default' 카테고리의 다른 글
| CSS, SASS, SCSS (0) | 2024.09.27 |
|---|---|
| Animation (1) | 2024.09.27 |
| Transition (0) | 2024.09.27 |
| 애니메이션의 이해 (0) | 2024.09.27 |