[HTML][CSS]웹 개발 언어_CSS의 복합 셀렉터와 가상 셀렉터

 

 

---

 

 

데이터 분석을 위한 웹 개발 언어

 

✔️ 복합 셀렉터

✔️가상 클래스 셀렉터

 

 

---

 

 

✔️ 복합 셀렉터

 

 

 

 

후손 셀렉터

셀렉터A 셀렉터B : 부모 자식 관계뿐 아니라 더 깊은 계층(후손 관계)까지 포함하는 셀렉터

div p {color: red;}

<div>
	<p>후손요소 1</p>
	<p>후손요소 2</p>
 	<span><p>후손요소 3</p></span>
 </div>
 <!-- div와 형제관계이므로 변하지 않음 -->
 <p>후손요소 4</p>

(자식관계인 후손요소 1,2와 자손 관계인 후손요소 3까지 글자 색이 빨간색으로 변환)

 

 

 

 

자식 셀렉터

셀렉터A > 셀렉터B = 부모 > 자식

div > p {color: black;}
span > p {color: brown;}

<div>
	<p>후손요소 1</p>
	<p>후손요소 2</p>
 	<span><p>후손요소 3</p></span>
 </div>
 <p>후손요소 4</p>

(div의 자식 p인 후손요소 1,2는 글자색이 검은색, span의 자식 p인 후손요소 3은 글자색이 갈색으로 변환)

 

 

 

 

형제(동위) 셀렉터

인접 형제 셀렉터 (셀렉터A + 셀렉터B)
셀렉터A의 형제 요소 중 셀렉터A의 바로 뒤에 위치하는 셀렉터B 요소를 선택,
A와 B사이에 다른 요소가 존재하면 선택되지 않는다

일반 형제 셀렉터 (셀렉터A ~ 셀렉터B) : 셀렉터A의 형제 요소 중 뒤에 위치하는 셀렉터B 요소를 모두 선택

p + ul {color: red;}
span ~ ul {color: green;}

<p>The first paragraph</p>
<ul>
 	<li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

<span>The span element</span><br>
<a href="#">무제링크</a>
<ul>
	<li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

(P 바로 뒤에 오는 ul은 글자색이 빨간색, span 뒤에 오는 ul의 글자색이 초록색으로 변환)

 

 

 

 

정합성 체크 셀렉터

입력받은 내용이 적합하거나 하지 않은 경우에 따라 input 요소 또는 form요소 선택
:valid : 입력받은 내용이 적합할 경우
:invalid : 입력받은 내용이 적합하지 않은 경우

input[type="text"]:valid {background-color: greenyellow;}
input[type="text"]:invalid {background-color: red;}

<h1>정합성 체크 셀렉터</h1>
<label>입력값이 반드시 필요
	<input type="text" required />
</label>
<br />
<label>특수문자를 포함하지 않는 4자리 문자 또는 숫자
	<input type="text" value="ab1!" pattern="[a-zA-Z0-9]{4}" />
</label>
<br />
<label>휴대폰 번호 형식
      <input
        type="text"
        value="010-1111-2222"
        pattern="^\d{3}-\d{3,4}-\d{4}$"
        required/>
</label>

(입력값이 있으면 노라색, 없으면 빨간색 표시, 특수문자 포함하지 않은 4자리 문자면 노란색, 아닌 경우는 빨간색 표시

숫자로 3자리-3자리 또는 4자리-4자리 입력되면 노란색, 아닌 경우는 빨간색으로 표시)

 

 

---

 

 

✔️가상 셀렉터

 

 

 

 

가상 클래스 셀렉터

셀렉터:상태 : 요소의 특정 상태에 따라 스타일을 정의할 때 사용
특정 상태는 마우스가 올라와 있을 때, 링크에 방문했을 때와 아직 방문하지 않았을 때, 포커스가 들어왔을 때 등

가상 클래스의 링크 셀렉터
:link 셀렉터가 방문하지 않은 링크일 때
:visited 셀렉터가 방문한 링크일 때
:hover 셀렉터에 마우스가 올라와 있을 때
:active 셀렉터가 클릭된 상태일 때
:focus 셀렉터가 포커스에 들어와 있을 때

a:link {color: orange;}
a:visited {color: green;}
input[type="text"]:focus {color: red;}
input[type="password"]:focus {color: green;}

<a href="#">Hover me</a><br /><br />
<input type="text" placeholder="focus me" />
<input type="text" value="포커스가 들어오면 빨간 색으로 변해요" />
<input type="password" value="포커스가 들어오면 녹색으로 변해요" />

(a는 방문하지 않은 경우는 주황색, 방문하면 초록색으로 변환되고,

input의 text는 포커스에 들어오면 초록색, passward는 빨간색으로 변환)

 

 

 

 

구조 가상 클래스 셀렉터

:first-child - 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택
:last-child - 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택

p:first-child {color: red;}
p:last-child {color: blue;}

<div>
	<p>div의 1번째 자식_This paragraph is the first child of its parents</p>
    <h1>Welcome to My Homepage</h1>
    <p>div의 마지막 자식_This paragraph is the first child of its parents</p>
