목차
접기
728x90
반응형
간단한 설명
[속성] - 지정한 '속성'일 때 스타일을 적용함.
[속성=값] - '값'에 일치할 때 스타일을 적용함.
[속성~=값] - 여러값들 중에 값이 포함되어 있는데 정확하게 포함된 것에만 스타일을 적용함.
[속성|=값] - 값이 포함되어 있을 때(하이픈 포함 단어도 된다.) 만 스타일을 적용함.
[속성^=값] - 값으로 시작할 때 스타일을 적용함.
[속성$=값] - 값으로 끝날 때 스타일을 적용함.
[속성*=값] - 값이 어디에 있든 포함만 되면 스타일을 적용함.
원하는 클래스명과 일치하는 요소 찾아서 CSS 적용하기
<!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>CSS기초-10(속성선택자-3)</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline;
margin: 10px;
float: left;
}
a {
padding: 5px 20px;
font-size: 14px;
text-decoration: none;
color: blue;
}
/* ~ 은 틸드라고 부른다. */
.flat {
background-color: blue;
color: white;
}
/* [속성~=값] 선택자를 사용하면 여러 속성 값 중에 해당 값이 포함되어 있는 요소들만 스타일을 적용시킨다. */
[class ~= "button"] {
border: 2px solid black;
}
</style>
</head>
<body>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#" class="button">떡볶이</a></li>
<li><a href="#" class="flat button">비빔밥</a></li>
</ul>
</body>
</html>원하는 단어를 포함하는 클래스명을 찾아서 CSS 적용하는 방법
<!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>CSS기초-12(속성선택자-4)</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline;
float: left;
margin: 10px;
}
a {
padding: 5px 40px;
font-size: 14px;
color: blue;
text-decoration: none;
}
/* |= 파이프, 이콜 선택자는 특정 값이 포함된 속성에 스타일을 적용시킨다.
~=와 혼돈이 될 수 있지만 |= 선택자는 하이픈(-)로 연결한 단어라도 스타일을
적용시킨다.
단, 하이픈(-)만 적용을 시킨다는 것에 주목하자..
*/
a[title |= "us"] {
/* background: url(images/image-solid.svg) no-repeat left center; */
background-image: url(images/us.jpg);
background-repeat: no-repeat;
background-size: 30px 20px;
background-position: left;
}
a[title |= "jap"] {
background-image: url(images/jp.png);
background-repeat: no-repeat;
background-size: 30px 20px;
background-position: left;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="us">영어</a></li>
<li><a href="#" title="us-english">영어</a></li>
<li><a href="#" title="jap-anese">일어</a></li>
</ul>
</body>
</html>- |= 사용법 : 원하는 단어를 포함하는 클래스를 찾아서 CSS를 적용한다.
background: url(images/img.png) no-repeat left center;
위와 같이 background를 설정해도 되지만 이미지 크기에 제약이 있는거 같아 size를 적용하는 코드를 사용해봄
🛴 최종 테스트 결과
a[title |= "us"] {
background-image: url(images/us.jpg);
background-repeat: no-repeat;
background-size: 30px 20px;
background-position: left;
} a[title |= "us"] {
background: url(images/image-solid.svg) no-repeat left center;
background-size: 30px 20px;
}위 코드를 사용하면 같은 결과를 보여준다.
원하는 코드를 가져다가 사용하면 되지만
background: url()을 사용하고 size만 적절하게 변경해주면 간단할 것 같다.
^ 캐럿을 이용하여 지정한 문자로 시작하는 속성에 스타일을 적용하는 방법
<!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>CSS기초-13(속성선택자-4)</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline;
float: left;
margin: 10px;
}
a {
padding: 5px 40px;
font-size: 14px;
color: blue;
text-decoration: none;
}
/* ^은 캐럿이라고 명칭함. ^= 선택자는 지정한 문자로 시작하는 속성에
스타일을 적용시킨다.
*/
a[title ^= "eng"] {
background: url(images/us.jpg) no-repeat left center;
/*
background-image: url(images/us.jpg);
background-repeat: no-repeat;
background-size: 30px 20px;
background-position: left;
*/
}
a[title ^= "jap"] {
background-image: url(images/jp.png);
background-repeat: no-repeat;
background-position: left;
}
a[title ^= "chi"] {
background: url(images/cha.jpg) no-repeat left center;
}
a[title] {
background-size: 30px 20px;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chines">중국어</a></li>
</ul>
</body>
</html>728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| *= 속성 선택자 사용법 (0) | 2021.06.02 |
|---|---|
| '$= 선택자 사용방법'과 파일 다운로드 받을 수 있게 하는 방법 (0) | 2021.06.02 |
| a(앵커)태그에 이미지 삽입하는 방법 (배경으로) (0) | 2021.06.02 |
| 블릿 모양 변경하는 방법 (0) | 2021.06.02 |
| css 선택자 종류 / 기본 선택자 (0) | 2021.06.02 |