HTML CSS
html/css) css선택자 - 속성선택자
조충희
2025. 5. 29. 14:00
css 선택자란 (5.28)
https://notion6780.tistory.com/92
html/css) css 선택자 selector
⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히
notion6780.tistory.com
앞서 css선택자의 개념을 짚었다.
여기에 속성선택자의 사용법을 적어본다.
⭐속성선택자
html 요소의 속성이나 속성값을 보고 대상을 구분한다.
태그 이름이나 클래스, id 대신 요소의 속성을 본다.
문법
대괄호([])를 사용
속성 이름만 쓰거나 속성값과 매칭시켜 선택
예제)
다음 html 구문의 스타일을 정의
<body>
<input type="text" placeholder="텍스트 입력" />
<input type="submit" value="제출" />
<p class="content highlight main">강조된 문단입니다</p>
<div data-type="card">카드 형태의 컨텐츠입니다</div>
<span data-role="viewer editor">편집자 역할은 뭘까</span>
</body>
css 구문
/* input 태그 가운데 type="text" 인 요소 */
input[type="text"] {
width: 300px;
padding: 5px 10px;
cursor: pointer;
border: none;
}
/* p 태그 가운데 class명에"highlight"가 포함되는 요소 */
p[class~="highlight"] {
background-color: orangered;
color: black;
font-weight: bold;
margin: 10px;
padding: 5px 10px;
}
/* 사용자정의 속성 data-type 이 포함되는 요소 */
[data-type] {
border: 2px dashed greenyellow;
margin: 10px;
padding: 5px 10px;
}
/* 사용자정의 속성 data-role, 값 editor 이 포함되는 요소 */
[data-role~="editor"] {
border: 2px dashed orangered;
color: orangered;
font-weight: bold;
margin: 10px;
padding: 5px 10px;
}
