티스토리 뷰

HTML+CSS

구조&형태구조 / 제외.속성.상태.가상요소선택자 / day13 / 25.04.17

one-dy 2025. 4. 17. 15:44

Web12폴더 selector04~08.html파일 참고하기

구조선택자 

구조선택자는 형제 태그가 모두 같을 때 사용

부모태그 안의 형제관계 중 특정 태그를 선택하고 싶을 때 사용한다.

[기본형]

선택자:first-child  :부모 태그 안의 형제 관계 중 첫번째에 위치한 태그를 불러온다. 

ex) li: first-child는 li 중에서 맨 위에 있는 태그 불러온다.

선택자:last-child : 부모 태그 안의 형제 관계 중 마지막 번째에 위치한 태그를 불러온다. 

선택자:nth-child(수열)"중간형제 불러오기" : 부모 태그 안의 형제 관계 중 특정 순 번째에 위치한 태그를 불러온다.

부모 태그와 자식 태그가 동일하면 부모태그 또한 계산된다.

선택자:nth-last-child(수열): 부모 태그 안의 형제 관계 중 뒤에서 특정 순 번째에 위치한 태그를 불러온다.

부모 태그와 자식 태그가 동일하면 부모태그 또한 계산된다.

선택자:only-child: 부모 태그 안에 하나뿐인 자식태그를 선택할 때 사용한다. 

*수열: nth-child의 ()안에는 2n, 3n, 4n...이런 식으로 키워드를 쓸 수 있다. 중괄호() 안에 써주어야 함! 여기서 n이란'배수'를 의미
▶2의 배수(2n)or(even) 2,4,6,8...2의 배수에 있는 형제 태그를 불러온다.
▶3의 배수(3n) 3,6,9,12...3의 배수에 있는 형제 태그를 불러온다. 
▶홀수 (2n + 1)or(odd) 홀수를 뜻한다. 1,3,5,7,9...
*수식 : nth-child는 여러 요소 중에서 중간 범위에 있는 자식 요소를 한꺼번에 선택할 때 유용하다.
이때 n이라는 키워드를 사용하고, 
(n + 3)이라고 쓰면 3번째 형제부터 막내까지라는 의미이다.  n+숫자 는 (~형제부터라고 외우기!)
(-n + 5) : 첫번째 요소부터 5번째 형제까지라는 의미이다. 2개 한번에 쓰면 범위를 특정할 수 있다! -n (n앞에 마이너스 붙으면 앞에서부터 센다)

예제)
/* li중 네번째 형제부터 뒤에 있는 모든 형제 선택하기 */
      ▶ li:nth-child(n + 4) {
/* li중 네번째 자식까지 선택하기 */
      ▶ li:nth-child(-n + 4) {
/* ul안에 있는 (한칸 뛰고) 후손(li)불러와라. 3번째부터 다섯째까지 */
      ▶ ul :nth-child(n + 3):nth-child(-n + 5) {
/* 또는 그냥 li 바로 불러와도 된다. */
      ▶ li:nth-child(n + 3):nth-child(-n + 5){

 

, 콤마는 그룹선택자이다.

ex)li:nth-child(3),li:nth-child(4),li:nth-child(5){...}

콤마로 여러 개 연결해주고 마지막에 오는 선택자에는 콤마 오면 안된다.

형태구조선택자 

형제 태그가 서로 다른 태그일 때 사용

앞에서 배운 구조선택자와 마찬가지로 부모 태그 내에 특정 형제 태그를 선택할 때 사용한다.

구조선택자는 형제 태그가 모두 동일할 때 사용하고, 구조선택자랑 문법의 거의 동일하다. 의미도 똑같다.

[기본형]

선택자:first-of-type : 부모 태그 안의 형제 관계 중 첫번째에 위치한 태그를 불러온다. 

선택자:last-of-type: 부모 태그 안의 형제 관계 중 마지막 번째에 위치한 태그를 불러온다.

선택자:nth-of-type(수식 또는 수열): 부모 태그 안의 형제 중에 특정 순번째에 위치한 태그를 불러온다. 

선택자:nth-last-of-type(수식 또는 수열): 부모 태그 안의 형제 중에 뒤에서 특정 순번째에 위치한 태그를 불러온다. 

 /* h3중에서 뒤에서 4번째 불러와라 */
      h3:nth-last-of-type(4) {
        color: rgb(250, 85, 85);
      }

제외선택자

선택된 여러 태그 중 제외하고 싶은 태그가 있다면 사용

[기본형]

선택자:not()

()자리에는 제외할 조건이 들어간다. css의 모든 선택자가 올 수 있다.

클래스명이나 아이디명, 그룹선택자(h1, h2, h3...)가 오거나 :hover와 같은 다양한 선택자가 올 수 있다.

ex) li 안에 있는 후손 span을 제외하고 싶으면 li:not(span)이라고 써주면 된다. 

ex2) li:not(:nth-child(3))

 

/* ul에 hover하면 그 안의 li가..라고 해석해라 */
      ul:hover li{
        background-color: pink;
      }

속성선택자

태그 중에 특정 속성을 포함하고 있는 태그를 선택할 때 사용

[기본형]

선택자[속성]선택된 태그 중 해당 속성을 가진 태그만 선택한다.

선택자[속성=값]선택된 태그 중 속성과 값이 모두 일치하는 태그만 선택한다.

선택자[속성~=값] ex) a[href~=naver]선택된 태그 중 지정한 속성값과 단어 일치하는 태그를 선택한다. 

