여우비오냐의 IT 기술
CSS 문법과 스타일 적용하기 본문
4.1 CSS 문법 살펴보기
4.1.1 문법 형식
CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언은 적용할 스타일 속성(property)과 그 값을 정의합니다.
구조:
선택자 {
속성: 값;
}예시:
p {
color: blue;
font-size: 16px;
}4.1.2 주석
주석은 코드에 메모를 추가할 때 사용하며, 브라우저는 주석을 무시합니다. 주석은 /*로 시작하고 */로 끝납니다.
예시:
/* 이 스타일은 모든 단락에 적용됩니다 */
p {
color: blue;
}4.2 CSS 적용하기
4.2.1 내부 스타일 시트 사용하기
내부 스타일 시트는 HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 정의됩니다. 이 방법은 특정 HTML 문서에만 스타일을 적용할 때 유용합니다.
예시:
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>4.2.2 외부 스타일 시트 사용하기
외부 스타일 시트는 별도의 CSS 파일로 작성하고, HTML 문서에서 <link> 태그를 사용하여 참조합니다. 이 방법은 여러 HTML 문서에서 동일한 스타일을 적용할 때 사용됩니다.
예시:
<head>
<link rel="stylesheet" href="styles.css">
</head>/* styles.css 파일 */
body {
background-color: lightblue;
}4.2.3 인라인 스타일 사용하기
인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 스타일을 지정하는 방법입니다. 이 방법은 특정 요소에만 스타일을 적용할 때 유용하지만, 유지보수가 어렵습니다.
예시:
<p style="color: blue; font-size: 16px;">이것은 파란색 텍스트입니다.</p>'Html, CSS' 카테고리의 다른 글
| CSS로 레이아웃 설계하기 (0) | 2024.09.04 |
|---|---|
| CSS 필수 속성 익히기 (0) | 2024.09.04 |
| CSS 선택자 사용하기 (0) | 2024.09.04 |
| HTML에서 자주 사용되는 태그와 그 사용법 (1) | 2024.09.04 |