til 30.

✅ 학습 목표

• CSS 선택자 전체 복습 및 고급 선택자 활용
• HTML 구조에서 block/inline 성격 이해 확장
• 이미지, 하이퍼링크, 입력 태그에 대한 실습 복습
• Netflix 스타일의 레이아웃 제작 실습

---

1. CSS 선택자 복습 정리

✅ 기본 선택자

• 태그 선택자 div {}
• ID 선택자 #id {}
• 클래스 선택자 .class {}
• 전체 선택자 * {}

✅ 속성 선택자

[name="value"]     /* 정확히 일치 */
[name~="value"]     /* 띄어쓰기 기준 단어 포함 */
[name|="value"]     /* value 또는 value- 시작 */
[name^="value"]     /* 시작하는 값 */
[name$="value"]     /* 끝나는 값 */
[name*="value"]     /* 포함된 값 */

✅ 구조 선택자

• :first-child, :last-child, :nth-child(n), :nth-last-child(n)
• :first-of-type, :last-of-type, :nth-of-type(n), :nth-last-of-type(n)
• :not(selector) : 부정 선택자

✅ 상태 / 반응 선택자

• :hover, :active, :focus, :checked, :enabled, :disabled

✅ 동위 선택자

• A + B: A 바로 뒤 B 선택
• A ~ B: A 이후 모든 B 선택

✅ 특수 선택자

• :only-child: 부모의 유일 자식
• :only-of-type: 특정 태그가 하나만 존재 시 적용

---

2. HTML block vs inline 태그 복습

구분	block	inline
줄바꿈	O	X
크기 지정	width/height 가능	불가능
대표 태그	div, p, section	span, a, img

✅ 가운데 정렬

• block: margin: 0 auto;
• inline: text-align: center; (부모에 적용)

---

3. 이미지 태그 <img> 복습

<img src="../images/cats/cat1.jpg" alt="설명" width="200" height="200">

속성 요약

• src, alt, width, height, title, style, draggable, usemap 등

---

4. 하이퍼링크 태그 <a> 복습

<a href="https://naver.com" target="_blank">네이버 이동</a>

속성 요약

• href, target, title, download, rel, type, hreflang, media, accesskey, tabindex

앵커

<a href="#section1">이동</a>
<h2 id="section1">섹션1</h2>

---

5. 입력 태그 <input>과 <form> 복습

✅ <input> 주요 type

• text, password, email, tel, url
• number, range, color, file
• checkbox, radio, submit, button, hidden

✅ <form> 기본 구조

<form action="submit.php" method="post">
  <input type="text" name="username">
  <button type="submit">제출</button>
</form>

관련 태그

• <label for="id">, <fieldset>, <legend>
• <textarea rows cols>, <select>, <option>

---

6. Netflix 스타일 포스터 배치 실습

✅ HTML 구조 예시

<div class="poster-box">
  <p>1</p>
  <div><img src="../images/harrypoter/해리포터.webp"></div>
</div>

✅ CSS 핵심

.poster-box {
  position: relative;
  display: inline-block;
  margin: 0 50px;
  text-align: center;
}
.poster-box img {
  width: 200px;
  display: block;
}
.poster-box p {
  font-size: 150px;
  color: black;
  -webkit-text-stroke: 5px white;
  position: absolute;
  bottom: 0;
  left: -50px;
  margin: 0;
}
body {
  background-color: black;
  text-align: center;
}

---

📘 느낀점

• 다양한 CSS 선택자 유형을 실제로 적용하며 조건별 선택 차이를 이해함
• block과 inline 요소의 렌더링 차이를 시각적으로 익힘
• HTML 구조를 통해 시멘틱 요소와 시각 표현 방법 간의 관계를 파악
• Netflix 스타일 레이아웃을 구현하며 CSS position 및 text-stroke에 대한 실습 경험을 쌓음