선택자[속성|=값]  ex)img[href|=first]선택된 태그 중 지정한 속성값이 하이픈|을 포함한 단어로 일치하는 태그를 선택한다. 속성값이 해당 값으로 시작하거나 해당 '값-'으로 하이픈으로 이어진 단어도 선택하겠다는 의미이다.

선택자[속성^=값]선택한 태그 중 지정한 속성값으로 시작하는 태그를 선택한다. 값은 한 단어로 일치해야한다.

선택자[속성$=값]선택한 태그 중 지정한 속성값으로 끝나는 태그를 선택한다.값은 한 단어로 일치해야한다.

선택자[속성*=값]선택한 태그 중 지정한 속성값을 포함하는 태그를 선택한다. 값이 한 단어로 일치하지 않더라도 선택한다.

상태선택자

입력 양식 태그의 상태를 선택할 때 사용

입력 양식 태그란 사용자가 입력할 수 있는 기능을 가지고 있는 태그들을 말한다.

[기본형]

input:checked체크박스가 체크된 상태라면 해당 input 태그를 선택한다.

선택자:focus포커스(=초점)상태의 태그를 선택한다. 포커스란 브라우저에서 tab키를 눌렀을 때 활성화된 태그를 말한다. **키보드에서 tap 키를 누를 때마다 다음 단계로 이동시킬 수 있다. 이 상태를 focus라고 한다. 

선택자:enabled사용가능한 상태의 태그를 선택한다.

선택자:disabled사용불가능한 상태의 태그를 선택한다. 

<style>
      /* input태그가 체크 상태가 되면 바로 뒤에 있는
      span태그의 글자 색을 바꿔라. */
      input:checked + span {
        color: springgreen;
      }
      /* input이 활성화되면(포커스 되면) 글자색, 배경색을 바꿔라. */
      input:focus {
        color: hotpink;
        background-color: cornflowerblue;
      }
/* 원래 input 태그에는 border-radius들어가는데 배경색을 바꾸면 border-radius 없어지므로 border다시 꾸며줘야한다. */
      input:enabled {
        background-color: rgb(248, 178, 248);
        border: 1px solid gold;
      }
      input:focus {
        color: hotpink;
        background-color: cornflowerblue;
      }
    </style>
  </head>
  <body>
    <h2>체크박스</h2>
    <p>
      <input type="checkbox" />
      <span>항목1</span>
    </p>

    <h2>입력할 수 있는 상태</h2>
    <p>
      <input type="text" />
    </p>

    <h2>입력할 수 없는 상태</h2>
    <p>
      <!-- 속성명과 값이 같을 경우 속성명만 써준다. 원래 기본형은
    disabled="disabled"인데 생략하여 disabled만 써준다. -->
      <input type="text" disabled />
    </p>
  </body>
    </style>

