728x90
반응형
<!-- src/main/webapp/6/selector.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
font-size: 15px;
line-height: 180%
}
/* id=fly 속성을 가진 태그 선택. Id명 앞에 '#'붙임 */
#fly {
color : red;
font-weight: bold;
}
/* class=blue 속성을 가진 태그 선택. 클래스명 앞에'.'붙임*/
.blue {
color : blue;
}
</style>
</head>
<body>
<h3>잠자리란?</h3>
<p><span id='fly'>잠자리</span>는 잠자리목에 속하는 곤충으로
전 세계적으로 분포하는 포식성 곤충이며 여러 가지 해충을 잡아먹는 유익한 곤충입니다.</p>
<p>앞머리에 커다란 <span class='blue'>한 쌍의 겹눈</span>을 가지고 있습니다.
또한 <span class='blue'>날카로운 턱</span>을 가지고 있으며 이빨이 튼튼합니다.
파리, 모기, 나비 등의 살아있는 곤충을 잡아먹고 삽니다.</p>
</body>
</html>728x90
반응형
'study > Html' 카테고리의 다른 글
| [Html] 7. htmlcss (가로세로 : <div>, <span>) (0) | 2022.04.04 |
|---|---|
| [Html] 7. htmlcss (박스모델 : <border>) (0) | 2022.04.04 |
| [Html] 5. CSS (목록 스타일 지정하기 : <list-style-type>) (0) | 2022.04.04 |
| [Html] 5. CSS (글자스타일 지정하기 : <color>, <text-shadow>, <font-size>, <font-family>, <line-height>, <font-weight>, <text-decoration>) (0) | 2022.04.04 |
| [Html] 5. CSS (글자색 지정하기 : <color>) (0) | 2022.04.04 |