Keep going
CSS 고급 선택자 본문
10-1 연결 선택자
연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다.
선택자를 둘 이상 조합하므로 조합 선택자라고도 하고 콤비네이션 선택자, 콤비네이션 셀렉터 등으로 부른다.
하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자
특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다.
현재 요소를 기준으로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다.
하위 선택자
하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다.
즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.
|
section p { /* section 요소의 모든 하위 p 요소에 적용 */
color:blue; /* 글자색을 파란색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<div>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
|
cs |
자식 선택자
자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 다음과 같이 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다.
section 요소에 포함된 p 요소 중에서 자식 요소만 선택하려면 section과 p 사이에 자식 선택자 기호인 '>'를 넣는다.
|
section > p { /* section 요소의 자식 p 요소에 적용 */
color:blue; /* 글자색을 파란색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<div>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
</body>
|
cs |
section 요소의 자식 요소인 p 요소만 글자색이 파란색으로 바뀐다.
형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자
웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.
인접 형제 선택자
형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 한다.
인접 형제 선택자를 정의할 때는 요소1과 요소 2 사이에 '+' 기호를 표시한다.
요소 1과 요소2는 같은 레벨이면서 요소 1 이후 가장 먼저 오는 요소 2를 선택한다.
|
h1 + p { /* h1 요소의 형제 요소 중 첫번째 p 요소에 적용 */
background-color: #222; /* 배경은 검은색으로 */
color: #fff; /* 글자는 흰색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 이용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
</body>
|
cs |
형제 선택자
형제 선택자는 인접 형제 선택자와 달리 모든 형제 요소에 적용된다.
형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시한다.
요소 1과 형제인 요소 2를 모두 선택하는 것이다.
|
h1 ~ p { /* h1 요소와 형제인 모든 p 요소에 적용 */
background-color: #222; /* 배경은 검은색으로 */
color: #fff; /* 글자는 흰색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 이용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
</body>
|
cs |
10 - 2 속성 선택자
특정 속성이 있는 요소를 선택하는 [속성] 선택자
그 속성값에 따라 원하는 요소를 선택할 수도 있다.
이때 사용하는 것이 [속성] 선택자인데, 대괄호( [ ] )사이에 원하는 속성을 입력하면 된다.
예를 들어 a 요소 중에서 href 속성이 있는 요소를 선택하려면 아래와 같이 작성한다.
|
a[href] {
background: yellow;
border: 1px solid #ccc;
font-weight: normal;
}
</style>
</head>
<body>
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</body>
|
cs |
특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
[속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다.
예를 들어 a 요소 중에서 target 속성값이 '_blank'인 것만 선택하고 싶다면 아래와 같이 작성한다.
|
a[target="_blank"] {
padding-right: 30px;
background: url(images/newwindow.png) no-repeat center right;
}
</style>
</head>
<body>
<ul>
<li><a href="hhttps://html.spec.whatwg.org" target="_blank">HTML</a></li>
<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>
|
cs |
여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자
[속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다.
이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리한다.
예를 들어 button 스타일이 있는 요소를 찾으려면 [class ~= button] {..} 이라고 작성한다.
여기서 주의할 점은, [속성 ~= 값] 선택자는 button이라는 속성값과 정확하게 일치하는 요소만 선택한다는 것이다.
예를 들어 flat-button 이나 buttons 처럼 button 외에 다른 글자가 속성값에 포함되어 있으면 선택하지 않는다.
|
a[class ~="button"] {
box-shadow: rgba(0,0,0,0.5) 4px 4px; /* 그림자 지정 */
border-radius: 5px; /* 테두리를 둥글게 */
border: 1px solid #222;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="flat">메뉴 1</a></li>
<li><a href="#" class="flat">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="flat button" >메뉴 4</a></li>
</ul>
</body>
|
cs |
특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값 ] 선택자
[속성 | = 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용한다.
[속성 ~= 값] 선택자와 비슷해 보이나, [속성 ~= 값] 은 하이픈으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 차이가 있다.
즉, [속성 |= 값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-) 으로 연결된 단어도 선택한다.
|
a[title |="us"] { /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
background: url(images/us.png) no-repeat left center;
}
a[title |="jap"] { /* 속성값이 "jap"이거나 "jap-"로 시작하는 요소를 찾는 선택자 */
background: url(images/jp.png) no-repeat left center;
}
a[title |="chn"] { /* 속성값이 "chn"이거나 "chn-"로 시작하는 요소를 찾는 선택자 */
background: url(images/ch.png) no-repeat left center;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="us-english">영어</a></li>
<li><a href="#" title="ja">일본어</a></li> //적용 x
<li><a href="#" title="chn">중국어</a></li>
</ul>
</body>
|
cs |
특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용한다.
|
a[title ^="eng"] { /* 속성값이 "eng"로 시작하는 요소를 찾는 선택자 */
background: url(images/us.png) no-repeat left center;
padding: 5px 25px;
}
a[title ^="jap"] { /* 속성값이 "jap"로 시작하는 요소를 찾는 선택자 */
background: url(images/jp.png) no-repeat left center;
padding: 5px 25px;
}
a[title ^="chin"] { /* 속성값이 "chn"로 시작하는 요소를 찾는 선택자 */
background: url(images/ch.png) no-repeat left center;
padding: 5px 25px;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chinese">중국어</a></li>
</ul>
</body>
|
cs |
특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자
[속성 &=값] 선택자는 지정한 속성값으로 끝나는 요소를 선택한다.
[속성 &= 값] 선택자를 사용해 href에 링크된 파일의 확장자, 즉 파일 이름의 마지막 속성값을 체크한 후 파일 형식에 맞는 아이콘을 파일 이름 옆에 표시하고 있다.
|
a[href$=hwp] { /* 연결한 파일의 확장자가 hwp인 링크 */
background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
a[href$=xls] { /* 연결한 파일의 확장자가 hwp인 링크 */
background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
</style>
</head>
<body>
<h3>회사 소개 파일 내려받기</h3>
<ul>
<li><a href="intro.hwp">hwp 파일</a></li>
<li><a href="intro.xls">엑셀 파일</a></li>
</ul>
</body>
|
cs |
일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
[속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택한다.
|
a[href *= "w3"] { /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */
background:blue;
color:white;
}
</style>
</head>
<body>
<h1>HTML5 참고 사이트 </h1>
<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
<ul>
<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>
|
cs |
10-3 가상 클래스와 가상 요소
사용자 동작에 반응하는 가상 클래스
사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다.
① 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'
웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다.
이때 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용한다.
② 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'
웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.
한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다.
이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절한다.
③ 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자'
:hover 선택자는 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다.
즉, 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다.
④ 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'
:active 선택자는 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정한다.
⑤ 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'
:focus 선택자는 웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다. 예를 들어 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서 탭을 눌러 입력 커서를 이동했을 때 스타일을 지정한다.
|
.navi a:link, .navi a:visited{ /* 방문한 링크와 방문하지 않은 링크를 설정 */
display: block;
font-size: 14px;
color :#000;
padding: 10px;
text-decoration: none; /* 밑줄 없앰 */
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color: #222; /* 배경 색 */
color: #fff; /* 글자 색 */
}
.navi a:active {
background-color: #f00; /* 배경 색 */
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
</body>
|
cs |
요소 상태에 따른 가상 클래스
앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서안에서 다른 위치로 이동할 때에는 앵커(anchor)를 이용한다.
이때 :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다.
|
#intro:target {
background-color:#0069e0;
color:#fff;
}
#room:target {
background-color:#ff9844;
}
#reservation:target{
background-color:#fff8dc;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
</div>
<div id="room" class="contents">
<h2>객실 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
</div>
<div id="reservation" class="contents">
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</div>
</body>
|
cs |
요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 반대로 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용한다.
예를 들어 텍스트 영역 필드를 사용해 회원 약관을 보여 줄 때는 사용자가 입력할 수 없도록 disabled 속성을 지정해야 한다. 이때 :disabled 선택자를 사용하면 이런 텍스트 영역 필드의 스타일을 쉽게 적용할 수 있다.
선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked 라는 속성이 추가된다.
이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리하다.
|
#signup input:checked + label { /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color: red;
font-weight: bold;
}
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
<li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
|
cs |
특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'
:not 선택자는 '괄호 안에 있는 요소를 제외한' 이라는 의미이디다.
다음 폼에는 텍스트와 전화번호 필드 그리고 라디오 버튼이 있는데, 이 중에서 텍스트와 전화 번호 필드에 스타일을 적용할 것이다.
|
/* #signup input[type=text], input[type=tel] { 텍스트와 전화번호 필드에만 스타일 적용하는 코드
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
|
cs |
구조 가상 클래스
구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자이다.
특정 위치의 자식 요소 선택하기
웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class 나 id 선택자를 사용한다.
하지만 요소가 여러 개 나열 되어 있는 경우에는 class 나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째 인지를 따져서 스타일을 적용할 수 있다.
| 종류 | 설명 |
| :only - child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다. |
| A:only-type-of | 부모 안에 A요소가 하나뿐일 때 선택한다. |
| :first-child | 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다. |
| :last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다. |
| A:first-of-type | 부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다. |
| A:last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다. |
| :nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다. |
| :nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다. |
| A:nth-of-type(n) | 부모 안에 있는 A 요소 중에서 n 번쨰 요소를 선택한다. |
| A:nth-last-of-type(n) | 부모 안에 있는 A 요소 중에서 끝에서 n 번째 요소를 선택한다. |
수식을 사용해 위치 지정하기
위치를 지정할 때 :nth-child(n) 선택자처럼 위치를 정확히 알려 줄 수도 있지만 1,3,5 번째 처럼 위치가 계속 바뀐다면 규칙을 찾아 an+b 처럼 수식을 사용할 수도 있다. (n값은 0부터 시작)
홀수 번째에 스타일을 줄 때는 nth-child(odd), 짝수 번째에 스타일을 줄 때는 :nth-child(even)을 사용할 수 있다.
|
table tr:nth-of-type(2n+1) { /* 홀수 번째 열에만 스타일 적용 */
background:lightgray;
color:black;
}
|
cs |
가상 요소
가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.
가상 요소를 만들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것이다. 가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시한다.
첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'
::first-line 요소와 :: first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있다.
::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.
내용 앞 뒤에 콘텐츠를 추가하는 '::before 요소. :: after 요소'
:: before 요소와 :: after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.
이 요소를 사용하면 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있다.
|
li.new::after {
content: "NEW!!";
font-size: x-small;
padding: 2px 4px;
margin: 0 10px;
border-radius: 2px;
background: #f00;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="new">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="new">제품 D</li>
</ul>
</div>
|
cs |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > CSS' 카테고리의 다른 글
| 트랜지션과 애니메이션 (0) | 2021.03.03 |
|---|---|
| 이미지와 그러데이션 효과로 배경 꾸미기 (0) | 2021.02.26 |
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.02.24 |
| 텍스트를 표현하는 다양한 스타일 (0) | 2021.02.20 |
| CSS의 기본 (0) | 2021.02.19 |