</div>

(div의 1번째 자식은 글자색이 빨간색, div의 마지막 자식은 글자색이 파란색으로 변환)

 

 

 

 

n번째 자식 선택 가능

:nth-child(n) - 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택
:nth-last-child(n) - 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택
(n은 0부터 시작)

/* ol 요소의 자식 요소인 li요소 중 짝수 번째 요소만을 선택 */
ol > li:nth-child(2n) {color: orange;}

/* ol의 li 중에서 홀수 번째 요소만 선택 */
ol > li:nth-child(2n+1) {color: green;}

/* ol의 li 중에서 4번째 요소만 선택 */
ol > li:nth-child(4) {background-color: brown;}

/* ul의 모든 자식 요소 중에서 뒤에서부터 홀수번째 요소만 선택 */
ul > :nth-last-child(2n+1) {color: red;}

/* ul의 모든 자식 요소 중에서 뒤에서부터 짝수 번째 요소만 선택 */
ul > :nth-last-child(2n) {color: blue;}

<ol>
    <li>에스프레소</li>
    <li>아메리카노</li>
    <li>카페 라떼</li>
    <li>카페 모카</li>
    <li>카라멜 라떼</li>
    <li>카푸치노</li>
</ol>

<ul>
    <li>에스프레소</li>
    <li>아메리카노</li>
    <li>카페 라떼</li>
    <li>카페 모카</li>
    <li>카라멜 라떼</li>
    <li>카푸치노</li>
</ul>

(ol의 li요소 중 짝수 요소는 글자색이 오렌지, 홀수 요소는 초록색, 4번째인 요소는 배경색이 갈색으로 변환되고,

ul의 뒤에서부터 홀수 요소는 글자색이 빨간색, 뒤에서부터 짝수 요소는 글자색이 파란색으로 변환)

 

 

 

 

부모의 자식 요소 중 n번째 선택 가능

:first-of-type : 셀렉터에 해당하는 요소의 부모 요소 중 첫번째 등장하는 요소 선택
:last-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소 선택
:nth-of-type(n) : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째 등장하는 요소 선택
:nth-last-of-type(n) : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째 등장하는 요소 선택

/* p의 부모의 자식 중 첫번째 등장하는 p의 요소 선택 */
p:first-of-type {color: red;}

/* p의 부모의 자식 중 마지막에 등장하는 p의 요소 선택 */
p:last-of-type {color: blue;}

/* p의 부모의 자식 중 앞에서 2번째 등장하는 p의 요소 선택 */
p:nth-of-type(2) {color: green;}

/* p의 부모의 자식 중 뒤에서 2번째 등장하는 p의 요소 선택 */
p:nth-last-of-type(2) {color: orange;}

<h2>이것이 제목입니다.</h2>
	<p>첫번째 문단</p>
    <p>두번째 문단</p>
    <p>세번째 문단</p>
    <p>네번째 문단</p>

<div>
	<h2>이것은 div 안쪽 제목입니다.</h2>
    <p>첫번째 문단</p>
    <p>두번째 문단</p>
    <p>세번째 문단</p>
    <p>네번째 문단</p>
</div>

(제목과 안쪽 제목의 첫번째 문단은 글자색이 빨간색, 두번째 문단은 초록색,

세번째 문단은 초록색, 네번째 문단은 주황색으로 변환)

 

 

 

 

가상 요소 셀렉터

::first-letter - 콘텐츠의 첫글자를 선택
::first-line - 콘텐츠의 첫줄을 선택, 블록 요소만 적용 가능
::after - 콘텐츠의 뒤에 위치하는 공간을 위해
::before - 콘텐츠의 앞에 위치하는 공간을 위해
::selection - 드래그한 콘텐츠를 선택 (safari 등에서는 작동하지 않음)

.beforafter > p::first-letter {font-size: 3em;}
.beforafter > p::first-line {color: red;}

/* h1 요소의 콘텐츠 앞 공간에 content 속성의 값 삽입 */
.beforafter > h1::before {content: "HTML!!"; color: blue;}
.beforafter > ::selection {color: red; background-color: yellow;}

<h1>가상 셀렉터</h1>
<div class="beforafter">
	<h1>이것은 제목입니다.</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas error
      vero quasi corporis neque odio rem molestiae expedita magni. Dicta iusto
      at impedit dolor est. Aut vero ea exercitationem laborum.
    </p>
</div>

(beforeafter 클래스의 p의 첫글자의 크기를 3rem으로 변환, p에 화면에 표시되는 첫번째 문장의 글자색을 빨간색 변환

h1의 글자 앞에 글자색이 파란 HTML!! 입력, 드래그한 컨텐츠의 글자색은 빨간색, 배경색은 노란색으로 표시)

 

 

---

 

 

이번 내용에서는 HTML과 CSS에서의 

CSS 셀렉터 중 복합 셀렉터와 가상 클래스 셀렉터에 대해 공부하였습니다.

 

HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데

웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.

 

더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데

위 블로그 글 참고해서 공부하면 좋을 것 같습니다.

 

'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록