![[HTML & CSS] CSS3를 HTML5에 적용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbDcJai%2FbtrMlUMCYBx%2FLKr6IWXAnHGJX2IaDOM2Mk%2Fimg.png)
728x90
이전글 CSS 선택자의 연장입니다.
CSS3에서 HTML5에 적용하는 방법은 크게 3가지가 있습니다.
- 인라인(lnline) 스타일 시트 : HTML문서 내의 각 Tag요소에 직접 스타일 시트를 정의합니다.
- 내부(internal) 스타일 시트 : HTML문서의 <head>부분에 스타일 시트를 정의합니다.
- 외부(external) 스타일 시트 : 스타일 시트를 별도의 파일로 만들어(.css) 다른 HTML문서에서도 같은 스타일 시트를 사용할 수 있게 하는 방법입니다.
1. 인라인 스타일 시트
각 tag내에 style 속성으로 고유한 스타일을 적용합니다. 그래서 적용범위는 그 태그 하나로 유일합니다.
기본적인 형식은 다음과 같습니다.
<h1 styple="적용하고 싶은 속성1: 속성값; 적용하고 싶은 속성2: 속성값;">콘텐츠</h1>
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<h1 style="font-family:굴림; font-style: italic;" >CSS</h1>
<p style="font-size:20pt; text-align:center;">스타일 시트 연습</p>
</body>
</html><h1>태그안에 style속성으로 css를 적용해주었는데 큰 따옴표("")안에 속성:속성값의 형태로 적고 서로 구분은 세미콜론(;)으로 해야합니다.
결과)
2. 내부 스타일 시트
<head>태그 안에 <style>태그를 만들어서 그 안에 고유한 스타일을 적용합니다. 적용범위는 HTML문서 전체입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
h1 {
font-family: 굴림;
font-style: italic;
}
p {
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>스타일 시트 연습</p>
</body>
</html><h1>태그 전체에 폰트는 굴림으로 스타일은 이텔릭으로 적용하고, <p>태그 전체에 폰트사이즈는 20포인트 텍스트는 가운데 정렬을 해주는 코드입니다.
결과)
3. 외부 스타일 시트
스타일 시트를 별도의 파일(.css)로 만들어서 지정합니다. 적용범위는 HTML파일 전체입니다.
<head>태그 안에 <link>태그를 이용하여 선언합니다.
기본적인 형식은 다음과 같습니다.
<link rel="stylesheet" type="text/css" href="css 파일명">rel속성은 relationship의 약자로 현재문서와 링크된 문서 사이의 연관관계를 명시합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>외부 스타일 시트</title>
<link rel="stylesheet" type="text/css" href="파일명.css">
</head>
<body>
<h1>CSS</h1>
<p>스타일 시트 연습</p>
</body>
</html>
4. 스타일시트의 우선순위
스타일시트에도 우선순위가 존재합니다.
인라인 스타일 > 내부스타일 > 외부스타일 순서로 우선순위가 결정됩니다.
*예를 들어 인라인과 외부스타일이 겹치게 되면 인라인 스타일이 먼저 적용됩니다.
728x90
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] CSS 배경(background) 다루기 (0) | 2022.09.18 |
|---|---|
| [HTML & CSS] CSS 색상(color) 다루기 (0) | 2022.09.18 |
| [HTML & CSS] CSS 선택자(selecter) (0) | 2022.09.17 |
| [HTML & CSS] HTML video & audio (2) | 2022.09.17 |
| [HTML & CSS] HTML5에 새롭게 추가된 input 속성 (0) | 2022.09.17 |