HTML, CSS, JS

공간분할태그 및 CSS 선택자

himzei 2022. 8. 29. 15:34

<div>태그

레이아웃을 생성할때 사용되는 태그로 div는 블록 형식으로 분할

 

<span>태그

인라인 형식으로 레이아웃을 생성할 때 사용

 

<body>
    <!-- 공간분할태그 div -->
    <div>공간1</div>
    <div>공간2</div>
    <div>공간3</div>
    <div>공간4</div>
    <div>공간6</div>
    <!-- 공간분할태그 span -->
    <span>공간1</span>
    <span>공간2</span>
    <span>공간3</span>
    <span>공간4</span>
    <span>공간5</span>
  </body>

출력화면

시멘틱태그(Semantic Tag)

레이아웃을 생성할 때 사용하는 의미론적 태그로 시멘틱 웹 태그 

 

공간분할방법

<body>
  <header>
    <nav></nav>
    <nav></nav>
  </header>
  <div class="content">
    <section></section>
    <aside></aside>
  </div>
  <footer></footer>
</body>

 

CSS 선택자

동위 선택자

선택자A + 선택자B  : 선택자A 바로 뒤에 위치하는 선택자B를 선택합니다. 

선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택합니다. 

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>CSS 선택자</title>
    <style>
      h1 + h2 {
        color: red
      }
      h1 ~ h2 {
        background: skyblue;
      }
    </style>
  </head>
  <body>

    <h1>공간1</h1>
    <h2>공간2</h2>
    <h2>공간3</h2>
    <h2>공간4</h2>
    <h2>공간6</h2>

  </body>
</html>

상태선택자

입력양식의 상태를 선택할 때 사용하는 선택자

:checked - 체크상태의 input 태그

:focus - 초점이 맞추어진 input 태그를 선택

:enabled - 사용 가능한 input

:disabled - 사용 불가능한 input

 

구조선택자

CSS3부터 지원하는 선택자

:first-child - 형제관계중에서 첫번째 위치하는 태그 선택

:last-child - 형제관계중에서 마지막에 위치하는 태그 선택

:nth-child(수열) - 형제관계중에서 앞에서 n번째 위치하는 태그 선택

:nth-last-child(수열) - 형제관계중에서 뒤에서 n번째 위치하는 태그 선택

 

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>CSS 선택자</title>
    <style>
      li {
        list-style: none;
        float: left;
        padding: 15px;
      }
      li:first-child {
        border-radius: 10px 0 0 10px;
      }
      li:last-child {
        border-radius: 0 10px 10px 0;
      }
      li:nth-child(2n) {
        background-color: #ff0003;
      }
      li:nth-child(2n + 1) {
        background-color: #880000;
      }
    </style>
  </head>
  <body>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>

  </body>
</html>

 

형태구조선택자

일반구조선택자와 비슷하지만 태그 형태를 구분

:first-of-type 형제관계중에서 첫 번째로 등장하는 특정 태그 선택

:last-of-type 형제관계중에서 마지막으로 등장하는 특정 태그 선택

:nth-of-type(수열) 형제관계중에서 앞에서 수열 번째로 등장하는 특정태그 선택

:nth-last-of-type(수열) 형제관계중에서 뒤에서 수열 번째로 등장하는 특정태그 선택

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1:first-of-type {
        color: red
      }
      h2:first-of-type {
        color: blue
      }
      h3:first-of-type {
        color: purple
      }
    </style>

  </head>
  <body>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>

    <h3>Header 3</h3>
    <h2>Header 2</h2>
    <h1>Header 1</h1>
  </body>
</html>