CSS 추가하기
HTML 코드에 CSS를 입히는 방법에는 세가지가 있다.
1. 인라인 스타일
<section style="background: red"></section>
style 속성을 사용하여 태그 내부에 CSS를 선언하면 된다.
여기서 말하는 선언은 어떤 프로퍼티에 어떤 스타일을 어떻게 지정할지 정의하는 것이다.
CSS 프로퍼티는 background, font-size 등 요소를 변경할 수 있는 속성을 말한다.
일반적으로 많이 사용하는 프로퍼티는 20여개밖에 없다. 반복적으로 작업하다보면 자연스럽게 외워진다.
잠깐 속성값에 대해 얘기하자면, 속성마다 적용할 수 있는 값이 다르며 값의 유형은 크게 네가지로 나뉜다.
첫번째로, 이미 정해져있는 값이다. display 속성의 경우 block, inline 등의 옵션이 있다.
두번째로, 색상이다. background나 color 속성이 이에 해당한다.
세번째로, 길이 크기 숫자이다. 여기에는 픽셀, 퍼센트, 일반 정수가 들어갈 수 있다.
네번째로, 함수이다. 단순히 색상을 쓰는 대신 url을 이용하거나, transform 함수로 요소의 크기를 줄이거나 회전할 수 있다.
background의 경우 색상 속성을 사용할 수 있고, 색상 속성은 이렇게 색 이름뿐만 아니라 #1234와 같은 hex 코드도 사용할 수 있다.
다시 본론으로 돌아와서 인라인 스타일에 대해 이야기하자.
인라인 스타일은 좋은 방법이 아니라고 한다.
바꾸고 싶은 요소가 있다면 코드를 모두 읽어봐야하고, 같은 태그를 여러번 쓰는 경우에 같은 스타일을 여러번 쓰고자 한다면 일일이 적용해줘야한다.
프로퍼티 목록이 길어지면 가독성도 떨어진다.
2. html의 style 태그 활용하기
html 파일의 head 영역 안에 style 태그를 추가하고, 적용하려는 태그를 "선택"한다.
이것을 선택자 (selector)라고 부른다. 태그 옆에 중괄호와 함께 프로퍼티, 프로퍼티 값을 써준다. 이제 모든 selection 태그의 배경색은 #ff1b68로 바뀐다.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>uHost</title>
<link rel="shortcut icon" href="favicon.png" />
<style>
section {
background: #ff1b68;
}
</style>
</head>
<body>
<main>
<section>
<h1>Get the freedom you deserve.</h1>
</section>
</main>
</body>
1번 방법보다 훨씬 나아보인다. 그런데 CSS가 길어지면 어떻게 될까? head 영역이 뚱뚱해져서 보기 좋지 않을 것이다. 또한 성능에도 좋지 않다. 그래서 보편적으로는 CSS 파일을 따로 분리한다. 성능과 관련한 내용은 3번 방법에서 다시 설명할 것이다.
3. CSS 파일 분리하기
.css로 끝나는 파일을 새로 만들어주고, html 파일에서 해당 파일을 추가한다.
추가하는 방법은 다음과 같다. html의 head 태그 안에 써준다.
<link rel="stylesheet" href="해당 파일의 위치/파일이름.css">
.css에는 html의 <style> 태그 안에 넣었던 내용을 그대로 옮기면 된다. 어떠한 태그 없이 선택자 { 프로퍼티:값 } 형태로 사용한다.
section{
background: #ff1b68
}
이렇게 같은 스타일 시트를 사용하면 여러 페이지에 적용할 때 브라우저는 스타일 시트를 캐싱하여 새로운 페이지마다 다시 다운로드하지 않아도 된다. 2번 방법을 사용한다면 css 부분 때문에 html 파일 크기가 늘어날 것이고, 브라우저는 새 페이지마다 html의 스타일 태그를 매번 받게 되어 속도가 느려진다.
'나도 공부한다 > CSS' 카테고리의 다른 글
| CSS의 기본 (0) | 2025.01.11 |
|---|---|
| CSS 기초 다지기 - 4. 상속 (0) | 2024.02.04 |
| CSS 기초 다지기 - 2. 폰트 변경하기 (0) | 2024.02.03 |
