CSS란 무엇인가?
**CSS(Cascading Style Sheets)**는 웹 페이지를 스타일링하는 데 사용하는 언어야. HTML이 웹 페이지의 구조와 콘텐츠를 만든다면, CSS는 그 구조와 콘텐츠를 꾸며서 더 멋지고 보기 좋게 만들어. 웹 페이지에서 텍스트의 크기, 색상, 배경, 여백 등을 지정해서 원하는 디자인을 구현할 수 있는 거지.
CSS는 마치 집을 꾸미는 페인트나 가구처럼, **HTML로 만든 집(구조)**을 예쁘게 장식하고 꾸미는 역할을 해. CSS를 통해서 우리는 폰트 스타일을 바꾸고, 배경 색을 칠하고, 레이아웃을 정리하는 등 다양한 작업을 할 수 있어.
1. CSS를 사용하는 방법
CSS를 HTML에 적용하는 방법은 크게 세 가지가 있어: 인라인 스타일, 내부 스타일 시트, 그리고 외부 스타일 시트야.
1.1 인라인 스타일
인라인 스타일은 HTML 요소의 style 속성을 사용해서 CSS를 직접 써 주는 방식이야. 예를 들면:
<p style="color: red; font-size: 20px;">이 문장은 빨간색입니다.</p>
이렇게 style 속성을 사용해서 HTML 태그 안에 스타일을 직접 지정할 수 있어. 하지만 이 방법은 유지 보수하기 힘들고 코드가 지저분해져서 큰 프로젝트에서는 잘 사용하지 않아.
1.2 내부 스타일 시트
내부 스타일 시트는 HTML 문서의 <head> 섹션에 <style> 태그를 추가해서 스타일을 정의하는 방식이야. 예를 들어:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
이렇게 하면 해당 HTML 문서 내에서 모든 <p> 태그가 파란색이고 글자 크기가 18픽셀로 적용돼. 내부 스타일 시트는 한 페이지에서만 스타일을 적용할 때 좋아.
1.3 외부 스타일 시트
외부 스타일 시트는 CSS를 별도의 파일에 작성하고 HTML 문서에 그 파일을 연결하는 방식이야. 예를 들어, styles.css라는 파일을 만들고 아래와 같이 연결할 수 있어:
<link rel="stylesheet" href="styles.css">
이 방법은 유지 보수에 가장 유리하고, 여러 페이지에 같은 스타일을 적용할 수 있어서 많이 사용돼. 대규모 웹사이트에서는 대부분 외부 스타일 시트를 사용해.
2. CSS의 기본 구조
CSS는 **셀렉터(selector)**와 **선언(declaration)**으로 구성돼. 셀렉터는 어떤 HTML 요소에 스타일을 적용할지 선택하는 역할을 하고, 선언은 그 요소에 적용할 스타일을 정의하지.
p {
color: green;
font-size: 16px;
}
• 셀렉터 (p): 스타일을 적용할 HTML 요소를 가리켜.
• 선언 (color: green; font-size: 16px;): {} 안에 있는 내용으로, 스타일의 속성과 그 값을 정의해.
• 속성 (color, font-size): 적용할 스타일의 종류.
• 값 (green, 16px): 속성에 적용할 구체적인 값.
3. CSS의 주요 속성들
3.1 텍스트 스타일링
• color: 텍스트의 색상을 지정해.
h1 {
color: red;
}
• font-size: 텍스트의 크기를 지정해.
p {
font-size: 20px;
}
• font-family: 글꼴을 지정해. 여러 글꼴을 콤마로 구분해 두면, 앞의 글꼴이 없을 때 대체 글꼴을 사용할 수 있어.
p {
font-family: Arial, sans-serif;
}
• text-align: 텍스트의 정렬 방식을 지정해. left, right, center, justify 등이 있어.
h2 {
text-align: center;
}
3.2 배경 스타일링
• background-color: 요소의 배경색을 지정해.
body {
background-color: #f0f0f0;
}
• background-image: 요소에 배경 이미지를 설정해.
body {
background-image: url('background.jpg');
}
3.3 여백 및 패딩
CSS 박스 모델에 대해 알아야 해. 모든 HTML 요소는 박스 형태로 표현되고, 이 박스는 여백(margin), 테두리(border), 패딩(padding), 그리고 **콘텐츠(content)**로 구성돼.
• margin: 요소의 바깥 여백을 지정해. 다른 요소와의 거리라고 보면 돼.
p {
margin: 20px;
}
• padding: 요소의 안쪽 여백을 지정해. 콘텐츠와 테두리 사이의 간격이라고 생각하면 돼.
div {
padding: 15px;
}
• border: 요소의 테두리를 지정해. 테두리의 두께, 스타일, 색상을 설정할 수 있어.
div {
border: 2px solid black;
}
4. CSS 레이아웃
웹 페이지의 레이아웃을 잡는 건 CSS의 중요한 역할 중 하나야. 여기서 많이 사용하는 개념이 **플렉스박스(Flexbox)**와 **그리드(Grid)**야.
4.1 플렉스박스 (Flexbox)
플렉스박스는 CSS에서 요소들을 쉽게 정렬하고 배치할 수 있도록 도와주는 레이아웃 방식이야. 수평, 수직 방향으로 자유롭게 배치할 수 있어.
.container {
display: flex;
justify-content: center;
align-items: center;
}
• display: flex: 컨테이너 요소를 플렉스 컨테이너로 만들어.
• justify-content: 수평 방향 정렬 방식을 지정해 (center, space-between, flex-start 등).
• align-items: 수직 방향 정렬 방식을 지정해 (center, flex-start, flex-end 등).
4.2 그리드 (Grid)
그리드는 복잡한 레이아웃을 쉽게 만들 수 있도록 해주는 CSS 레이아웃 방식이야.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
• display: grid: 그리드 레이아웃을 적용해.
• grid-template-columns: 열의 개수와 비율을 설정해 (1fr은 동일한 비율의 열을 의미).
• gap: 그리드 아이템 사이의 간격을 설정해.
5. CSS와 반응형 디자인
요즘 웹 페이지는 다양한 화면 크기에 맞춰서 잘 보여야 해. 그래서 반응형 디자인이 중요하지. 반응형 디자인을 구현할 때 많이 사용하는 것이 **미디어 쿼리(Media Query)**야.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
6. CSS 레이아웃
6.1 포지셔닝 (Positioning)
CSS에서 요소의 위치를 조절하는 방법을 알아보자. 위치를 조정하는 속성에는 position이 있어. 이 속성은 요소가 페이지 안에서 어디에 배치될지를 결정해.
• static (기본값): 기본 위치 설정으로, 일반적인 문서 흐름에 따라 배치돼. 대부분의 요소는 기본값으로 static을 가진다.
.box {
position: static;
}
• relative: 요소를 일반적인 위치를 기준으로 상대적으로 이동시켜. 기존의 위치에서 top, right, bottom, left를 사용해서 이동할 수 있어.
.box {
position: relative;
top: 10px;
left: 15px;
}
이 코드는 요소를 위에서 10px, 왼쪽에서 15px 만큼 이동시켜.
• absolute: 요소를 부모 요소를 기준으로 특정 위치에 고정시켜. 부모 요소에 position 속성이 relative나 absolute로 설정되어 있어야 해.
.box {
position: absolute;
bottom: 0;
right: 0;
}
부모 요소의 오른쪽 아래 구석에 위치하게 돼.
• fixed: 요소를 화면에 고정시켜. 스크롤을 해도 요소가 항상 같은 위치에 있게 돼.
.navbar {
position: fixed;
top: 0;
width: 100%;
}
이 코드는 페이지 상단에 고정된 네비게이션 바를 만드는 데 유용해.
• sticky: 요소를 스크롤에 따라 움직이다가 특정 지점에 도달하면 고정돼.
.box {
position: sticky;
top: 50px;
}
요소가 스크롤되다가 top: 50px 지점에서 고정돼.
6.2 플렉스(Flexbox) - 좀 더 자세히
플렉스박스는 요소들을 수평 또는 수직 방향으로 정렬할 때 유용한 레이아웃 도구야. 간단하게 레이아웃을 만들고, 여러 크기의 화면에 맞게 조정할 수 있어.
• 플렉스 컨테이너 속성들:
• display: flex: 플렉스 컨테이너를 활성화.
• flex-direction: 플렉스 아이템의 배치 방향을 설정해. row(기본값), column 등의 값을 가질 수 있어.
.container {
display: flex;
flex-direction: row;
}
이 경우, 모든 자식 요소가 수평으로 나란히 배치돼.
• justify-content: 플렉스 아이템을 수평 방향으로 정렬해. flex-start, flex-end, center, space-between, space-around 등이 있어.
.container {
display: flex;
justify-content: space-between;
}
이 코드는 각 요소 사이에 동일한 간격을 만들어.
• align-items: 플렉스 아이템을 수직 방향으로 정렬해. flex-start, flex-end, center, baseline, stretch 등이 있어.
.container {
display: flex;
align-items: center;
}
이 코드는 모든 아이템을 수직 가운데에 맞춰 정렬해.
• 플렉스 아이템 속성들:
• flex-grow: 아이템이 남은 공간을 얼마나 차지할지 결정해. 기본값은 0이야.
.item {
flex-grow: 1;
}
이 코드는 해당 아이템이 남은 공간을 최대한 차지하게 해.
• flex-shrink: 화면이 줄어들 때 아이템이 얼마나 줄어들 수 있는지를 설정해. 기본값은 1이야.
• flex-basis: 아이템의 기본 크기를 설정해. width와 비슷한 역할을 해.
6.3 그리드(Grid) - 좀 더 자세히
CSS 그리드 레이아웃은 페이지를 행과 열로 나누어 복잡한 레이아웃을 쉽게 구성할 수 있게 해줘.
• 그리드 컨테이너 속성들:
• display: grid: 그리드 레이아웃을 활성화해.
• **grid-template-columns**와 grid-template-rows: 각각 열과 행의 크기를 설정해.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 300px;
}
이 코드는 3개의 열과 2개의 행을 가진 그리드를 만들고, 각 열의 비율을 설정해.
• gap: 그리드 아이템 사이의 간격을 설정해. row-gap과 column-gap을 따로 설정할 수도 있어.
.container {
display: grid;
gap: 20px;
}
• 그리드 아이템 속성들:
• grid-column: 그리드 아이템이 차지할 열의 범위를 설정해.
.item {
grid-column: 1 / 3;
}
이 코드는 해당 아이템이 첫 번째 열부터 세 번째 열까지 차지하도록 설정해.
• grid-row: 그리드 아이템이 차지할 행의 범위를 설정해.
7. CSS 애니메이션과 트랜지션
7.1 트랜지션 (Transition)
트랜지션은 CSS 속성이 변경될 때 부드러운 전환을 만들어. 예를 들어, 버튼에 마우스를 올렸을 때 색이 바뀌는 효과를 부드럽게 줄 수 있어.
button {
background-color: blue;
transition: background-color 0.5s;
}
button:hover {
background-color: green;
}
여기서 transition을 사용해서 버튼의 배경색이 0.5초 동안 부드럽게 파란색에서 초록색으로 바뀌도록 설정했어.
7.2 애니메이션 (Animation)
애니메이션은 CSS를 사용해서 요소에 움직임을 줄 수 있어. 애니메이션은 @keyframes와 함께 사용해.
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation: slide 2s infinite;
}
• @keyframes: 애니메이션의 각 단계에서 스타일을 정의해.
• animation: 요소에 애니메이션을 적용하고, 지속 시간(2s), 반복 횟수(infinite) 등을 설정해.
8. 반응형 디자인을 위한 미디어 쿼리 (Media Query)
미디어 쿼리는 화면 크기나 장치에 따라 CSS를 다르게 적용할 수 있도록 해. 반응형 웹 디자인을 구현하는 데 필수적이지.
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
위 코드는 화면의 너비가 600px 이하일 때 폰트 크기를 14px로 줄이겠다는 뜻이야. 이런 식으로 다양한 화면 크기에 맞춰 디자인을 조정할 수 있어.
9. CSS 전처리기 (Preprocessor)
CSS를 더 효율적으로 작성하고 관리하기 위해 Sass나 Less 같은 CSS 전처리기를 사용할 수 있어. 전처리기는 변수, 중첩, 함수 등을 지원해서 코드의 재사용성과 유지보수성을 높여줘.
• Sass 예시:
$primary-color: #4CAF50;
body {
font-family: Arial, sans-serif;
background-color: $primary-color;
}
Sass를 사용하면 $primary-color 같은 변수를 정의해서 여러 곳에서 같은 색상을 쉽게 사용할 수 있어.
10. CSS 모듈과 유틸리티 클래스
10.1 CSS 모듈 (CSS Modules)
큰 프로젝트에서는 CSS 파일을 나누어 모듈화해서 관리하는 게 좋다. 이렇게 하면 스타일이 서로 충돌하는 것을 방지할 수 있고, 코드 유지보수가 쉬워져. CSS 모듈을 사용하면 특정 컴포넌트에만 스타일이 적용되도록 파일을 나누고 각 컴포넌트별로 관리할 수 있어.
예를 들어, 각 컴포넌트에 대한 CSS를 각각의 파일로 분리하고, 그 파일들을 필요한 곳에서 불러와 사용하면 돼.
10.2 유틸리티 클래스 (Utility Classes)
유틸리티 클래스는 짧은 이름을 가진 작은 CSS 클래스를 만들어서 여러 곳에서 반복해서 사용할 수 있도록 하는 개념이야. 예를 들어, 여백, 글자 색상, 크기 등을 정의하는 유틸리티 클래스를 만들어서 필요할 때마다 간편하게 사용해.
.mt-10 {
margin-top: 10px;
}
.text-center {
text-align: center;
}
.bg-primary {
background-color: #4CAF50;
}
위와 같은 유틸리티 클래스를 만들어두면, HTML에서 특정 요소에 간단히 추가할 수 있어.
<div class="bg-primary text-center mt-10">
유틸리티 클래스가 적용된 박스
</div>
이렇게 하면 반복적인 스타일을 쉽게 재사용할 수 있고, 코드도 간결해져 유지보수가 쉬워.
11. CSS 프레임워크
효율적인 스타일링을 위해 많은 개발자들이 CSS 프레임워크를 사용해. 가장 유명한 CSS 프레임워크로는 Bootstrap, Tailwind CSS 등이 있어.
• Bootstrap: 기본적인 스타일링과 다양한 UI 컴포넌트를 제공해서 빠르게 웹 페이지를 만들 수 있어. 버튼, 폼, 네비게이션 바 등 여러 기능이 이미 만들어져 있어서 HTML 클래스만 붙이면 돼.
<button class="btn btn-primary">클릭하세요</button>
이 코드는 btn과 btn-primary 클래스를 사용해서 기본적인 버튼 스타일을 적용해.
• Tailwind CSS: 유틸리티 클래스 기반의 프레임워크로, CSS를 일일이 작성하지 않고도 간단히 스타일을 적용할 수 있어. 매우 유연하고 원하는 대로 커스터마이징하기 쉬워.
<div class="bg-blue-500 text-white p-4 text-center">
Tailwind CSS 예제
</div>
Tailwind CSS를 사용하면 클래스 이름만으로 스타일을 적용하고, 다양한 조합을 통해 복잡한 레이아웃도 쉽게 만들 수 있어.
12. CSS 변수와 커스텀 속성
CSS에서도 변수를 사용할 수 있어. 이를 CSS 커스텀 속성이라고 하는데, 값이 반복되는 부분을 변수로 지정해서 코드의 유지보수를 쉽게 할 수 있어.
:root {
--main-color: #4CAF50;
--padding-size: 20px;
}
body {
background-color: var(--main-color);
padding: var(--padding-size);
}
• --변수명: CSS 변수는 --로 시작해.
• var(--변수명): 변수의 값을 사용할 때는 var()를 사용해.
CSS 변수를 사용하면, 나중에 스타일을 수정할 때 한 곳만 변경해도 다른 곳의 모든 스타일이 함께 적용되기 때문에 아주 편리해.
13. CSS 애니메이션 심화
13.1 트랜스폼(Transform)과 트랜지션
트랜스폼은 요소를 회전시키거나 크기를 키우고, 이동시키는 등의 변환을 줄 수 있어. transition과 함께 사용하면 부드러운 애니메이션을 만들 수 있지.
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s;
}
.box:hover {
transform: scale(1.2) rotate(15deg);
}
여기서는 .box 요소에 마우스를 올렸을 때 크기를 1.2배로 확대하고, 15도 회전시키는 트랜스폼을 적용했어. transition을 함께 사용해서 부드러운 전환 효과를 준 거지.
13.2 애니메이션과 @keyframes 심화
애니메이션을 할 때 여러 단계로 움직임을 만들 수 있는 **@keyframes**는 복잡한 애니메이션을 쉽게 만들어줘.
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
.box {
animation: bounce 1s infinite;
}
이 애니메이션은 .box 요소가 위아래로 튀어오르는 움직임을 반복하게 해. 0%, 50%, 100%로 움직임을 정의해서 자연스러운 애니메이션을 만들 수 있어.
14. CSS의 향후 방향과 최신 기술
14.1 CSS Grid와 Flexbox 비교
• Flexbox는 주로 **1차원 레이아웃(가로 또는 세로 한 줄 정렬)**을 다룰 때 유용해. 요소들을 하나의 축을 따라 배치하고 정렬하는 데 강점을 가지지.
• CSS Grid는 **2차원 레이아웃(가로와 세로를 모두 정렬)**을 다룰 때 사용해. 복잡한 웹 페이지 레이아웃을 간단한 코드로 작성할 수 있어.
두 레이아웃 시스템은 각각 장점이 있어서 상황에 맞게 사용할 수 있어. Flexbox는 간단한 정렬에 좋고, Grid는 전체 페이지 레이아웃을 잡을 때 매우 강력해.
14.2 CSS Houdini
CSS Houdini는 브라우저가 CSS를 처리하는 방식에 대한 저수준 API를 제공해, 개발자가 CSS와 브라우저 렌더링 엔진 사이를 좀 더 직접적으로 제어할 수 있게 해주는 기술이야. 이걸 사용하면 CSS에서 새로운 속성을 만들거나, 특정 애니메이션을 더 세밀하게 조정하는 등의 작업이 가능해.
