개발 공부 기록하기

DAY 23. 연결 선택자 본문

프밍/CSS

DAY 23. 연결 선택자

태영(泰伶) 2022. 11. 27. 18:03

연결 선택자

     = 조합 선택자

     = 콤비네이션 선택자

     = 콤비네이션 셀렉터combination selector

: 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정하는 것.

 

 

1. 하위 요소에 스타일 적용

  • 하위 요소: 특정 요소 기준으로 그 안에 포함된 요소
  • 자식 요소: 현재 요소 기준으로 바로 한 단계 아래 요소
  • 손자 요소: 자식 요소의 한 단계 아래 요소

     1) 하위 선택자descendant selector

          = 자손 선택자.

          부모 요소에 포함된 하위 요소를 모두 선택한다.

          그러니까, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다는 뜻.

 

          상위요소✔하위요소

 

          처럼 공백으로 구분한다.

 

          마치, 아래 코드처럼.

<style>
   section p { ...... }
</style>

 

 

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>하위 선택자</title>
         <style>
            body {
               background-color: #eee;
            }
            section {
               width: 600px;
               height: 20px auto;
            }
            p {
               width: 500px;
               padding: 10px;
               background-color: #fff;
               border: 1px solid #ccc;
               line-height: 2;
            }
            section p {
               color: blue;		/* section 요소의 모든 하위 p 요소를 파란색 글자로 지정 */
            }
         </style>
      </head>
      <body>
         <section>
            <h1>예약 방법 & 사용 요금</h1>
            <p>아직 온라인 예약 신청이 준비되지 않았습니다.<br />
               전화(xxx-xxxx-xxxx)로 문의하시기 바랍니다.</p>
            <div>
               <p>가족실(2~4인): 60,000원/일</p>
               <p>도미토리(4인 공용): 25,000원/일</p>
            </div>
         </section>
      </body>
   </html>

↓

 

 

 

 

 

 

     2) 자식 선택자child selector

          자식 요소에만 스타일을 적용하는 선택자.

                  cf, 하위 선택자는 자식, 손자, 손자의 손자까지 모두 적용.

         

          부모요소 > 자식요소

         

예제 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>자식 선택자</title>
         <style>
            body {
               background-color: #eee;
            }
            section {
               width: 600px;
               height: 20px auto;
            }
            p {
               width: 500px;
               padding: 10px;
               background-color: #fff;
               border: 1px solid #ccc;
               line-height: 2;
            }
            section > p {
               color: blue;		/* section 요소의 자식인 p 요소를 파란색 글자로 지정 */
            }
         </style>
      </head>
      <body>
         <section>
            <h1>예약 방법 & 사용 요금</h1>
            <p>아직 온라인 예약 신청이 준비되지 않았습니다.<br />
               전화(xxx-xxxx-xxxx)로 문의하시기 바랍니다.</p>
            <div>
               <p>가족실(2~4인): 60,000원/일</p>
               <p>도미토리(4인 공용): 25,000원/일</p>
            </div>
         </section>
      </body>
   </html>

↓

아래 상자 2개는 <section>의 자식 요소가 아니어서 적용이 안 됐다.

 

 

 

 

 

2. 형제 요소에 스타일 적용

부모 요소가 같은 요소들을 형제 관계라고 일컫는다.

형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 부른다.

     1) 인접 형제 선택자adjacent selector

          형제 요소 중에서 첫 번째 동생 요소만 선택하는 것.

          두 요소는 같은 레벨이며, 요소1 이후 가장 먼저 오는 요소2를 지정하는 선택자.

 

          요소1 + 요소2

 

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>인접 형제 선택자</title>
         <style>
            body {
               background-color: #eee;
            }
            section {
               width: 600px;
               height: 20px auto;
            }
            p {
               width: 500px;
               padding: 10px;
               background-color: #fff;
               border: 1px solid #ccc;
               line-height: 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>
   </html>

↓

 

 

 

 

 

     2) 형제 선택자sibling selector

          모든 형제 요소에 스타일을 적용하는 것.

          두 요소는 같은 레벨이며, 요소1에게 형제 관계인 모든 요소2를 지정한다.

 

          요소1 ~ 요소2

 

