Overview
Hypertext Markup Language
Image, title, link, sidebar, date, list 등 화면에 표시되는 content를 정의하는 markup 언어
HTML은 tag로 브라우저에게 content의 유형을 알려준다.
Tag에는 attribute를 사용해서 다양한 기능을 추가 및 확장시킬 수 있다.
Tag와 attribute를 올바른 content에 올바른 위치에서 올바른 방법으로 사용해야 브라우저가 이해하고 원하는 대로 content를 화면에 표시해 줄 수 있다.
Tag의 종류는 굉장히 많으므로 다 외우려고 하면 안된다.
공식 문서를 찾아보거나 구글링을 통해 필요한 tag를 찾아서 사용할 수 있으면 된다.
어떤 tag를 외우고 있는지보다 HTML이 브라우저에서 어떤 원리로 적용되는지 이해하는게 더 중요하다.
추천 : MDN HTML element reference
Structure
HTML 파일의 전체 구조
<!DOCTYPE html>
<html>
<head>
<meta content="content">
</head>
<body>
<h1>Hello!</h1>
</body>
</html>- <!DOCTYPE html> : HTML 문서임을 브라우저에게 알려준다. 항상 첫 줄에 있어야 함
- head : Website의 환경 설정 및 눈에 보이지 않는 content를 정의하는 container (e.g. 탭에 표시되는 website 제목, favicon 이미지, 구글 검색 시 표시되는 문구 등)
- body : Website에 실제로 표시되는 content들을 정의하는 container (e.g. image, header, list 등)
Tag
브라우저에게 '여기부터 여기까지가 image야 or title이야'와 같이 알려주기 위해 tag를 사용한다.
이 때, 항상 같은 tag로 닫아야 한다.
<tagname>content</tagname>Content가 필요하지 않은 tag self-closing tag라고 하며 아래와 같이 사용한다.
<img src="logo.png" />Tag attribute
Tag의 기능을 추가 및 변경할 때 사용하는 것. '속성'
모든 tag에서 사용할 수 있는 attribute도 있고, (e.g. id, class 등)
특정 tag에서만 사용할 수 있는 attribute도 있다. (e.g. src, value 등)
'id' attribute는 모든 tag에 사용할 수 있다.
특정 tag를 고유하게(unique) 식별해야 하므로, id는 중복되지 않아야 한다.
Semantic tag
HTML tag 중에는 그 자체로 아무 의미가 없는 tag들이 있음
Semantic tag는 그 자체로 의미를 가지는 tag로, 문서만 보고도 어떤 content인지 파악하기 쉬움
'<div>'는 영역을 구분해 주는 container box
과거에는 <div id="header"> 처럼 div tag를 무분별하게 사용했고, 코드만 보고서는 어떤 content인지 파악하기 어려웠음
<div> 대신 <header>, <footer>, <navigation> 등과 같은 semantic tag를 사용해야 사람이 코드를 쉽게 읽고 이해할 수 있다.
Semantic tags 예시 (MDN reference)
- <div>로 치환할 수 있는 tag : <header>, <main>, <footer>, <navigation>, <aside>, ...
- <span>으로 치환할 수 있는 tag : <address> (짧은 주소 text를 쓸 때, <span> 대신 <address> 사용)
- <p> : 긴 문장에 사용 (paragraph)
Tags and attributes examples
Headers
- <h1> ~ <h6>
- Title 형식으로 바꿔줌
<h1>Hello!</h1>
<h2>Hello!</h2>
<h3>Hello!</h3>
<h4>Hello!</h4>
<h5>Hello!</h5>
<h6>Hello!</h6>List
- <ol> : ordered list
- <ul> : unordered list
- <li> : list item
- <ol> 또는 <ul> 안에서 <li> tag를 사용해야 정상적으로 list가 표시된다.
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul><a>
- anchor의 약자
- attributes
- href : hyperlink reference. 이동할 URL address
- target : 이동할 page가 열리는 곳 지정. 기본값 '_self'
- _self : 현재 탭에서 새 page를 연다.
- _blank : 새 탭을 열어서 page를 연다.
<a href="https://www.google.com" target="_blank"><img>
- self-closing tag
- src : image address or local path
<img src="https://someimageprovider.com/image.png" />
<img src="img/logo.jpeg" /><meta>
- self-closing tag
- 이 website의 부가 정보를 입력함
- attributes
- name : meta data를 찾을 때 사용하는 이름 (e.g. "description"은 구글 검색 시 description으로 보여줄 text를 의미)
- content : meta data
- charset : 이 page에서 사용할 text encoding 형식 지정
<meta content="lifestyle" name="description" />Form
- <form> container 안에 control tag들을 사용
- <input> : 키보드 입력을 받는 control
- 'type' attribute를 변경해서 여러 가지 input control을 사용할 수 있음
- "text" : 문자 입력
- "date" : 날짜 입력
- "file" : 파일을 업로드할 수 있는 버튼이 생성되고, 버튼을 누르면 파일 선택 modal이 나타남
- <label> : 사용자가 선택할 수 있는 control에 title을 달아줌
- <label>의 'for' attribute와 다른 control의 'id' attribute를 동일하게 작성해서 두 control을 연결함
- <label> element를 선택했을 때 연결된 다른 element가 focusing됨
<form>
<input type="button" value="Button" />
<input type="color" />
<input type="password" />
<!-- label의 for와 input의 id에 들어가는 값이 같으면 두 tag가 연결됨 -->
<label for="website">Website</label>
<input id="website" required placeholder="Name" type="email" />
<input placeholder="Name" type="text" />
<input type="range" />
<input type="date" />
<input required type="submit" value="Create Account" />
</form><div>
- 브라우저는 content들을 가로로 이어서 배치함
- Container로 section을 분리해 주어야 세로로 배치할 수 있다.
- 서로 다른 <div>로 감싸져 있는 content들은 다른 행으로 배치된다. => 세로로 배치됨
<div>
<h1>Hello!</h1>
</div>
<!-- Div와 같은 역할을 하는 semantic tag -->
<footer>
© 2023 cskime
</footer>'개발 공부 > Frontend' 카테고리의 다른 글
| [노마드코더 코코아톡 클론] Introduction (0) | 2023.11.20 |
|---|