HTML의 이해와 기본 구조, 문법
마크업 언어
자주 사용되는 요소: <div>, <span>, <ul>, <ol>, <li>, <input> 등
시맨틱 태그
HTML
HyperText Markup Language: 웹 페이지의 틀을 만드는 마크업 언어
마크업 언어란? 태그 등을 이용하여 문서나 데이터 구조를 표현한다
시맨틱 요소란? 자체에 의미를 가지는 요소, 속성을 보지 않고도 이름만 봐서 파악이 가능하다
이름에 의미를 붙여 부르는 태그
⚒️ 기본 구조와 문법
· Tag(부등호(<>)로 묶인 HTML의 기본 구성 요소)들의 집합
· Tree Structure: 문서 시작 → html ⊃ head, body
· SELF-CLOSING TAG: 닫는 태그가 없는 경우(태그 내부에 내용이 없는 경우)
<!DOCTYPE HTML> <!-- HTML 문서 선언 -->
<html> <!-- 문서 전체 틀 구성 -->
<head> <!-- 문서의 메타데이터 선언 -->
<title>Page title</title> <!-- 문서의 제목, 브라우저 탭에 보여짐 -->
</head>
<body> <!-- 문서의 내용을 담음 -->
<h1>Hello world</h1> <!-- heading -->
<div>Contents here <!-- content division, 줄바꿈 -->
<span>Here too!</span> <!-- 줄바꿈이 없는 content 컨테이너 -->
</div>
</body>
</html>
🍊 자주 사용되는 태그
| <div> | Division |
| <span> | Span |
| <img> | Image, 닫는 태그 X |
| <a> | Link |
| <ul> & <li> | Unordered & List Item |
| <input> | Input (Text, Radio, Checkbox) |
| <textarea> | Multi-line Text Input |
| <button> | Button |
| <p> |
문단 (작은 구역) |
| <section> | 큰 구역 구분 |
div VS. span
div: 한 줄을 차지
span: 컨텐츠 크기만큼 공간을 차지
<div>한 줄을 차지</div>
<span>컨텐츠 크기만큼 차지</span>
img
alt 속성: 이미지를 볼 수 없을 때 화면 판독기가 이를 읽어 준다
<img src="~.jpg" alt="sky">
<a>
적용한 target 속성: 링크가 새 창에서 열리게 한다
<a href="http://naver.com" target="_blank">네이버</a>
ul, li
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Item 3</li>
</ul>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Item 3</li>
</ol>
</ol>
input, textarea
라디오 타입은 둘 중 하나만 선택이 가능하다
때문에 name 속성을 이용해서 그룹 설정이 필요하다
<!-- 텍스트 박스, placholder 속성은 박스 내 짧은 도움말이다 -->
<div>
ID <input type="text" placeholder="type here">
</div>
<div>
Password <input type="password">
</div>
<div>
<input type="checkbox"> 다음에 들어올 때 ID 기억하기
</div>
<div>
<input type="radio" name="option1"> 옵션 A
<input type="radio" name="option2"> 옵션 B
</div>
<!-- 줄 바꿈이 가능하다 -->
<textarea></textarea>
button
<div>
<button>로그인</button>
</div>
p VS. section
🏀 연습
https://www.w3schools.com/html/html_exercises.asp
아래 표에서 부등호를 적용한 태그는 닫는 태그가 없음!
| <hr> | 가로 줄 |
| <br> | 줄 바꿈 |
| pre | 태그 사이 모든 공백과 줄바꿈 적용 |
'Etc > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 웹 앱 화면 설계하기 (0) | 2022.06.28 |
|---|---|
| [HTML & CSS] 페이지 레이아웃 (0) | 2022.06.28 |
| [HTML & CSS] CSS (0) | 2022.06.27 |
| [HTML & CSS] 웹호스팅(github pages) (0) | 2021.03.14 |
| [HTML & CSS] 웹사이트 완성 (0) | 2021.03.14 |
댓글