CSS 추가하는 3가지 방법
이번 포스트에서는 CSS를 추가하는 3가지 방법을 다룹니다. CSS를 추가하는 방법으로는 첫 번째, 인라인 스타일링(inline style), 두 번째 head 태그에 style 태그를 추가해서 넣는 방법, 세 번째로 CSS 파일을 만들어 연결해주는 방법이 있습니다.
CSS 의미?
CSS를 적용하기 전에 CSS의 의미를 먼저 보고 넘어가려고 합니다. CSS는 Cascading Style Sheets를 의미합니다. 여기서 Cascading은 네이버 영어 사전의 뜻으로 '1. 작은 폭포 2. 폭포처럼 흐르다 3. 풍성하게 늘어지다' 뜻을 가집니다. 즉, 여러 규칙이 같은 요소에 적용됨을 의미합니다. F12 크롬 개발자 도구 style 칸에서 casecading을 확인할 수 있는데요, 아래 캡처 사진처럼 하나의 요소에 여러 규칙이 적용됨을 볼 수 있습니다.
규칙이 강하게 적용되는 순서는 아래와 같습니다.
Tag and ::pseudo-element selectors <. class, :pseudo-class and [attribute] selectors < #ID selectors < Inline Styles
CSS 추가하는 3가지 방법
본격적으로 CSS를 추가하는 방법에 대해서 알아보겠습니다.
1. 인라인 스타일링
html 파일 태그에서 style:= ""를 추가하면 인라인 스타일링이 가능합니다. 인라인 스타일링은 html에 포함되기 때문에 좋은 방법은 아닙니다. 스타일링과 내용을 구분하는 것이 html의 내용을 유지하는 데 좋습니다. 인라인 스타일링을 했을 때, html의 가독성이 떨어지고, 코드 유지가 어려워진다는 단점이 있습니다.
<section style ="background-color: purple">
<h1>Hello World!!!</h1>
</section>2. head 태그에 style 태그를 추가하는 방법
head 태그 안에 style 태그를 추가하여 CSS를 넣을 수 있습니다. 아래 코드에서 section {} 이 부분이 selector(선택자)를 의미하고, 그 안에 적용하고 싶은 스타일(properties)을 적으면 CSS 코드가 적용됩니다. property : value 형식으로 작성하는데, 여기서 property는 background-color이고, value는 purple입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tag test</title>
<style>
section{
background-color: purple;
}
</style>
</head>
<body>
<main>
<section>
<h1>Hello World!!!</h1>
</section>
</main>
</body>
</html>3. CSS 파일을 만들어 연결해주는 방법
같은 폴더에 main.css라는 CSS 파일을 생성하고, 2번에서 사용했던 section{background-color : purple;}부분을 복사 붙여 넣기 해줍니다. 그리고 index.html 파일에서 head 부분에 <link rel = "stylesheet" href ="main.css">를 추가해주면 main.css에 입력했던 CSS를 HTML에 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tag test</title>
<link rel="stylesheet" href="main.css">
</head>
<body></body>
</html>/* main.css */
section{
background-color: purple;
}'컴퓨터 IT > HTML, CSS' 카테고리의 다른 글
| HTML 태그 우선순위 (0) | 2023.01.30 |
|---|---|
| 자바스크립트 HTML Template 태그 (0) | 2022.12.15 |
| CSS background 꽉차게 넣는 방법 (0) | 2022.12.12 |
| HTML 시맨틱 태그의 모든 것 Semantic Tag (0) | 2022.11.27 |
| CSS 구글 폰트 적용 방법 (0) | 2022.11.17 |