CSS란 무엇인가요?
CSS는 HTML로 작성된 웹페이지의 레이아웃과 디자인을 관리하는 스타일시트 언어입니다. HTML이 콘텐츠의 구조를 정의한다면, CSS는 콘텐츠의 외형을 정의합니다. 예를 들어:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 예제</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>안녕하세요, CSS!</h1>
<p>이 문장은 CSS로 스타일링되었습니다.</p>
</body>
</html>
위 코드에서 CSS는 텍스트의 글꼴, 배경색 등을 설정합니다.
CSS 스타일 적용 방법
CSS는 세 가지 방식으로 HTML에 적용할 수 있습니다:
1. 인라인 스타일 HTML 태그에 직접 style 속성을 사용해 스타일을 지정합니다:
<p style="color: blue; font-size: 16px;">이 텍스트는 인라인 스타일입니다.</p>
2. 내부 스타일 <style> 태그를 사용해 HTML 문서 내에서 CSS를 작성합니다:
<style> h1 { color: green; } </style>
3. 외부 스타일 별도의 CSS 파일을 만들어 HTML 문서에 링크합니다. 이는 유지보수가 용이하고 권장되는 방식입니다:
<link rel="stylesheet" href="styles.css">
styles.css 파일:
body { margin: 0; padding: 0; background-color: #fff; }
CSS의 주요 기능과 활용
1. 텍스트 스타일링 텍스트의 색상, 크기, 정렬 등을 쉽게 변경할 수 있습니다:
p {
color: #333;
font-size: 18px;
text-align: justify;
}
2. 레이아웃 디자인 CSS는 그리드와 플렉스박스를 활용해 복잡한 레이아웃을 간단히 구성할 수 있습니다:
.container {
display: flex;
justify-content: center;
align-items: center;
}
3. 반응형 디자인 다양한 디바이스에 적합한 디자인을 구현하기 위해 미디어 쿼리를 사용합니다:
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
4. 애니메이션과 트랜지션 CSS로 웹페이지에 생동감을 추가할 수 있습니다:
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff5733;
}
CSS 활용 팁
1. 클래스와 아이디의 효율적 사용 클래스는 여러 요소에 적용할 때, 아이디는 특정 요소에 사용할 때 적합합니다.
2. CSS 변수 활용 자주 사용하는 색상이나 크기를 변수로 정의하면 유지보수가 용이합니다:
:root {
--main-color: #007BFF;
}
h1 {
color: var(--main-color);
}
3. CSS 프레임워크 활용 Bootstrap, Tailwind CSS 등 프레임워크를 사용하면 개발 시간을 절약하고 일관된 디자인을 유지할 수 있습니다.
결론
CSS는 웹사이트의 외형과 사용자 경험을 크게 좌우하는 중요한 도구입니다. CSS의 다양한 기능과 스타일 적용 방식을 잘 활용하면, 더욱 전문적이고 매력적인 웹페이지를 만들 수 있습니다. 이번 가이드를 통해 CSS의 기본을 익히고, 실무에 바로 적용해 보세요.