IT
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) 완벽 가이드
CSS(Cascading Style Sheets)는 HTML 문서의 디자인과 레이아웃을 담당하는 스타일 언어입니다. 웹 페이지의 색상, 폰트, 크기, 위치 등을 제어하며, 반응형 웹 디자인을 가능하게 합니다.
이 글에서는 CSS의 개념, 기본 문법, 주요 속성, 최신 트렌드 등을 자세히 설명하겠습니다.
1. CSS란?
CSS는 웹 페이지의 스타일을 정의하는 언어로, HTML과 함께 사용됩니다.
CSS의 주요 기능
✔ 웹 페이지의 디자인(색상, 배경, 글꼴 등) 설정
✔ 웹 페이지의 레이아웃(위치, 크기, 정렬) 조정
✔ 다양한 디바이스(PC, 태블릿, 모바일)에서 반응형 디자인 적용
CSS의 주요 특징
• HTML과 분리 가능 → 유지보수 용이
• 한 번 작성하면 여러 요소에 적용 가능 → 코드 재사용성 증가
• 웹 브라우저가 직접 해석 → 빠른 렌더링
2. CSS의 적용 방법
CSS는 HTML 문서에 3가지 방법으로 적용할 수 있습니다.
① 인라인 스타일 (Inline Style)
HTML 요소 내부에 직접 스타일을 적용하는 방식입니다.
<p style="color: red; font-size: 16px;">이것은 빨간색 문장입니다.</p>
특징: 개별 요소에만 적용되므로 유지보수가 어렵습니다.
② 내부 스타일 (Internal Style)
HTML 문서의 <head> 내부에서 <style> 태그를 사용하여 스타일을 적용합니다.
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
특징: 한 페이지 내에서만 적용되므로 여러 페이지에 적용하려면 비효율적입니다.
③ 외부 스타일 (External Style, 추천 방식)
CSS를 별도의 파일(style.css)로 만들어 HTML 문서에서 링크하여 사용합니다.
style.css (외부 CSS 파일)
p {
color: green;
font-size: 20px;
}
HTML 파일에서 연결
<head>
<link rel="stylesheet" href="style.css">
</head>
특징: 여러 HTML 문서에서 동일한 CSS 파일을 사용할 수 있어 유지보수가 용이합니다.
3. CSS의 기본 문법
① CSS 선택자 (Selectors)
CSS에서 특정 HTML 요소를 선택하여 스타일을 적용할 때 사용합니다.
선택자
설명
예제
*
전체 선택자
* { margin: 0; }
태그명
특정 태그 선택
p { color: red; }
.클래스명
특정 클래스 선택
.title { font-size: 24px; }
#아이디명
특정 아이디 선택
#header { background: gray; }
,
여러 요소 동시 선택
h1, h2 { color: blue; }
>
자식 요소 선택
div > p { color: green; }
:hover
마우스 오버 시
a:hover { color: red; }
② CSS 속성 (Properties)
CSS에는 다양한 속성이 있으며, 대표적인 몇 가지를 정리하면 다음과 같습니다.
텍스트 관련 속성
p {
color: blue; /* 글자 색상 */
font-size: 16px; /* 글자 크기 */
font-weight: bold; /* 글자 두께 */
text-align: center; /* 글자 정렬 */
text-decoration: underline; /* 밑줄 */
}
배경 관련 속성
body {
background-color: lightgray; /* 배경색 */
background-image: url("image.jpg"); /* 배경 이미지 */
background-size: cover; /* 배경 이미지 크기 조정 */
}
박스 모델 (Box Model)
모든 HTML 요소는 기본적으로 박스 모델을 따릅니다.
div {
width: 200px; /* 너비 */
height: 100px; /* 높이 */
padding: 20px; /* 안쪽 여백 */
margin: 10px; /* 바깥 여백 */
border: 2px solid black; /* 테두리 */
}
레이아웃 관련 속성
.container {
display: flex; /* Flexbox 레이아웃 */
justify-content: center; /* 가운데 정렬 */
align-items: center; /* 수직 정렬 */
}
4. 반응형 웹 디자인 (Responsive Web Design)
CSS는 다양한 기기에서 최적화된 화면을 제공하기 위해 반응형 디자인을 지원합니다.
① 미디어 쿼리 (Media Query)
화면 크기에 따라 다른 스타일을 적용하는 기능입니다.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
위 코드에서는 화면 너비가 768px 이하일 때 배경색을 lightblue로 변경합니다.
5. CSS 최신 트렌드 (CSS3 기능)
① 그림자 효과 (Box Shadow, Text Shadow)
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
h1 {
text-shadow: 2px 2px 5px gray;
}
② 투명도 및 색상 효과 (Opacity, RGBA)
div {
background-color: rgba(255, 0, 0, 0.5); /* 반투명한 빨간색 */
}
③ 애니메이션 (Animation)
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
animation: fadeIn 2s ease-in-out;
}
6. CSS 프레임워크 소개
CSS를 직접 작성하는 대신, 미리 정의된 스타일을 활용할 수 있는 CSS 프레임워크가 있습니다.
프레임워크
특징
Bootstrap
반응형 디자인, 다양한 컴포넌트 제공
Tailwind CSS
유틸리티 기반, 커스터마이징 용이
Bulma
쉽고 직관적인 문법, 미니멀한 디자인
Foundation
강력한 반응형 웹 기능
예제: Bootstrap을 이용한 버튼
<button class="btn btn-primary">클릭</button>
7. 결론
CSS는 웹 페이지의 디자인과 레이아웃을 담당하는 핵심 기술입니다.
✅ 기본 문법과 선택자를 익히고
✅ 반응형 웹 디자인을 적용하며
✅ 최신 CSS3 기능을 활용하면
완성도 높은 웹사이트를 만들 수 있습니다.
웹 개발을 배우는 과정에서 HTML과 함께 CSS를 익히는 것이 필수적이므로, 다양한 실습을 통해 경험을 쌓아보세요.
댓글
아직 댓글이 없습니다.
로그인 후 댓글을 남길 수 있습니다.