CSS란 무엇인가?
CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어입니다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 글꼴 등을 제어할 수 있습니다. CSS는 HTML과 분리된 스타일 시트를 통해 웹 페이지의 디자인을 더 쉽게 관리할 수 있도록 도와줍니다.
CSS의 역사
- 1996년: CSS 레벨 1 (CSS1) 표준이 발표됨
- 1998년: CSS 레벨 2 (CSS2) 표준이 발표됨
- 2011년: CSS 레벨 3 (CSS3) 표준이 발표됨
- 현재: CSS4는 별도의 표준으로 존재하지 않으며, CSS3의 모듈이 계속 발전하고 있습니다.
CSS 문법
CSS 문법은 선택자와 선언 블록으로 구성됩니다.
- 선택자(Selector): 스타일을 적용할 HTML 요소를 선택합니다.
- 선언 블록(Declaration Block): 중괄호
{}로 감싸여 있으며, 스타일 속성과 값을 포함합니다.
예제:
선택자 {
속성: 값;
}CSS 선언
- 속성(Property): 스타일 속성을 정의합니다.
- 값(Value): 스타일 속성에 대한 값을 정의합니다.
예제:
p {
color: blue;
font-size: 16px;
}CSS 적용 방법
CSS를 HTML에 적용하는 방법은 세 가지가 있습니다: 인라인(In-line) 스타일, 내부(Internal) 스타일 시트, 외부(External) 스타일 시트
인라인 스타일
HTML 요소에 직접 스타일을 지정하는 방법입니다. style 속성을 사용합니다.
예제:
<p style="color: blue; font-size: 16px;">이것은 인라인 스타일입니다.</p>
내부 스타일 시트
HTML 문서의 <head> 섹션에 <style> 요소를 사용하여 스타일을 지정합니다.
예제:
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>이것은 내부 스타일 시트입니다.</p>
</body>외부 스타일 시트
외부 CSS 파일을 링크하여 스타일을 지정합니다. <link> 요소를 사용하여 HTML 문서와 CSS 파일을 연결합니다.
예제
style.css
p {
color: blue;
font-size: 16px;
}
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>이것은 외부 스타일 시트입니다.</p>
</body>
CSS 선택자
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 다양한 선택자가 있습니다.
기본 선택자
- 요소 선택자(Element Selector): 특정 HTML 요소를 선택합니다.
p { color: blue; }- 클래스 선택자(Class Selector): 특정 클래스 이름을 가진 요소를 선택합니다. 클래스 이름 앞에
.을 붙입니다. .classname { color: blue; }- 아이디 선택자(ID Selector): 특정 아이디를 가진 요소를 선택합니다. 아이디 이름 앞에
#을 붙입니다. #idname { color: blue; }
복합 선택자
- 자손 선택자(Descendant Selector): 특정 요소의 모든 자손 요소를 선택합니다.
div p { color: blue; }- 자식 선택자(Child Selector): 특정 요소의 직계 자식 요소를 선택합니다.
div > p { color: blue; }- 동위 선택자(Adjacent Sibling Selector): 특정 요소의 바로 다음 형제 요소를 선택합니다.
h1 + p { color: blue; }- 일반 형제 선택자(General Sibling Selector): 특정 요소의 모든 형제 요소를 선택합니다.
h1 ~ p { color: blue; }
CSS 상속
CSS 상속은 부모 요소의 스타일이 자식 요소에 자동으로 적용되는 것입니다. 그러나 모든 속성이 상속되는 것은 아닙니다. 예를 들어, color와 font-family는 상속되지만, margin과 padding은 상속되지 않습니다.
예제:
body {
font-family: Arial, sans-serif;
color: blue;
}
p {
font-size: 16px;
}<body>
<p>이 텍스트는 파란색으로 표시됩니다.</p>
</body>
결론
CSS는 웹 페이지의 스타일을 지정하는 데 필수적인 언어입니다. 이번 글에서는 CSS의 기본 문법, 적용 방법, 선택자, 상속 등에 대해 배웠습니다. CSS를 활용하여 HTML 요소의 스타일을 제어할 수 있으며, 웹 페이지의 디자인을 효과적으로 관리할 수 있습니다.
다음 글에서는 텍스트 스타일링에 대해 알아보겠습니다.
다음 글에서 만나요!
'웹 디자인' 카테고리의 다른 글
| [웹 디자인] 10일차: CSS 색상 및 배경 (0) | 2024.08.10 |
|---|---|
| [웹 디자인] 9일차: CSS 텍스트 스타일링 (0) | 2024.08.09 |
| [웹 디자인] 7일차: HTML 멀티미디어 요소 (0) | 2024.08.07 |
| [웹 디자인] 6일차: HTML5 시멘틱 요소 (0) | 2024.08.06 |
| [웹 디자인] 5일차: HTML 폼과 입력 요소 (0) | 2024.08.05 |