[Daily Post] 221120
[Daily Post]는 매일매일 탐구한 내용을 간략하게 기록하는 포스트입니다.
따라서 정리되지 않은 내용과 추측을 포함하고 있을 수 있습니다.
더 체계적인 형식을 갖춘 글은 해당 카테고리의 포스트를 확인해주세요 :)
Daily Study
CSS
다음과 같은 HTML 페이지가 있고, 그 코드는 이어지는 코드와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body align="center">
<div>keyword is here </div>
<div>keyword is not here </div>
<div>keyword is here </div>
<div>keyword is not here </div>
<div>keyword is here </div>
<div>keyword is not here </div>
<div>keyword is here </div>
<div>keyword is not here </div>
<div>keyword is here </div>
<div>keyword is not here </div>
<div>keyword is here </div>
<div>keyword is not here </div>
<div>keyword is here </div>
</body>
</html>
여기서 특정 태그의 스타일만 변경하려고 class 속성을 넣고 값을 따로 지정했는데, 여기서 지정한 class 이름을 <head>-<style>에서 참조할 때는 이름 그대로 쓸 것이 아니라 앞에 점을 붙여줘야한다. 옳게 적힌 코드와 그 실행 결과는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.keyword {
background-color: blue;
font-weight: bold;
}
</style>
</head>
<body align="center">
<div class="keyword">keyword is here </div>
<div>keyword is not here </div>
<div class="keyword">keyword is here </div>
<div>keyword is not here </div>
<div class="keyword">keyword is here </div>
<div>keyword is not here </div>
<div class="keyword">keyword is here </div>
<div>keyword is not here </div>
<div class="keyword">keyword is here </div>
<div>keyword is not here </div>
<div class="keyword">keyword is here </div>
<div>keyword is not here </div>
<div class="keyword">keyword is here </div>
</body>
</html>
style 태그에서 class를 다루려면 점을 꼭 붙여주자!