html
: 웹 사이트의 모습을 기술하기 위한 마크업 언어 속성 - attribute
tag
- 기본 구성
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Document</title>
<style>
.hello{ color: red; }
</style>
</head>
<body>
<h1 class="hello" onclick="onClickHello()">Hello!</h1>
<script>
const onClickHello = () => { alert("Hello World!"); };
</script>
</body>
</html>| <!DOCTYPE html> | 웹 문서의 유형을 html로 지정 |
| <html> | 모든 html 태그들의 최상위 태그 |
| <head> | 해당 문서 정보의 집합을 넣는 곳 |
| <meta> | 메타 데이터 입력 |
| <title> | 웹 페이지 제목 |
| <style> | 스타일 정보 |
| <body> | 문서의 본문, 여기에 내용을 나타낸다. |
- 내용 입력
| <h1>, ... , <h6> | heading | 제목 |
| <p> | paragraph | 문단 |
| <br> | break | 줄바꿈 |
| <hr> | horizontal rule | 가로선 |
- 텍스트 효과
| <b> | bold | 굵게 (주의를 끌 때) |
| <strong> | strong | 굵게 (중요한 텍스트를 나타낼 때) |
| <i> | italic | 기울임꼴 (일반적인 산문에서 벗어났을 때) |
| <em> | emphasis | 기울임꼴 (콘텐츠를 강조할 때) |
| <u> | underline | 밑줄 |
| <s> | strikethrough | 취소선 |
- 문서 구조
| <header> | 머릿 영역 |
| <main> | 메인 영역 |
| <section> | 콘텐츠 영역 |
| <aside> | 사이드 바 영역 |
| <footer> | 꼬릿말 영역 |
- 영역 종류 구분
| <nav> | 네비게이션 영역 |
| <article> | 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 |
| <div> | 레이아웃을 나눔 |
| <figure> | 독립적인 콘텐츠 |
- 목록
| <ol> | ordered list | 순서가 있는 목록 |
| <ul> | unordered list | 순서가 없는 목록 |
| <li> | 목록 생성 | |
- 표
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>| <table> | 테이블 만들기 |
| <tr> | 행 삽입 |
| <td> | 열 삽입 |
| <th> | 열 삽입 (진하게) |
| <thead> | 표 제목 |
- <td>, <th> 행, 열 합치기
| rowspan="2" | 2개의 행 합치기 |
| colspan="2" | 2개의 열 합치기 |
- 이미지 삽입
<img src="이미지 파일 경로" alt="대체용 텍스트">| <img> | src= | 이미지 파일 경로 |
| alt= | 이미지가 안 보일 경우, 대체용 | |
| width= | 너비 크기 조절 | |
| height= | 높이 크기 조절 |
- 링크 삽입
<a href="링크할 주소">텍스트 또는 이미지</a>| <a> | href= | 링크 주소 |
| target="_blank" | 새 탭에서 열기 |