CSS (Cascading Style Sheets) 개요
CSS (Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 언어로, HTML의 구조에 디자인을 입혀서 웹 페이지를 시각적으로 꾸밀 수 있게 합니다. HTML이 페이지의 구조를 결정한다면, CSS는 그 구조를 어떻게 보여줄지 결정하는 역할을 합니다.
CSS의 기본 문법
CSS는 선택자(Selector)와 선언(Declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 그 요소에 적용할 스타일을 정의합니다.
선택자 {
속성1: 값1;
속성2: 값2;
}- 선택자: CSS를 적용할 HTML 요소를 지정합니다. 예를 들어,
h1태그, 클래스명.class-name, 아이디#id-name등이 있습니다. - 속성: 요소의 스타일을 결정하는 구체적인 항목으로, 색상(
color), 글꼴(font-size), 여백(margin), 크기(width, height) 등이 있습니다. - 값: 속성에 설정할 구체적인 스타일 값입니다.
CSS 적용 방법
CSS는 HTML에 세 가지 방법으로 적용할 수 있습니다.
1. 인라인 스타일(Inline Style)
-
HTML 태그 내에
style속성을 사용하여 적용합니다. -
한 번만 적용되는 스타일에 적합하며, 반복해서 사용하기에는 불편합니다.
<p style="color: blue; font-size: 14px;">인라인 스타일 적용 예제</p>
2. 내부 스타일 시트(Internal Style Sheet)
- HTML 문서의
<head>태그 안에<style>태그로 작성합니다. - 해당 HTML 파일에서만 사용할 스타일을 정의할 때 유용합니다.
<style>
p {
color: green;
font-size: 16px;
}
</style>3. 외부 스타일 시트(External Style Sheet)
-
별도의
.css파일에 스타일을 작성하고, HTML 문서에서<link>태그로 불러옵니다. -
여러 HTML 문서에 동일한 스타일을 적용할 수 있어 유지보수에 용이합니다.
<link rel="stylesheet" href="styles.css">
CSS 선택자 종류
CSS 선택자는 스타일을 적용할 요소를 선택하는 방법입니다. 다양한 선택자를 통해 세밀하게 스타일을 지정할 수 있습니다.
1. 기본 선택자
- 태그 선택자: 특정 태그 전체에 스타일을 적용합니다. 예:
p,h1,div - 클래스 선택자: 클래스명 앞에
.을 붙여 특정 클래스에 스타일을 적용합니다. 예:.class-name - 아이디 선택자: 아이디 앞에
#을 붙여 특정 아이디에 스타일을 적용합니다 예:#id-name
2. 속성 선택자
- 특정 속성을 가진 요소를 선택합니다. 예:
input[type="text"] { ... }
3. 자손 선택자
- 부모 요소의 하위에 있는 모든 특정 요소를 선택합니다. 예:
div p { ... }
4. 직접 자식 선택자
- 바로 아래의 자식 요소만 선택합니다. 예:
ul > li { ... }
5. 그룹 선택자
- 쉼표로 여러 선택자를 그룹화하여 한 번에 스타일을 적용할 수 있습니다. 예:
h1, h2, h3 { ... }
CSS 박스 모델
CSS 박스 모델(Box Model)은 웹 페이지에서 HTML 요소가 차지하는 영역을 이해하는 데 필수적인 개념입니다. 각 요소는 콘텐츠, 패딩(padding), 테두리(border), 여백(margin)으로 구성된 사각형 상자입니다.
- 콘텐츠(Content): 요소의 실제 내용이 들어가는 부분입니다.
- 패딩(Padding): 콘텐츠와 테두리 사이의 여백입니다. 배경색이 확장됩니다.
- 테두리(Border): 패딩 바깥쪽에 있는 테두리로, 두께와 색상을 설정할 수 있습니다.
- 여백(Margin): 요소와 다른 요소 간의 간격을 설정하는 영역입니다.
.box {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 15px;
}CSS 레이아웃
CSS는 다양한 레이아웃 방식으로 요소를 배치할 수 있습니다.
- 플렉스박스(Flexbox)
- 1차원 레이아웃 방식으로, 주로 한 방향으로 정렬할 때 사용됩니다.
- 요소들을 가로 또는 세로로 균등하게 배치하고, 정렬을 쉽게 관리할 수 있습니다.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}- 그리드(Grid)
- 2차원 레이아웃 방식으로, 복잡한 레이아웃을 만들 때 유용합니다.
- 행과 열로 나누어 레이아웃을 쉽게 구성할 수 있습니다.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
기본 배치 방식
position속성을 사용하여 요소의 위치를 고정하거나 상대적으로 이동시킬 수 있습니다.static: 기본 위치relative: 자신의 위치에서 이동absolute: 부모 요소를 기준으로 이동fixed: 뷰포트를 기준으로 고정sticky: 스크롤에 따라 상대적 위치에서 고정
CSS 색상과 글꼴
색상
* **색상 이름**: `color: red;`
* **HEX 코드**: `color: #ff0000;`
* **RGB, RGBA**: `color: rgb(255, 0, 0);` 또는 `rgba(255, 0, 0, 0.5);`
* **HSL, HSLA**: `color: hsl(0, 100%, 50%);`글꼴
font-family: 글꼴을 설정합니다. 여러 글꼴을 지정하여, 브라우저가 첫 번째 사용 가능한 글꼴을 사용하게 합니다.font-size: 글꼴 크기를 설정합니다.font-weight: 글꼴 두께를 설정합니다.line-height: 줄 높이를 설정하여 가독성을 높일 수 있습니다.
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
}CSS 애니메이션과 트랜지션
- 트랜지션(Transition)
- 요소의 상태가 변할 때 부드러운 전환 효과를 적용할 수 있습니다.
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: green;
}- 애니메이션(Animation)
- 애니메이션을 사용하면 요소에 복잡한 동작을 지정할 수 있습니다.
@keyframes규칙을 통해 애니메이션 단계를 정의합니다.
- 애니메이션을 사용하면 요소에 복잡한 동작을 지정할 수 있습니다.
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 1s ease-in-out;
}참고 자료
CSS에 대해 더 깊이 배우고 싶다면 다음 자료를 참고해 보세요.
1. MDN 웹 문서 - CSS 기본
- CSS의 기초부터 심화까지 잘 정리된 한국어 문서입니다.
- MDN CSS - 한국어
-
생활코딩 - CSS 강의
- 초보자를 위한 CSS 기본 강의로, 간단한 실습 예제와 함께 배우기 좋습니다.
- 생활코딩 CSS 강의
-
CSS 트릭스 (CSS-Tricks)
- CSS 레이아웃, 애니메이션, 기타 고급 기법에 대해 실습 위주로 다룬 웹사이트입니다.
- CSS-Tricks
