728x90
★ 속성 선택자
- 1. 선택자[속성명] : 해당 속성을 명시했는지?
.list a[target] { background-color: gold;}- 2. 선택자[속성명=값] : 해당 속성과 값을 명시했는지?
.list a[target=_blank] { background-color: gold;}- 3. 선택자[속성명^=값] : 속성값이 값으로 시작하는지? java -> startsWith()
.list a[href^=https] { background-color: gold;}- 4. 선택자[속성명$=값] : 속성값이 값으로 끝나는지? java -> endsWith()
.list a[href$='com'] { background-color: gold;}- 5. 선택자[속성명*=값] : 속성값이 포함되는지? java -> contains()
.list a[href*=m] { background-color: gold;}
■ HTML 코드
<body>
<div class="list">
<a href="http://naver.com" target="_self">네이버</a>
<a href="http://yes24.com" target="_blank">예스24</a>
<a href="https://daum.net">다음</a>
<a href="https://11st.co.kr">11번가</a>
<a href="https://kma.go.kr" target="_blank">기상청</a>
</div>
</body>
■ 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 21 - Selector 5 (0) | 2023.04.18 |
|---|---|
| CSS STEP 20 - Selector 4 (0) | 2023.04.18 |
| CSS STEP 18 - Selector 2 (0) | 2023.04.18 |
| CSS STEP 17 - BOX2 (0) | 2023.04.18 |
| CSS STEP 16 - 네이버 뉴스 Form 만들기 (0) | 2023.04.17 |
728x90
★ 속성 선택자
- 1. 선택자[속성명] : 해당 속성을 명시했는지?
.list a[target] { background-color: gold;}- 2. 선택자[속성명=값] : 해당 속성과 값을 명시했는지?
.list a[target=_blank] { background-color: gold;}- 3. 선택자[속성명^=값] : 속성값이 값으로 시작하는지? java -> startsWith()
.list a[href^=https] { background-color: gold;}- 4. 선택자[속성명$=값] : 속성값이 값으로 끝나는지? java -> endsWith()
.list a[href$='com'] { background-color: gold;}- 5. 선택자[속성명*=값] : 속성값이 포함되는지? java -> contains()
.list a[href*=m] { background-color: gold;}
■ HTML 코드
<body>
<div class="list">
<a href="http://naver.com" target="_self">네이버</a>
<a href="http://yes24.com" target="_blank">예스24</a>
<a href="https://daum.net">다음</a>
<a href="https://11st.co.kr">11번가</a>
<a href="https://kma.go.kr" target="_blank">기상청</a>
</div>
</body>
■ 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 21 - Selector 5 (0) | 2023.04.18 |
|---|---|
| CSS STEP 20 - Selector 4 (0) | 2023.04.18 |
| CSS STEP 18 - Selector 2 (0) | 2023.04.18 |
| CSS STEP 17 - BOX2 (0) | 2023.04.18 |
| CSS STEP 16 - 네이버 뉴스 Form 만들기 (0) | 2023.04.17 |
