✔︎HTML 구조
엘리먼트 : HTML 문서를 만들기 위한 재료
트리 구조 : 부모, 자식, 형제 관계를 가지는 데이터 구조
속성 : 엘리먼트의 기능을 확장
h
섹션, 문단의 제목을 나타내며 숫자가 작을수록 글자 크기가 커짐
h1
h2
h3
h4
h5
h6
p
하나의 문단을 만들때 사용
a
href : 이동할 주소 명시, target 속성을 사용해 링크가 열릴 위치 지정
기본값은 self로 _blank로 지정 시 새 탭에서 링크 열림
<a href="https://naver.com" target="_blank">네이버</a>span
문장에서 특정 부분 선택시 사용, 기능적 효과는 없으며 스타일 용도로 사용
br
breaking rule(줄 바꿈)
header
웹페이지의 최상단 부분으로 로고나 슬로건, 메뉴 등이 포함
nav(navigation)
현재 페이지 또는 다른 페이지의 특정 부분과 연결되는 네비게이션 링크 정의시 사용
메뉴, 목차 등에 사용
main
웹페이지의 메인 콘텐츠 정의시 사용
하나의 문서에는 main요소가 하나만 존재해야 하며 artice, aside, footer, header, nav요소의 자식 요소가 될 수 없음
section
독립적인 섹션을 정의할 때 사용
ul(unordered list), ol(ordered list)
순서가 없는 리스트 정의시에는 ul, 순서가 있는 태그 정의시에는 ol태그 사용
table
- 구성요소
| 요소 | 의미 |
|---|---|
| thead | table head |
| tbody | table body |
| tr | table row(행) |
| th | table heading(열 제목) |
| td | table data(셀) |
div
특정 영역이나 구역을 정의할 때 사용
레이아웃을 분할하는데 주로 사용되며 css와 함께 사용
footer
웹페이지의 최하단 부분으로 보통 저작권 정보, 개인정보 처리방침, 이용약관 참조 링크 등을 포함
form
클라이언트의 데이터를 서버에 전송하는 역할
- form
- action : 전송할 서버상의 주소 명시
- input
- type : 수집하고자 하는 정보의 상태에 따라 다양한 타입 존재(text, password, search...)
- name : 서버가 폼 데이터를 분류하는 기준
- placeholder : 입력해야하는 데이터에 대한 안내문구
- button
- form 제출
login form
- form
- method : 서버 요청 메소드(get, post, put, patch...)
- label
- label은 폼의 양식에 이름 붙이는 태그
- for : input과 연결하는 역할(input 태그의 아이디와 일치)
- 주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결
- input 등 양식을 label로 감싸면, id와 for가 없이도 같은 결과를 얻을 수 있음
<form action="/login.html" method="post">
<div>
<label for="username">아이디</label>
<input type="text" name="username" id="username">
</div>
<div>
<label for="password">비밀번호</label>
<input type="password" name="password" id="password">
</div>
<div>
<input type="checkbox" name="" id="show-password">
<label for="show-password">비밀번호 표시</label>
</div>
<button type="submit" id="btn1">로그인</button>
</form>img
- 구성요소
| 요소 | 의미 |
|---|---|
| src(source) | 첨부할 이미지의 주소, 경로 |
| alt(alternative) | 이미지에 대한 설명(이미지 없을 경우 이미지에 대한 설명으로 보여줌) |
| width | 이미지 너비 |
| height | 이미지 높이 |
svg (Scalable Vector Graphic)
수학적인 방법으로 그래픽 표현
확대하거나 크기 변경시에도 이미지가 깨지지 않음
로고나 아이콘 등을 표현할 때 사용
- 모양 종류
| 요소 | 태그 |
|---|---|
| 사각형 | rect |
| 정원 | circle |
| 타원 | ellipse |
| 선 | line |
| 다각선 | polyline |
| 다각형 | polygon |
| 패스 | path |
width, height 속성으로 크기 설정 가능
사각형의 x, y속성으로 x,y좌표값 설정
원 모양의 cx, cy속성은 원 중심의 x,y좌표 의미
값을 작성하지 않을경우 기본값(0,0)으로 정의
rx, ry속성은 x,y축 반지름 의미
<svg>
<ellipse
cx="100"
cy="75"
rx="90"
ry="60"
fill="#f00000"/>
<text
fill="#fff"
font-size="45"
x="40"
y="90">
LOGO
</text>
</svg>
시맨틱 태그
의미가 있는 태그
div, span 같은 태그는 태그명만 보고 어떤 내용인지 추측할 수 없지만, form, table, ul등 의미가 있는 태그는 내용을 명확하게 정의한다.
Html 로고 참조
https://cdn-icons-png.flaticon.com/512/919/919827.png
