1) CSS 내부스타일시트 적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tittle>내부스타일시트</tittle>
<style type="text/css">
h2{color:blue} /*h2 태그에는 파란색글씨*/
p{font-size:12pt} /*p 태그에는 12pt글씨*/
span{font-weight:bolder;background-color:#f2f5a9} /*굵은 글씨,배경식*/
strong{color:red;text-decoration:underline}/*빨간글씨,밑줄*/
small{font-style:italic;color:gray}/*기울임,회색*/
</style>
</head>
<body>
<h2>나의 취미 소개</h2>
<p>나의 취미는 <span><디제잉><span>입니다.</p>
<br>
<p>좋아하는 장르는 <strong>R&B</strong>를 좋아합니다.</p>
<p><small>좋아하는 사람들이랑 함께 음악을 틀면서 파티를 하는 것을 좋아합니다.</small></p>
</body>
</html>
- <span> 태그는 줄단위 태그이다.
2) CSS 외부스타일시트 적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tittle>외부스타일시트</tittle>
<link rel="stylesheet" type="text/css" href="index.css"
</head>
<body>
<p>HTML 5 웹 프로그래밍 입문</p>
<p><strong>CSS</strong>란 문서의 <span>style<span>을 정의하는 속성을 모아놓은 <strong>언어</strong>이다.</p>
</body>
</html>
span{color:red;font-family:휴먼매직체;font-size:20pt;text-decoration:underline}
strong{color:blue;font-family:휴면옛체;font-size:20pt}- 외부 스타일시트는 <link>를 사용해서 css파일을 가져와 적용하는 형식이다.
3) CSS 인라인 스타일시트 적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tittle>인라인스타일시트</tittle>
</head>
<body>
<h3 style="text-align:center">CSS3 색상표</h3>
<hr>
<div style="color:white; background-color:brown">brown </div>
<div style="color:white; background-color:fuchsia" >fuchsia </div>
<div style="color:white; background-color:darkorange" >darkorange </div>
<div style="color:white; background-color:darkcyan" >darkcyan </div>
<div style="color:white; background-color:olivedrab" >olivedrab </div>
<div style="color:white; background-color:deepskyblue" >deepskyblue </div>
</body>
</html>
- <div> 태그는 단락단위 태그다.
3-1) span 태그와 div태그의 차이
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tittle>인라인스타일시트</tittle>
</head>
<body>
<h3 style="text-align:center">CSS3 색상표</h3>
<hr>
<h2> div태그 사용 </h2>
<div style="color:white; background-color:brown">brown </div>
<div style="color:white; background-color:fuchsia" >fuchsia </div>
<div style="color:white; background-color:darkorange" >darkorange </div>
<div style="color:white; background-color:darkcyan" >darkcyan </div>
<div style="color:white; background-color:olivedrab" >olivedrab </div>
<div style="color:white; background-color:deepskyblue" >deepskyblue </div>
<br>
<h2> span태그 사용 </h2>
<span style="color:white; background-color:brown">brown </span><br>
<span style="color:white; background-color:fuchsia" >fuchsia </span><br>
<span style="color:white; background-color:darkorange" >darkorange </span><br>
<span style="color:white; background-color:darkcyan" >darkcyan </span><br>
<span style="color:white; background-color:olivedrab" >olivedrab </span><br>
<span style="color:white; background-color:deepskyblue" >deepskyblue </span>
</body>
</html>
- div 태그는 단락단위 태그이다
- span태그는 줄단위로 영역이 설정된다.
'Front-end > Web' 카테고리의 다른 글
| JavaScript 기초 (사칙연산,switch,for,while,if-else) (0) | 2020.09.05 |
|---|---|
| 다양한 입력폼 <form> (0) | 2020.09.05 |
| 고급표현을 위한 CSS 활용 (0) | 2020.09.05 |
| 링크와 멀티미디어 (0) | 2020.09.05 |
| HTML 문서의 기본 (0) | 2020.09.05 |
댓글