개요
간단하게 HTML에 대한 내용은 정리를 했고, 이제 CSS에 대해 정리해볼 차례이다.
0. CSS란?
CSS(Cascading Style Sheets)는 웹 페이지의 스타일(=디자인)을 정의하는 스타일 시트 언어이다.
앞서 정리했던 내용처럼 HTML은 웹 페이지의 뼈대를 담당하면, CSS는 이 뼈대를 꾸미고 배치하는 역할을 한다.
1. CSS 적용 방법
CSS를 HTML 문서에 적용하는 방법은 총 3가지가 있다.
1-1. 인라인 스타일(Inline Style)
HTML 요소에 직접 style 속성을 사용해 CSS를 적용하는 방법이다.
<p style="color: blue; font-size: 16px;"> 파란색 글자 크기 16px.</p>
장점
-> 별도의 CSS 파일이 필요하지 않다.
-> 특정 요소에만 적용이 가능하고 빠른 테스트에 용이하다.
단점
-> HTML 태그마다 다 넣어야 하기 때문에 가독성 측면에서 떨어진다.
-> 동일한 스타일을 여러 요소에 적용할 경우 중복이 발생한다.
1-2. 내부 스타일 시트(Internal Style Sheet)
HTML 문서 내 <head> 태그 안에 <style> 태그를 사용해 CSS를 정의하는 방식이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS 적용해보기</title>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>빨간색 글자 크기 18px.</p>
</body>
</html>
장점
-> 한 문서 내에서 여러 요소에 적용이 가능하다.
-> 인라인 스타일보다 가독성 면에서 좋고 깔끔하다.
단점
-> HTML 문서에 코드 자체가 많아질 경우 유지보수에 어려움이 있다.
-> 하나의 HTML 문서에만 적용되는 것이기 때문에 여러 문서에는 동일한 스타일을 적용하기 어렵다.
1-3. 링킹 스타일 시트(External Style Sheet)
외부에 CSS 파일을 별도로 만들어 HTML 문서에 연결하는 방식이다.
<style.css>
p {
color: green;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS 적용해보기</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>초록색 글자 크기 20px.</p>
</body>
</html>
장점
-> 여러 HTML 파일에 대해 동일한 CSS를 적용할 수 있어 유지보수성이 높다.
-> CSS 코드와 HTML 코드가 분리되어 가독성이 향상된다.
단점
-> 여러 CSS 파일을 관리해야 한다.
-> 외부 CSS 파일을 불러오는 과정에서 로딩 시간이 발생할 수 있다.
이 중에서 아무래도 링킹 스타일 시트 방법이 가장 널리 사용된다고 한다.
2. 선택자
CSS 선택자는 특정 HTML 요소를 선택해 스타일을 적용할 수 있도록 도와준다. 하나씩 살펴보자.
2-1. 기본 선택자
* {
color: green;
font-size: 20px;
}
: *
-> 해당 HTML 모든 태그에 대해 적용되는 스타일이다.
* 주의할점은 뒤에 오는 코드의 스타일 속성이 겹칠경우(= 여기서는 color) 뒤에 있는걸로 덮여쓰여진다.
* {
color: green;
font-size: 20px;
}
* {
color: red;
}
2-2. 태그 선택자
-> HTML 태그명을 사용해 해당 태그 전체에 스타일을 적용한다.
h1 {
color: blue;
}
p {
color: green;
font-size: 20px;
}
2-3. 클래스 선택자
-> .(점) 기호를 사용해 특정 클래스명을 가진 요소에 스타일을 적용한다.
.text-bold {
font-weight: bold;
} <span class="text-bold">제목바로 아래 있지요</span>
-> 이런 식으로 class 안에 css에 적용한 클래스명을 입력해주면 된다.
-> 추가적으로 여러개의 클래스에 해당하는 CSS 스타일을 가지고 싶다면
<span class="text-bold blue">제목바로 아래 있지요</span>
-> 이런식으로 클래스명 사이에 공백을 뛰고 입력해주면 된다.
-> 또한 얘는 다른 선택자에 이어 붙이는 것이 가능하다. 이게 무슨말이냐
p.blue {
color: blue;
}
-> p라는 태그에 class 명이 "blue"인 요소의 스타일을 변경하고 싶다는 것이다.
<p class="blue">파란색 클래스</p>
<!-- 위의 요소가 변경되겠지 -->
2-4. 아이디 선택자
-> #기호를 사용해 특정 ID를 가진 요소에 스타일을 적용한다.
#green-title {
font-size: 24px;
color: green;
}<span id="green-title">초록색 제목</span>
-> 이때 ID는 문서 내에서 유일해야 하고, 특정 요소 하나에만 스타일을 적용할 때 사용한다.
*선택자 우선순위*
이 부분이 가장 중요한 것 같다.
CSS 선택자에서는 좀 더 구체적으로 요소를 지정할수록, 그리고 나중(= 코드 뒤)에 작성할 수록 우선순위를 갖게 된다.
즉, 지금까지 알아본 선택자 우선순위를 비교해보자면
아이디 선택자 > 클래스 선택자 > 태그 선택자 > 기본 선택자
2-5. 그룹 선택자
-> 여러 요소를 동시에 선택할 때 사용할 수 있다.
-> 이때는 ,(콤마)를 통해 구분한다.
h1,
.text-bold,
.blue,
#blue-title {
color: blue;
font-weight: bold;
}
3. CSS 결합자
CSS 결합자는 여러 개의 선택자를 조합해 특정 관계를 가진 요소를 선택하는 방식이다.
즉 위에서 배운 아이디, 클래스, 태그, 기본 선택자들을 조합해 우리가 원하는 애들에 대해 CSS를 적용하도록 하는 것!
3-1. 자식 결합자(>)
-> 바로 아래의 자식 요소만 선택할 때 사용된다.
.container > p {
color: blue;
}<div class="container">
<p>이 문장은 파란색입니다.</p>
<div>
<p>이 문장은 영향을 받지 않습니다.</p>
</div>
</div>
-> <div> 태그 아래인 <p> 태그는 자식 요소가 아니라 손자 요소라서 적용이 안된다.
3-2. 후손 결합자( )
-> 특정 요소의 모든 하위 요소를 선택할 때 사용된다.
.container p {
color: blue;
} <div class="container">
<p>이 문장은 파란색입니다.</p>
<div>
<p>이 문장도 파란색!</p>
</div>
</div>
-> 이번에는 후손인 <div> 태그 아래 <p> 태그도 적용되는 것을 알 수 있다.
3-3. 인접 형제 결합자(+)
-> 인접한 형제 요소 하나만 선택할 때 사용된다.
h1 + p {
font-size: 20px;
} <h1>제목</h1>
<p>이 문장은 20px 크기로 표시</p>
<p>얘는 영향 안받음</p>
3-4. 일반 형제 결합자(~)
-> 특정 요소 뒤에 오는 모든 형제 요소를 선택할 때 사용한다.
h1 ~ p {
color: red;
}<h1>제목</h1>
<p>얘도 빨강</p>
<p>얘도 빨강</p>
<p>얘도 빨강</p>
4. 가상 클래스 (Pseudo-classes)
가상 클래스는 특정 상태의 요소를 선택할 때 사용된다.
태그 뒤에 콜론(:)을 붙여 작성한다.
하나씩 종류들을 살펴보면,
4-1. :hover
-> 마우스를 요소에 올렸을 때 스타일을 변경할 수 있다.
a:hover{
color: orange;
}
<a href="#">링크</a>
-> 저 링크에 마우스를 갖다 댔을 때 주황색으로 글씨가 변하게 된다.
4-2. :nth-child(n)
-> 부모 요소의 n 번째 자식을 선택할 수 있다.
li:nth-child(2){
color: blue;
}
-> 여기서는 2번째 자식이 파란색으로 변한다.
4-3. :first-child / :last-child
-> 각각 첫 번째, 마지막 자식의 스타일을 적용한다.
p:first-child{
color : blue;
}
p:last-child{
color : gray;
}
4-4. :not(선택자)
-> 특정 요소를 제외하고 선택할 수 있다.
p:not(.special) {
color: purple;
}
-> 여기서는 클래스명이 "special"인 요소 제외하고 나머지가 적용된다.
'Language > HTML&CSS' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2025.02.18 |
|---|---|
| [CSS] 인라인과 블록 (0) | 2025.02.17 |
| [HTML] form & input 태그 (1) | 2025.02.03 |
| [HTML] 이미지 & 표 & 링크 태그 (0) | 2025.02.03 |
| [HTML] HTML이란? HTML 태그들 (1) | 2025.02.02 |