실습해보기▼

 /* 형태그A의 바로 아래에 있는 동생태그B 불러올 때 형태그A+동생태그B */
      input[type="checkbox"]:checked + div {
        display: none;
      }
<style>
      div {
        width: 600px;
        height: 300px;
        overflow: hidden;
        background-color: yellowgreen;
      }
      /* 형태그A의 바로 아래에 있는 동생태그B 불러올 때 형태그A+동생태그B */
      input[type="checkbox"]:checked + div {
        height: 0;
      }
    </style>
더보기

***overflow:hidden;을 주고 transition 주면 서서히 펼쳐지고 가려진다. (나중에 배운다고 함)

가상요소선택자

HTML에는 존재하지 않는 구조 요소에 스타일을 부여하는 선택자

가상 요소 선택자로 만들어지는 요소는 css에서 가상으로 만들어지는 요소

즉, html에는 실제 구조가 존재하지 않으며 css를 통해 마치 html 태그구조가 있는 것처럼 취급, 스타일 부여가능.

가상으로 만들어지는 요소는 기본적으로 인라인 속성을 가짐.

가상요소는 display: block;을 써서 block속성으로 바꿀 수 있음.

가상요소는 content 속성이 필수로 들어가야만 화면에 표시된다.

::before{content:"...... "}

더보기
**가상요소는 css만 알 수 있는 정보 ! java script로도 제어할 수 없다. 엄청나게 많이 사용한다고하니 잘 기억해두자!!
아이콘 자리 대신해서 / 헤더 아래쪽의 선을 border로 만들지 않고 가상요소로 처리하는 경우 / 디자인된 요소를 만들고 싶은 경우 / gnb에 hover할 때 전체 배경 어둡게 만드는 경우 등등에 쓰인다. 

[기본형]

선택자::before ex) span::before

:선택한 태그의 앞 또는 위에 가상의 요소를 만든다. (인라인속성과 박스 속성이 있기 때문에 앞, 또는 위)

선택자::after

:선택한 태그의 뒤 또는 아래에 가상의 요소를 만든다. 

    <style>
      /* h2 앞에 가상요소를 만들겠다! */
      h2::before {
      /* 가상요소에 content속성이 필수로 들어가야한다! */
        content: "벌써4월중순";
        color: palevioletred;
        font-size: 30px;
        font-style: italic;
      }
      p::after {
        content: "글을 써준다.";
가상요소는 인라인 속성을 갖기 때문에 display: block; 써주고, content: 안에 글자는 절대 비워두지 않는게 좋다.
글자는 없이 배경요소로 쓰고 싶을 때는 글자를 써주고, font-size를 0으로 바꿔주면 된다." 
        display: block;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <h2>TITLE-1</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, aliquid
      necessitatibus molestias recusandae ipsa vitae enim soluta repellendus,
      dolores quibusdam, tempore tempora consectetur eum blanditiis laboriosam
      accusantium error optio ullam.
    </p>
  </body>
</html>

"content에는 무엇을 만들지 간략하게 설명하는 것이 좋다.

예)동그란 원을 만들고 싶으면 circle 써주고 font-size: 0; 또는 

text-indent: -99999px; (화면 밖으로 글자 밀어버리기, text에서만 가능하다.)

+양수)방향은 오른쪽, 아래 

-(음수)방향은 왼쪽, 위 

가상요소선택자 ::before{} ::after{}

p:hover::after {
        background-color: forestgreen;
      }

p태그에 hover하면 after 색깔이 바껴라.

'HTML+CSS' 카테고리의 다른 글

테이블 태그 칸 합치기 / day18 / 25.04.24  (0) 2025.04.25
#Beyond / is,has선택자 / 배경투명도속성 /day14 / 25.04.18  (0) 2025.04.18
#대남병원 / list-style속성 / day12 / 25.04.16  (1) 2025.04.16
HTML+CSS / ★flex속성 6가지 / day11 / 25.04.15  (2) 2025.04.15
HTML+CSS / 레이아웃 만들기 / flex / day10 / 25.04.14  (0) 2025.04.15