https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=5
유튜브 드림코딩으로 공부한 내용입니다.
🐚 기초
- 기본 코드를 자동완성 시키려면 ! 후 enter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- 기본적으로 head 와 body 두 부분으로 나뉘어져 있다. head 에는 기본 정보가 들어있고 사용자에게 노출되는 부분은 body 이다.
- 웹사이트는 대개 header, nav, aside, main, footer 로 나뉜다.
🐚 태그
- 아래 공식 문서를 참고하자
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
- 태그는 box 와 item 이렇게 두 가지로 분류할 수 있다.
Box는 header, section, article (반복되는 요소), div, span 등 섹션을 나누는 역할이다.
Item 은 a, button, input, video 등 사용자에게 직접 보여지는 것이다.
Item 은 다시 Block 과 Inline으로 나뉜다. Block은 한 줄에 하나씩 배치되고 Inline은 남은 공간이 있다면 같은 줄에 나란히 배치된다. <div> 가 대표적인 block이다.
0. 주석
<!--주석-->
1. 링크
<a> anchor tage
href는 hyper reference이다.
<a href="https://google.com" target=_blank> Click </a>
2. 텍스트
<p> paragraph
<b> bold
3. 리스트
<ol> ordered list
<ul> unordered list
ol>li*3 후 tab 누르면 다음과 같이 자동완성 된다.
<ol>
<li></li>
<li></li>
<li></li>
</ol>
4. input
<label for= "input_name"> Name: </label>
<input id="input_name" type="text">
input 창에 부여한 id와 동일한 이름을 label에도 명시해주면 좋다.
'FE > HTML , CSS' 카테고리의 다른 글
| [HTML] Emmet 문법 (1) | 2024.01.04 |
|---|---|
| [CSS] Layout 및 Flexbox (1) | 2023.12.30 |
| CSS 기초 및 셀렉터 (1) | 2023.12.28 |