728x90
CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로, HTML 문서의 구조와 스타일을 분리해 웹 페이지를 더 쉽게 디자인하고 유지관리할 수 있게 합니다.
오늘은 CSS의 기본 개념과 선택자(selector)에 대해 알아보겠습니다! 🎨
📖 CSS란 무엇인가?
CSS는 Cascading Style Sheets의 약자로, "종속형 스타일 시트"라는 뜻을 가집니다.
🌈 HTML이 웹 페이지의 내용을 정의한다면, CSS는 그 내용을 어떻게 보여줄지 결정합니다.
예를 들어, 글꼴, 색상, 간격, 레이아웃 등을 설정하여 사용자가 보는 웹 페이지의 디자인을 정합니다.
- HTML: 문서의 뼈대를 정의 (예: <h1>제목</h1>)
- CSS: 문서의 외형을 정의 (예: h1 { color: blue; font-size: 24px; })
CSS를 사용하면 웹 페이지의 스타일을 통합적으로 관리할 수 있어서, 웹 사이트의 일관성을 유지하고 유지보수도 쉽게 할 수 있습니다. 🌍
🎯 CSS의 선언 방법
CSS는 세 가지 방식으로 선언할 수 있어요:
- 외부 스타일 시트 (External Style Sheet):
- 스타일 규칙을 별도의 .css 파일에 작성하고 HTML 문서에서 해당 파일을 불러오는 방식입니다.
- 여러 HTML 문서에서 동일한 스타일을 공유할 수 있어서 효율적입니다.
- 예시:
<link rel="stylesheet" type="text/css" href="styles.css">
2. 내부 스타일 시트 (Internal Style Sheet):
- 스타일 규칙을 HTML 문서의 <head> 섹션에 <style> 태그로 직접 작성하는 방식입니다.
- 해당 HTML 문서에서만 유효합니다.
- 예시:
<style>
body { background-color: lightblue; }
</style>
3. 인라인 스타일 (Inline Style):
- 각 HTML 요소에 style 속성을 사용해 직접 스타일을 적용하는 방식입니다.
- 특정 요소에만 스타일을 적용할 때 유용하지만, 관리가 어렵고 코드가 지저분해질 수 있습니다.
- 예시:
<h1 style="color: red;">이것은 빨간색 제목입니다</h1>🎨 CSS 선택자(Selector)
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 선택자를 통해 특정 요소나 그룹의 스타일을 제어할 수 있어요! CSS의 선택자는 크게 다음과 같은 종류가 있습니다:
- 기본 선택자
- 타입 선택자 (Type Selector): HTML 요소 이름을 그대로 사용하여 해당 요소 전체에 스타일을 적용합니다.
- 예시: p { color: green; } 모든 <p> 태그에 초록색 텍스트 색상을 적용합니다. 🌿
- 전체 선택자 (Universal Selector): 모든 요소를 선택할 때 사용하며, *를 사용합니다.
- 예시: * { margin: 0; padding: 0; } 모든 요소의 여백과 패딩을 0으로 설정합니다.
- 타입 선택자 (Type Selector): HTML 요소 이름을 그대로 사용하여 해당 요소 전체에 스타일을 적용합니다.
- 속성 선택자 (Attribute Selector)
- 특정 속성을 가진 요소를 선택할 때 사용합니다.
- 예시: input[type="text"] { border: 1px solid #000; } 모든 텍스트 입력 필드에 검은색 테두리를 적용합니다.
- 클래스 선택자 (Class Selector)
- 요소의 class 속성값을 기반으로 선택합니다. 여러 요소에 공통 스타일을 적용할 때 유용해요.
- 클래스 선택자는 **마침표(.)**로 시작합니다.
- 예시:
.highlight { background-color: yellow; }
✨ 선택자 활용 예제
선택자를 이용한 다양한 스타일 적용 예제를 살펴볼까요?
<!DOCTYPE html>
<html>
<head>
<style>
/* 타입 선택자 */
p { color: blue; }
/* 클래스 선택자 */
.important { font-weight: bold; }
/* 아이디 선택자 */
#unique-element { text-align: center; }
/* 의사 클래스 선택자 */
a:hover { text-decoration: underline; color: red; }
</style>
</head>
<body>
<p>이 문장은 파란색입니다.</p>
<p class="important">이 문장은 굵은 글씨입니다.</p>
<div id="unique-element">이 문장은 가운데 정렬되어 있습니다.</div>
<a href="#">링크에 마우스를 올리면 빨간색으로 바뀝니다.</a>
</body>
</html>728x90
'웹개발 > CSS' 카테고리의 다른 글
| ✨ CSS 속성 정리 (0) | 2024.09.10 |
|---|