예제 4.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>형제 선택자</title>
         <style>
            body {
               background-color: #eee;
            }
            section {
               width: 600px;
               height: 20px auto;
            }
            p {
               width: 500px;
               padding: 10px;
               background-color: #fff;
               border: 1px solid #ccc;
               line-height: 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>
   </html>

↓

 

 

 

 

 

 

 

 

 

책에 나온 실습 - 레이블 요소 정렬하기

레이블의 길이가 들쭉날쭉한 탓에, 입력란의 위치가 정렬되어 있지 않아 지저분해 보인다.

이것을 하위 선택자로 지정하여 똑같은 위치에 입력란을 정렬하고 싶다 - 는 것이 과제이다.

 

그래서 주어진 코드에 #signup label을 추가했다.

(제공된 파일은 html 파일과 css파일이 분리되어 있었지만, 나는 하나로 합쳐버렸다..)

<!DOCTYPE HTML>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>회원 가입</title>
         <style>
            * {
               margin: 0;
               padding: 0;
            }

            body {
               background: #ccc;
               padding: 20px;	
            }

            #signup {
               background:#fff;
               border:1px solid #222;
               border-radius: 5px;
               padding: 20px;
               width: 400px;	
               margin:30px auto;
            }
		
            #signup fieldset {
               border: 1px solid #ccc;
               margin-bottom: 30px;
            }
		
            #signup legend {
               font-size: 16px;
               font-weight: bold;
               padding-left:5px;
               padding-bottom: 10px;	
            }
			
            #signup ul li {
               line-height: 30px;
               list-style: none;
               padding: 5px 10px;
               margin-bottom: 2px;
            }
			
            #signup button {	
               border: 1px solid #222;
               border-radius: 20px;
               display: block;
               font-size: 16px 맑은고딕,굴림,돋움;
               letter-spacing: 1px;
               margin: auto;
               padding: 7px 25px;
            }
            #signup label {
               float: left;		/* 왼쪽으로 배치 */
               font-size: 13px;
               width: 110px;		/* 너비를 110px로 지정 */
            }
         </style>
      </head>
      <body>
         <form id="signup">
            <fieldset>
               <legend>로그인 정보</legend>
               <ul>
                  <li>
                     <label for="userid">아이디</label>
                     <input id="userid" name="userid" type="text" required autofocus>
                  </li>
                  <li>
                     <label for="pwd1">비밀번호</label>
                     <input id="pwd1" name="pwd1" type="password"  required>
                  </li>
                  <li>
                     <label for="pwd2">비밀번호 확인</label>
                     <input id="pwd2" name="pwd2" type="password" required>
                  </li>  
                  <li>
                     <label for="level">회원 등급</label>
                     <input id="level" name="level" type="text" readonly value="준회원">
                  </li>
               </ul>
            </fieldset>
            <fieldset>
               <legend>개인 정보</legend>
               <ul>
                  <li>
                     <label for="fullname">이름</label>
                     <input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
                  </li>
                  <li>
                     <label for="email">메일 주소</label>
                     <input id="email" name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off">
                  </li>
                  <li>
                     <label for="tel">연락처</label>
                     <input id="tel" name="tel" type="tel" autocomplete="off">
                  </li>  
               </ul>
            </fieldset>
            <fieldset>
               <button type="submit"> 제출 </button> 
            </fieldset>
         </form>
      </body>
   </html>

↓

정렬 완료^^

훨씬 깔끔하다.

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 24. 가상 클래스  (1) 2022.12.03
DAY 23. 속성 선택자  (1) 2022.11.27
DAY 22. 단원 마무리 문제 풀기  (0) 2022.11.23
DAY 21. 그러데이션으로 배경 꾸미기: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient  (0) 2022.11.20
DAY 20. 배경 이미지 지정: background-image, background-repeat, background-position, background-origin, background-attachment, background  (0) 2022.11.19
'프밍/CSS' Related Articles more
Comments