CSS란 무엇인가요?
CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 설정하는 데 사용되는 스타일 시트 언어입니다.
HTML 요소들이 브라우저나 다양한 디바이스에서 어떻게 보일지를 정의합니다.
과거 HTML은 콘텐츠와 디자인이 같은 파일에 포함되어 있었습니다. 그러나 HTML4부터는 디자인 요소를 HTML 문서에서 분리하여 효율적으로 관리할 수 있게 되었습니다. 현재 대부분의 웹 브라우저가 CSS를 완벽히 지원합니다.
CSS 적용 방법
CSS는 HTML에 적용하는 방법에 따라 3가지 방식으로 나뉩니다.
- 인라인 스타일(Inline Style)
- 내부 스타일 시트(Internal Style Sheet)
- 외부 스타일 시트(External Style Sheet)
인라인 스타일(Inline Style)
인라인 스타일은 HTML 요소의 style 속성을 사용하여 스타일을 정의하는 방식입니다.
이 방법은 특정 요소에만 스타일을 적용하며, 코드의 가독성이 떨어질 수 있다는 단점이 있습니다.
예제
<p style="color: green; text-decoration: underline;">
이 문장은 인라인 스타일로 꾸며졌습니다.
</p>
내부 스타일 시트 (Internal Style Sheet)
내부 스타일 시트는 HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 정의됩니다.
이 방법은 해당 HTML 파일에만 스타일을 적용할 때 유용합니다.
예제
<head>
<style>
body {
background-color: lightyellow;
}
p {
color: red;
text-decoration: underline;
}
</style>
</head>
외부 스타일 시트 (External Style Sheet)
외부 스타일 시트는 별도의 CSS 파일에 스타일을 정의하고, HTML 문서에서 <link> 태그를 통해 연결하는 방식입니다.
웹 사이트 전반에 걸쳐 일관된 스타일을 적용하고 유지보수가 편리합니다.
HTML 파일 예제
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS 파일 (styles.css) 예제
body {
background-color: lightyellow;
}
p {
color: red;
text-decoration: underline;
}
CSS 스타일 적용 우선순위
CSS 스타일은 적용 우선순위에 따라 최종적으로 화면에 반영됩니다.
우선순위는 아래와 같습니다.
- 인라인 스타일
- 내부 및 외부 스타일 시트 (뒤에 선언된 스타일이 우선 적용)
- 웹 브라우저 기본 스타일
예를 들어, 같은 요소에 인라인 스타일과 외부 스타일 시트를 동시에 사용하면 인라인 스타일이 적용됩니다.
CSS 선택자 (Selectors)
CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 방법을 제공합니다.
대표적인 선택자에는 다음이 포함됩니다.
- 요소 선택자 (Element Selector)
- 아이디 선택자 (ID Selector)
- 클래스 선택자 (Class Selector)
요소 선택자 (Element Selector)
HTML 요소의 이름을 직접 사용하여 스타일을 지정하는 기본적인 방법입니다.
예제
p {
color: red;
font-size: 14px;
}
아이디 선택자 (ID Selector)
아이디 선택자는 특정 요소에 스타일을 적용할 때 사용됩니다.
HTML 요소의 id 속성과 # 기호를 사용해 선택합니다.
예제
#unique-paragraph {
color: teal;
text-decoration: line-through;
}
<p id="unique-paragraph">이 문장은 아이디 선택자로 꾸며졌습니다.</p>
Tip: 동일한 id 값을 여러 요소에 사용하면 CSS는 동작하지만, 자바스크립트에서 오류가 발생할 수 있으므로 고유하게 사용하는 것이 좋습니다.
클래스 선택자 (Class Selector)
클래스 선택자는 여러 요소를 그룹화하여 같은 스타일을 적용할 때 사용됩니다.
class 속성과 . 기호를 활용합니다.
예제
.highlight {
color: lime;
text-decoration: overline;
}
<p class="highlight">이 문장은 클래스 선택자로 꾸며졌습니다.</p>
<p>이 문장은 스타일이 없습니다.</p>
<p class="highlight">이 문장도 같은 스타일을 공유합니다.</p>
CSS는 웹 페이지의 스타일을 설정하는 강력한 도구입니다.
인라인, 내부, 외부 스타일 시트 중 상황에 맞는 방법을 선택하고, CSS 선택자를 적절히 활용하면 효율적인 디자인 작업이 가능합니다.
'Web > html' 카테고리의 다른 글
| HTML 확장 - HTML과 XHTML (0) | 2025.01.31 |
|---|---|
| HTML 확장 - HTML과 자바스크립트 (1) | 2025.01.30 |
| HTML 입력 양식 - Input 요소의 속성 (0) | 2025.01.28 |
| HTML 입력 양식 - Form 요소 (1) | 2025.01.27 |
| HTML 공간 분할 - 레이아웃 (1) | 2025.01.26 |