TIL - YYYY-MM-DD #5
Description
name: TIL
about: TIL
title: "TIL - YYYY-MM-DD"
labels: [TIL]
assignees: ''
TIL - 2025-01-20
TIL: CSS 공부 - 50년 고수의 깨달음
HTML 복습
기본 HTML 문서 구조
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>가장 큰 제목 태그입니다</h1>
<h2>다음으로 큰 제목 태그입니다</h2>
<h3>다다음으로 큰 제목 태그입니다</h3>
<h4>다다다음으로 큰 제목 태그입니다</h4>
<h5>다다다다음으로 큰 제목 태그입니다</h5>
<h6>다다다다다음으로 큰 제목 태그입니다</h6>
<p>줄바꿈을 하려면</p>
<p>이렇게</p>
중간에<br />끊을 수 있다
</body>
</html>
중요한 점:
HTML 태그는 제목과 본문을 구분하고,
로 줄 바꿈을 할 수 있다.
CSS를 적용하는 방법은 다양하다. 스타일을 바로 <style> 태그 안에 넣거나 외부 파일로 분리할 수 있다.
CSS 기초
CSS란?
**Cascading Style Sheets(CSS)**는 웹 페이지의 시각적 스타일을 담당하는 언어입니다.
CSS는 여러 규칙이 겹칠 때 어떤 스타일을 우선 적용할지 결정하는 Cascading 메커니즘을 가지고 있습니다.
Cascading & Inheritance
Cascading: 여러 CSS 규칙이 겹칠 때, 우선 적용할 규칙을 결정합니다. 예를 들어, CSS에서 우선순위가 더 높은 규칙이 적용됩니다.
Inheritance: 부모 요소의 스타일이 자식 요소에 자동으로 적용되는 방식입니다. 텍스트 관련 속성들은 상속되지만, 박스 레이아웃 속성은 상속되지 않습니다.
CSS 우선순위
!important > 인라인 스타일 > ID 선택자 > 클래스 선택자 > 요소 선택자
명시도(Specificity): ID 선택자는 클래스보다 우선 적용됩니다.
소스코드 순서(Order): 동일한 명시도를 가진 규칙은 마지막에 선언된 규칙이 우선 적용됩니다.
CSS 문법
기본 문법
css
선택자 {
속성: 값;
속성: 값;
}
선택자: 스타일을 적용할 HTML 요소를 지정합니다.
속성: 스타일의 종류 (ex. color, font-size).
값: 해당 속성에 적용할 스타일 값 (ex. blue, 18px).
예시:
css
복사
편집
h1 {
color: blue;
font-size: 18px;
}
CSS 적용 방법
인라인 스타일: HTML 태그 내부에서 직접 스타일을 적용.
우선순위가 가장 높지만, 재사용성이 떨어집니다.
예: <p style="color: purple;">내용</p>
---
내부 스타일시트: HTML 문서 내 <style> 태그에 스타일을 작성.
해당 HTML 문서에만 적용됩니다.
예:
<style>
li { color: orange; font-size: 15px; }
ol li { color: green; }
ol li { color: blue; }
</style>
외부 스타일시트: 별도의 .css 파일에 스타일 정의 후 HTML 문서에서 링크로 연결.
여러 페이지에서 일관된 스타일을 적용할 수 있습니다.
예:
<link rel="stylesheet" href="styles.css" />
CSS 크기 단위
1. px (픽셀)
절대 단위로, 브라우저에서 표현되는 실제 픽셀 수 기반입니다.
장점: 정확한 크기 지정 가능.
단점: 반응형 디자인에 적합하지 않음.
2. % (백분율)
상대 단위로, 부모 요소의 크기나 컨텍스트에 따라 계산됩니다.
장점: 반응형 레이아웃에 유용.
단점: 기준 요소가 변하면 예측 어려움.
3. em
부모 요소나 현재 요소의 폰트 크기를 기준으로 상대 단위입니다.
단점: 상속되어 예기치 않은 크기가 될 수 있음.
4. rem
루트 요소(html)의 폰트 크기를 기준으로 계산되는 상대 단위입니다.
장점: 일관성 있는 크기 지정.
마무리
CSS는 웹 디자인에서 중요한 역할을 하며, 다양한 선택자와 단위를 활용해 웹 페이지의 스타일을 정의할 수 있습니다. 이 TIL을 통해 CSS의 기초 문법과 적용 방법을 복습했습니다.