고정 헤더 영역
상세 컨텐츠
본문
반응형
웹페이지에서 스타일은 왜 사용할까?
- 웹 문서에서 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정한다.
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
스타일 형식
p { text-align: center; }- p : 선택자
- text-align: 스타일 속성
- center : 속성 값
- <p> 태그에 적용될 스타일은 중괄호({, })의 스타일을 적용하겠다는 의미다.
스타일을 표기하는 방법
- 스타일 규칙은 세미콜론(;)으로 구분해 중괄호({, }) 안에 나열하면 상관없지만 앞에서 본 것처럼 한 줄로 길게 쓰면 속성이 여러 개일 경우, 구별하기 쉽지 않다. 그래서 공백을 최소화시켜 파일 크기를 작게 만들 거라면 한 줄로 표기하지만, 개발자가 읽기 쉽고 유지·보수가 쉬우려면 여러 줄에 걸쳐 작성하는 게 좋다.
스타일 주석
- 스타일 주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데, 여러 줄을 입력할 수도 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 적용</title>
<style>
/*
h2 제목과
텍스트 단락의 스타일을 조절해보자.
*/
h2 {
font-size:20px; /* 글자 크기 */
color: orange; /* 글자 색 */
}
p {
color: blue; /* 글자 색 */
}
</style>
</head>
<body>
<h2>
안녕하세요. 여러분.
</h2>
<p>
안녕하세요. 여러분
</p>
</body>
</html>
스타일과 스타일 시트
- 스타일 규칙들을 한 눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데에 묶어 놓은 것을 '스타일 시트'라고 한다.
- 스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 연결해 사용하는 '외부 스타일 시트'로 나뉜다.
- '내부 스타일 시트'는 <head>와 </head> 태그 사이에 <style>와 </style> 태그 사이에 선언해서 사용을 한다.
- '외부 스타일 시트'는 css 확장자 파일로 작성된 파일을 불러와 적용한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 적용</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>
안녕하세요. 여러분.
</h2>
<p>
안녕하세요. 여러분
</p>
</body>
</html>- 위의 코드에서 style태그에 적용한 걸 style.css 파일로 따로 만들어서 적용했다.
- 이렇게 적용한 걸 외부 스타일 시트라고 한다.
- 외부 스타일 시트를 적용하는 이유는 웹 사이트를 작성할 경우 여러 페이지에서 동일한 스타일을 사용하기 때문에 외부 스타일 시트를 적용한다.
인라인 스타일
- head 태그 사이에 적용하는 '내부 스타일 시트'나 파일에 적용해서 불러온 '외부 스타일 시트' 적용하는 방법 말고도 태그 내부에 스타일을 적용할 수 있다.
<p style="color: green; font-size: 12px;">안녕하세요. 여러분</p>
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 글꼴 관련 스타일 (1) (0) | 2021.04.15 |
|---|---|
| [CSS 기초] 주요 선택자 (0) | 2021.04.13 |
| [HTML 기초] 기타 다양한 폼 요소들 (0) | 2021.04.08 |
| [HTML 기초] 여러 데이터 나열을 보여 주기 (0) | 2021.04.07 |
| [HTML 기초] <input> 태그의 다양한 속성 (0) | 2021.04.06 |
댓글 영역