div [data-role| = row] : 속성값에 특정단어
div [data-role ~ = row] : 속성값에 특정 단어포함
div [data-role*= row]: 속성값에 특정 단어포함
div [data-role^ = row] : 속성값에 특정단어로 시작
div [data-role$ = 9]: 속성값에 특정단어로 끝
<STYLE>
p[data-role = stand] {background:skyblue}
p[data-role ~= out] {background:pink}
p[data-role *= standout] {background:gray}
p[data-role ^= out] {background:orange}
p[data-role $= tt] {background:greenyellow}
</STYLE>
<P data-role="stand">STANDOUT</P>
<P data-role="stand out">STANDOUT</P>
<P data-role="standout">STANDOUT</P>
<P data-role="outstand">STANDOUT</P>
<P data-role="outt">STANDOUT</P>
<H3>STANDOUT</H3>
https://standout.tistory.com/73
코드를 줄여주는 정규표현식
정규표현식 regular expression, 간단히 regexp 또는 regex, rational expression) 또는 정규식이라 불림. 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어 텍스트패턴을 기술하기 위한, 패
standout.tistory.com
'HTML·CSS' 카테고리의 다른 글
| textarea, 가로세로 글자 갯수설정 (0) | 2023.03.30 |
|---|---|
| select, 다중선택과 그룹화 (0) | 2023.03.30 |
| CSS 선택자, 번갈아 선택하기 nth-last-child(2n+1) , nth-child(2n+1) (0) | 2023.03.30 |
| CSS 선택자 첫/마지막번째, *-of-type (0) | 2023.03.30 |
| CSS 선택자, 번갈아 선택하기 nth-of-type() (0) | 2023.03.30 |
