와일드카드 *를 사용한 전체에 대한 스타일지정
#을 이용한 id속성에 대한 스타일지정
.클래스를 이용한 class속성에 대한 스타일 지정
+ div로 요소들을 묶는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style type="text/css">
*{
margin: 3px;
}
h1{
background: lightgreen;
}
#wrap{
background: #BDBDBD;
}
.blue {
color: blue;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1>제목</h1>
<div id="wrap">
<h2>소제목</h2>
<p>다음과 같은 <span class="blue">상품</span>들이 존재합니다.</p>
<ul>
<li>
<h3>결명자차</h3>
<p class="red">3000원</p>
</li>
<li>
<h3>아메리카노</h3>
<p class="red">2500원</p>
</li>
<li>
<h3>프라푸치노</h3>
<p class="red">5500원</p>
</li>
</ul>
</div>
</body>
</html>
결과창
'개발자노트 > 웹' 카테고리의 다른 글
| Html - 긴 문장 스크롤 처리 하기 ( overflow-x, y ) (회원가입 약관동의) (0) | 2022.07.22 |
|---|---|
| Html 실습예제 메뉴 만들기 ( display, list-style-type, text-decoration ) (0) | 2022.07.22 |
| Html에서 가상요소 선택자 (before / after) (스타일시트) (0) | 2022.07.22 |
| Html에서 가상 클래스 선택자 (호버링) (0) | 2022.07.22 |
| Html에서 선택자 ( 자식선택자 ) (0) | 2022.07.22 |
