■ 기본
<태그>내용</태그>
<태그 속성="값">내용</태그>
<태그> <태그/> = 빈태그
HTML 1/2/3/4/5 vs XTML/HTML6
■ HTML 요소의 관계
<div>Contents</div>
부모요소 자식요소 상위(조상)요소 하위(후손)요소 형제요소
<div> <!--부모요소-->
<div>Contents</div> <!--자식요소-->
</div>
■ 글자와 상자
인라인 요소 : 글자 만들기 위한 요소
요소가 수평으로 쌓임
포함한 콘텐츠 크기만큼 자동으로 줄어듦
크기 지정 안됨
인라인 요소의 자식요소로 블록요소가 들어갈 수 없음
<span>Hello</span>
블록 요소 : 레이아웃(상자) 만들기 위한 요소
요소가 수평으로 쌓임
부모요소의 크기만큼 늘어남
<div>Hello</div>
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>제목1</h1> <!--블록요소-->
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
</html>
<ul> 순서가 필요없는 목록의 집합, unordered list
<li> 목록 내 각 항목, list item
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul> <!--블록요소-->
<li>사과</li> <!--블록요소-->
<li>사과</li>
<li>사과</li>
<li>사과</li>
</ul>
</body>
</html>
<a> 인라인요소 : 페이지로 이동하는 하이퍼링크 지정, anchor
target 적지 않으면, 현재 페이지에 덮어져서
예외로 블록요소 하나를 넣을 수 있다
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com"> target="_blank">Google</a>
</body>
</html>
<span> 인라인 요소 : 특별한 의미가 없는 구분을 위한 요소
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>
<span>동해물</span>과 백두산이 마르고 닳도록
</p>
</body>
</html>
<br/> 인라인 요소, 빈 태그 : 줄바꿈, break
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>
동해물과 백두산이<br/> 마르고 닳도록
</p>
</body>
</html>
<input> inline-block : 사용자가 데이터를 입력하는 요소
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" placeholder="이름 입력하세요" />
</body>
</html>
■ 전역 속성
style
class 요소를 지칭하는 중복 가능한 이름
id 요소를 지칭하는 고유한 이름
'Python' 카테고리의 다른 글
| week 05 - ch03. CSS (0) | 2022.08.04 |
|---|---|
| week5 - Ch01. 강의 개요 (0) | 2022.07.25 |
| d (0) | 2021.11.21 |
| 211112 파이썬 벼락치기 (0) | 2021.11.13 |
| 참고용 (0) | 2021.11.02 |