반응형
css id 셀렉터에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 id 셀렉터에 대하여 알아보도록 하겠습니다.
id 속성은 class 속성 만큼이나 자주 쓰이는 속성입니다.
그리고 html에서 기능적인 부분을 구현할 때 자주 쓰이는 속성이기 때문에 매우 중요합니다.
이번 시간에는 이 id를 이용하여 css를 적용시키는 방법에 대하여 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. id 셀렉터
id 셀렉터는 class 속성과 같은 기능을 하기는 하지만, 앞에 붙이는 것이 다릅니다.
셀렉터를 작성할 때 '#'을 붙여서 작성을 합니다.
id 셀렉터는 class 셀렉터를 쓰는 것과 같이 '#' 뒤에 본인이 명명하고자 하는 id명을 적고 쓰시면 됩니다.
이에 대한 간단한 코드도 준비를 해봤습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>셀렉터 만들기</title>
<style>
#list { /* id 셀렉터 */
background : mistyrose;
}
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul id="list">
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div>60점 이하는 F!</div>
</div>
</body>
</html>
반응형
이렇게 한 번 작성을 해봤습니다.
그러면 이건 어떤 화면이 나올지 한 번 보시죠.
이렇게 list라는 id가 적용이 된 태그 내에 있는 내용들이 전부 다 css의 영향을 받은 것이 보입니다.
여기까지 id 셀렉터에 대하여 알아보았습니다.
다음 포스팅에서는 전체 셀렉터에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css 속성 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
|---|---|
| css 전체 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 클래스 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 태그 이름 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 규칙에 대하여 알아보기 (0) | 2023.03.13 |
댓글