📌 HTML이란
HTML(Hyper Text Markup Language)
HT(Hyper Text) : 문서와 문서가 링크로 연결되어 있다.
M(Markup) : Markup, 태그로 이루어져 있다.
L(Language) : 언어
Markup : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지
📌 HTML 해보기
코드 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>section tag</section>
<div>div tag</div>
<p> p tag를 사용해 볼까요?</p>
<img
src="https://t1.daumcdn.net/cfile/tistory/99BDD14D5BB078DA14" alt="풍경사진" width="300px"/>
<a href="www.google.com">구글</a>
<button>버튼</button>
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>
<ol>
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ol>
<label for="input">이름</label>
<input id="input" type="text" placeholder="이름입력"></input>
<input id="한식" type="radio" name="음식"></input>
<label for="한식">한식</label>
<input id="중식" type="radio" name="음식"></input>
<label for="중식">중식</label>
<br>
<input id="남자" type="checkbox"></input>
<label for="남자">남자</label>
<input id="여자" type="checkbox"></input>
<label for="여자">여자</label>
</body>
</html>결과 페이지
📌 Block vs Inline
Block
- 부모 요소의 전체 공간 차지한다.
- 새로운 줄에서 시작, 좌우 양쪽으로 최대한 늘어난다.
- 종류 : div, h1, p
Inline
- 요소를 구성하는 태그에 할당된 공간만 차지
- 종류 : span, img, a, strong
📌 시맨틱 마크업
왜 사용하는가 ?
- 검색엔진 최적화
- 접근성
- 유지 보수
📌 HTML Emmet
- 자동완성 : tab div(tab입력)
- 텍스트 : {} div{안녕하세요}
- 자식(하위)요소 : > div>div
- 형제 요소 : + div>p+div
- 올라가기 : ^ p^div
- 반복하기 : ul>li3
- 그룹화 : () ul>(li>a)*2
- 클래스 : . div.className
- 아이디 : # div#idName
- 속성 : [attr] img[alt="이미지"]
- 넘버링 : $ div.item$*4
BE 공부 블로그입니다