- HTML이란?
HyperText Markup Language의 준말로, 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것이다. 이 중 '하이퍼텍스트(HyperText)'란 웹 사이트에서 링크를 클릭하면 다른 문서나 사이트로 이동할 수 있는 기능을, '마크업'이란 태그(tag)를 사용해 문서에서 어떤 부분이 제목이고 본문이고 사진이며 링크인지 표시하는 것을 뜻한다. 정리하면, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML인 것이다.
*태그(tag) - 마크업할 때 사용하는 약속된 표기법, 꺽쇠괄호(<>)로 묶인 부분
HTML은 우리가 현재 이용하고 있는 웹 사이트들에서도 확인이 가능하다.
1) 마우스 오른쪽 버튼 -> '검사' or '페이지 소스 보기'
2) 키보드 F12 -> 'Elements'
- HTML 쓰는 규칙
1. 태그는 소문자로 쓴다.
2. 여는태그와 닫는태그를 꼭 써준다.
3. 각 코드 한 줄 한 줄은 내용에 따라, 역할에 따라 적당히 들여쓴다.
- HTML 문서 기본 구조
1. <!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 표기
2. <html>~</html> : 웹 문서의 시작과 끝을 나타냄
3. <head>~</head> : 웹 브라우저가 웹 문서를 해석할 때 필요한 정보들을 표기하는 부분, 브라우저에는 나타나지 않음
*<title> : 문서 제목, 제목 표시줄에 표시됨
*<meta> : 메타 데이터(데이터에 대한 데이터)로, 웹 문서와 관련된 정보를 저장
4. <body>~</body> : 실제 웹 브라우저 화면에 나타나는 부분
- 텍스트를 블록(block)으로 묶어 처리하는 태그들
1) <h'숫자'> : 제목 표시 태그, 1이 가장 큰 제목이며 6이 가장 작은 크기의 제목이다. <h1>~<h6>까지 존재
2) <p> : paragraph의 줄임말. 단락 태그로, 줄바꿈 없이 태그를 한 줄로 표현
3) <br> : break의 줄임말. 줄 바꿈 태그
4) <hr> : horizontal의 줄임말. 수평줄 태그
5) <blockquote> : 인용문 태그
6) <pre> : preformat의 줄임말. 공백까지 있는 그대로 화면에 표시하는 태그
- 텍스트를 한 줄로 표시하는 인라인(inline) 레벨 태그들
1) <strong>, <b> : 텍스트를 굵게 표시. 화면 낭독기에서는 두 태그가 구분됨
2) <em>, <i> : 텍스트 기울임 태그. 각각 emphasis, italic의 줄임말
3) <q> : 인용 내용 표시 태그. <blockquote>와 달리 inline 태그이기 때문에 줄 바꿈 없이 한 줄로 표현됨
4) <mark> : 형광펜 효과를 낼 수 있는 태그
5) <span> : 줄 바꿈 없이 원하는 텍스트만 묶어 스타일을 주고자 할 때 사용하는 태그
6) <ruby> : 동아시아 언어의 발음 기호 등을 나타낼 수 있는 태그. 주석으로 표시할 내용을 <ruby>안에 <rt>태그로 표시
- 목록을 만드는 태그
1) <ul>, <li> : 순서 없는 목록을 만드는 태그. <ul>안에 <li>태그로 표시함
2) <ol>, <li> : 순서가 있는 목록을 만드는 태그. <ol>안에 <li>태그로 표시함
*type, start, reversed 속성을 통해 순서를 다양하게 변경이 가능함
3) <dl>, <dt>, <dd> : 각각 목록, 제목, 설명을 나타내어 설명 목록을 만드는 태그
- 표를 만드는 태그
1) <table>, <tr>, <td>, <th> : <table>로 표 자리를, <tr>로 행(가로줄)을, <td>로 셀(행과 열이 만나는 칸)을 만들 수 있는 태그
2) <th> : 첫 번째 행이나 셀에 제목을 만들 수 있는 태그
3) <colspan>, <rowspan> : 각각 행, 열을 합칠 수 있는 태그
4) <caption>, <figcaption> : 표에 제목을 만들 수 있는 태그. <caption>는 제목이 표의 위쪽 중앙에 정렬되어 나타나지만, <figcaption>은 figure과 caption의 합성어로, 위치를 자유롭게 설정할 수 있다.
*aria-describedby 속성 - 표에 대한 설명을 제목 아래 별도로 작성할 수 있는 태그. <table aria-describedby> 형태로 쓴다.
5) <thead>, <tbody>, <tfoot> : 표의 구조를 나누어 표시할 수 있는 태그
6) <col>, <colgroup> : 여러 열을 묶어 같은 스타일을 지정할 수 있는 태그
참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>
'TIL' 카테고리의 다른 글
| <CSS> 기초 개념 (0) | 2021.11.17 |
|---|---|
| <HTML> 기본 태그들 (2) (0) | 2021.11.16 |
| <자바 Java> 기본 API - StringTokenizer 클래스 (0) | 2021.11.14 |
| <자바 Java> 컬렉션 프레임워크(Collection Framework) (1) - List (0) | 2021.11.13 |
| <자바스크립트> Ajax (0) | 2021.11.12 |