가장먼저 id선택자에 대해서 알아보도록 하겠습니다. ID 선택자는 특정한 하나의 코드에만 효과를 줄 수 있습니다. 다음과 같이 코드를 따라 써봅시다.
<HTML 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="자신의 파일 이름을 넣어주세요.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="abc"> CSS </h1>
<h1 id="def"> 좋아요와 공동공부 한번씩 부탁드립니다 </h1>
</body>
</html>
<CSS 코드>
#abc{
color:red;
}
h1{
font-size:50px;
}
#def{
color:blue;
}
html 파일에는 html코드만, CSS 코드에는 CSS 코드만 넣어주시길 바랍니다. Visual Studio Code 에디터를 추천합니다. 에디터에 이 코드를 넣었으면 한번 실행시켜 보세요. 파일에 있는 글씨들 중 CSS라는 글씨는 빨간색, 좋아요와 공동공부 한번씩 부탁드립니다 부분은 파란색인 것을 확인할 수 있습니다. HTML 코드에있는 <h1 id="abc"> 부분은 abc라는 이름과 같은 선택자가 있고, CSS코드에는 #abc라고 표현되어있어 abc에게만 color:red;라는 효과를 주는 것입니다. 그리고 h1이라는 부분은 잘 티가 안나지만 h1태그라고 써져있는 모든 녀석에게만 효과를 주는 것입니다.
이번에는 선택자 중에서도 id 선택자를 저와 같이 알아봤는데요. 다음시간에는 더 재밌고 유익한 CSS 강의가 되도록 노력하겠습니다. 감사합니다!
