20.11.30-6일차

🤩Table Style

🎡Hoverable Table
마우스 오버시 테이블 행을 강조 표시
hover {background-colrt: red;}

🎡Striped Tables

• 홀수행 강조시: nth-child(odd) {background-color: 색}
• 짝수행 강조시: nth-child(even) {background-color: 색}

🎡Responsive Table
화면이 작아서 전체 콘텐츠를 표시할 수 없는 경우에 가로 스크롤 막대가 표시

• < div style="overflow-x:auto;">

🤩Display

🎠Block-level elements
항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지
👉Block-level elements

- <div>
- <h1>-<h6>
- <p>
- <form>
- <header>
- <footer>
- <section>

👉Inline elements

- <span>
- <a>
- <img>

🎠display:none
none을 할 경우, 요소가 숨겨지고 해당 요소가 없는 것처럼 표시
🎠visibility:hidden
이것 또한 요소를 숨김. but 이것은 여전히 이전과 동일한 공간을 차지함. 요소는 숨겨지지만 여전히 레이아웃에 영향을 미침.

🤩combinators

• div p: div태그안(자손)에 존재하는 p라는 태그를 선택하라(자식포함)(복수)
• div > p: div태그안에 존재하는 자식 p라는 태그를 선택하라(복수)
• div + p: div태그 바로 다음에 오는 p태그(단수)
• div ~ p: div태그 뒤에 나오는 p태그들(복수)

🤩Pseudo-classes

Pseudo-classes 맨 아래 태그들

🤩참고

w3schools