반응형
스타일시트 기초와 활용 방법
스타일시트란 무엇인가?
스타일시트는 웹 페이지의 디자인과 레이아웃을 정의하는 언어입니다. 대표적으로 CSS(Cascading Style Sheets)가 있으며, HTML과 함께 웹 페이지를 꾸미는 데 사용됩니다.
스타일시트의 필요성
- 재사용성: 한 번 정의한 스타일을 여러 페이지에서 재사용할 수 있습니다.
- 유지 보수: 스타일시트를 수정하면 연결된 모든 페이지의 디자인이 변경됩니다.
- 구조와 스타일 분리: HTML은 내용과 구조를, CSS는 디자인과 레이아웃을 담당합니다.
기본 문법
CSS의 기본 문법은 아래와 같습니다.
선택자 {
속성: 값;
}- 선택자: 스타일을 적용할 HTML 요소를 선택합니다.
- 속성: 변경하고 싶은 스타일의 종류입니다.
- 값: 해당 속성에 적용할 값입니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>이 문장은 빨간색과 16px 크기로 표시됩니다.</p>
</body>
</html>선택자의 종류
- 요소 선택자: HTML 요소 이름을 사용합니다. 예:
p,div - 클래스 선택자:
.클래스명으로 표기합니다. 예:.button - ID 선택자:
#아이디명으로 표기합니다. 예:#header
주요 스타일 속성
- 색상:
color(글자 색),background-color(배경색) - 크기:
width,height - 텍스트:
font-size,font-family,text-align - 레이아웃:
margin,padding,border
CSS 활용 예
클래스와 ID
.button {
background-color: blue;
color: white;
}
#header {
font-size: 24px;
}여러 선택자 동시 적용
h1, h2, p {
color: green;
}스타일시트 파일로 분리하기
CSS 코드를 별도의 파일(.css)로 만들어서 HTML 파일에서 불러올 수 있습니다.
<link rel="stylesheet" type="text/css" href="styles.css">결론
스타일시트는 웹 페이지의 디자인을 담당하는 중요한 요소입니다. 기본 문법과 주요 속성을 이해하면 다양한 스타일과 레이아웃을 적용할 수 있습니다.
반응형
'온라인 멘토와 함께하는 공부 > HTML' 카테고리의 다른 글
| HTML 편집기에 대해서 (55) | 2023.11.22 |
|---|---|
| [스타일시트] 전자책 편집을 위한 스타일시트 (62) | 2023.10.21 |
| [코딩] 자바는 compilejava (0) | 2023.08.29 |
| [코딩] Windows 폰트 확인 방법 (0) | 2023.08.28 |
| [코딩] HTML과 CSS, 자바스크립는 Jsfiddle 웹사이트 (0) | 2023.08.27 |
