til 29

✅ 학습 목표

• CSS 특정 요소 선택자(:only-child, :only-of-type) 이해
• HTML의 block, inline 영역 이해 및 구분
• 이미지, iframe, 하이퍼링크, 입력 폼 관련 태그 실습 및 정리

---

1. CSS 특정 요소 선택자

:only-child

• 부모 요소의 유일한 자식 요소일 때만 스타일 적용

#test1 > p:only-child {
  background-color: orange;
}

:only-of-type

• 부모 자식 중 해당 태그 타입이 유일한 경우 적용

#test2 > p:only-of-type {
  background-color: red;
}

---

2. HTML 영역 관련 태그

✅ block 형식

• 새로운 줄에서 시작, 쌓이는 형태
• width/height 지정 가능
• 대표 태그: div, h1~h6, p, ul, li, section, article 등

✅ inline 형식

• 줄 바꿈 없이 옆으로 나열
• 크기 지정 불가
• 대표 태그: span, a, img, strong, label, input 등

✅ 차이점 요약

구분	block	inline
줄바꿈	O	X
크기 지정	가능	불가
정렬	margin: 0 auto 사용 가능	text-align 필요

---

3. iframe 태그

<iframe src="05_표연습문제.html" width="800" height="1000"></iframe>

• 다른 웹 문서를 삽입하는 태그
• width, height 지정 가능
• src로 문서 경로 지정

---

4. 이미지 태그 <img>

<img src="../images/cats/cat1.jpg" alt="이미지1" width="200" height="200">

주요 속성

• src: 이미지 경로 (상대/절대)
• alt: 대체 텍스트
• width, height: 픽셀(px) 또는 %
• title: 마우스 오버 툴팁
• style, class, id: CSS 적용용

웹 이미지 예시

<img src="https://images.unsplash.com/...">

---

5. 하이퍼링크 태그 <a>

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

주요 속성

• href: 링크 주소
• target: 링크 열리는 위치 (_self, _blank 등)
• download, rel, title, type, hreflang, media, accesskey, tabindex 등 다양한 속성

이미지 클릭 시 링크

<a href="https://www.naver.com">
  <img src="../images/cats/cat1.jpg">
</a>

페이지 내 앵커 이동

<a href="#cat1">고양이1</a>
<img id="cat1" src="...">

---

6. 입력 태그 <input>

<input type="text" name="username" placeholder="아이디 입력" required>

입력 타입

• 텍스트: text, password, email, url, tel
• 숫자: number, range
• 날짜/시간: date, time, datetime-local, month, week
• 선택: radio, checkbox
• 기타: color, file, submit, reset, hidden, button

공통 속성

• name, value, placeholder, required, disabled, readonly, maxlength, pattern

---

7. 폼 태그 <form>

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

속성

• action: 전송 대상 URL
• method: get / post
• target, name

관련 태그

• <label for="id">: 입력 필드 연결
• <button type="submit/reset/button">
• <fieldset> + <legend>: 그룹화
• <textarea rows="4" cols="30">: 다중 라인 입력
• <select> + <option>: 드롭다운 목록

---

📘 느낀점

• CSS에서 특정 요소만 선택하는 :only-child와 :only-of-type 선택자의 조건 이해
• block vs inline의 개념과 시각적/스타일링 차이 실습으로 명확히 구분
• iframe, 이미지 삽입, 하이퍼링크 연결 등 HTML 중급 요소를 익힘
• 다양한 input과 form 요소의 속성과 역할을 정리함으로써 사용자 입력 UI 구성 능력 향상