HTML 이란?
HTML 이란 Hyper Text Markup Language 의 약자입니다.
여기서 Markup Language 란 Programming Language 랑은 다르게, 특정한 논리를 가지고 작동하는 프로그램을 작성하기 위한 것이 아니라, 특정한 데이터를 표시하는 방법을 기술하는 언어를 말합니다.
그래서 HTML을 작성한다는 것은,
코딩한다고 하는것 보다는 문서를 작성하는 것이라고 볼 수 있습니다.
HTML의 태그의 형태
HTML 은 기본적으로 아래와 같은 형태를 가집니다.
<태그이름> 내용 </태그이름>
(여는 태그 뒤엔 항상 닫는 태그가 있습니다)
태그를 감싸는 이유는
1. 해당 요소/내용이 어떤 용도로 작성된 것인지를 명시
2. 해당 요소/내용을 사용자에게 더 잘 보여줄 수 있도록 표시
가 있습니다.
HTML의 태그
html, head, body 태그
HTML 문서의 가장 기본적인 형태는 아래와 같습니다.
HTML 태그 안에, head 태그와 body 태그가 존재하는 형태입니다.
그리고 그 안의 head 태그는 해당 문서의 큰 틀을 정의하는 부분입니다. 브라우저에 표시되는 해당 사이트의 아이콘, 제목 등이 바로 head 태그에서 정의되는 것입니다. 이외에도 어떤 css 파일과 연결할지 등을 여기에다가 작성합니다.
div 태그
<div>
div태그입니다!
</div>div 태그는 요소들을 구분하기 위한 태그입니다.
스타일 속성이 적용되어 있는 것은 아니고, 그냥 관념적으로 효율적인 개발을 위해서 만들어진 태그입니다!
💡HTML 태그 중에서 가장 사용 빈도가 높고, 중요성이 매우 높은 태그입니다.
h, p 태그
p 태그는 paragraph (문단) 을 표현하기 위한 태그로, 웹사이트 내에서 글자를 표현할 때 가장 기본적으로 사용하는 태그입니다.
<p>안녕하세요</p>h 태그는 제목을 표현하기 위한 태그로, 웹사이트 내에서 제목을 표현할 때 사용하는 태그입니다. 글자 크기 자체가 커지면서 볼드체가 되는 효과도 있지만, 해당 글자가 제목이라는 것을 표현하기 위한 의도도 있습니다.
h 태그는 폰트 크기에 따라서 h1 ~ h6 이 존재하고, h1 이 글자 크기가 가장 크고, h6 이 글자 크기가 가장 작습니다.
<h1>가장 큰 글자</h1>
<h2>다음으로 큰 글자</h2>
<h3>다음으로 큰 글자</h3>
<h4>다음으로 큰 글자</h4>
<h5>다음으로 큰 글자</h5>
<h6>가장 작은 글자</h6>strong, b, i, em 태그
<strong>강조된 글자</strong>strong 태그, b 태그는 글자를 강조하기 위한 태그입니다.
💡태그의 이름은 단순히 기능적인 부분을 떠나서, 어떤 용도인지 표시하기 위한 의미도 있습니다
<em>강조된 글자</em>em 태그, i 태그는 글자를 기울이기 위한 태그입니다.
둘 다 시각적으로 표시되는 것은 동일하지만, i 는 주변의 글자와 구분해서 기울임 표시를 하고 싶을 때, em 은 해당 텍스트를 강조하고 싶을 때 사용합니다.
hr, br 태그
<hr>hr 태그는 간단한 가로줄을 표시하기 위한 태그입니다. 단순히 가로줄을 표시하는 것에 더해서, 주제가 분리되거나 전환된다는 의미까지도 포함하고 있습니다.
특이한 점은 hr 태그는 안에 내용을 작성하지 않기 때문에, 닫는 태그가 없다는 것입니다!
<p> 줄바꿈<br>해보겠습니다 </p>br 태그는 줄바꿈을 위한 태그입니다. 줄바꾸고 싶은 부분에
을 작성하시면 됩니다.
a, img 태그
<a href="https://velog.io/@kyudeveloper">경규 블로그로 바로가기</a>a 태그는 클릭 시 다른 페이지로 연결시켜주는 요소입니다.
a 태그 사용 시에는 아래처럼 href 안에 연결시켜주고자 하는 주소를 명시해주셔야 합니다!
<img src="파일명 또는 이미지 주소 " alt="pikachu">img 태그는 이미지를 표시하기 위한 태그입니다.
img 태그 사용 시에는 src 에 이미지 파일명 혹은 주소를 명시해주시면 됩니다.
input, form, button 태그
<input type="text">input 태그는 사용자로부터 글자 등을 입력받기 위해 사용하는 태그입니다.
img 태그와 마찬가지로 우리가 특정한 글자를 태그 안에 써서 표시하는 것이 아니기 때문에, 닫는 태그는 없습니다!
type으로는 button, checkbox, date, file, radio, submit 등이 있습니다.
- password 입력할 때 ** 로 표시되도록 하기 위해 사용합니다.
- button input 태그 안에 value=”버튼안에 들어갈 내용” 를 작성하면, 해당 내용을 가진 버튼이 만들어집니다.
- checkbox 여러 개의 값을 선택할 수 있도록 할 때 사용합니다.
- date 날짜를 선택하도록 할 때 사용합니다.
- file 파일을 업로드할 때 사용합니다.
- radio 여러 개의 값 중에서 하나만 선택하도록 할때 사용합니다.
- submit form 태그 안에서 쓰면, form 태그 안에 묶여있는 모든 Input 값들을 특정한 곳으로 전송(제출)합니다.
<form>
<input type="text" name="id">
<input type="password" name="pw">
</form>form 태그는 input 태그를 한 곳에 모아서 하나의 입력 양식을 만들기 위해 사용하는 태그입니다.
<button>버튼</button>button 태그는 button 을 만들기 위한 태그입니다.
(나중에 자바스크립트와 함께, 버튼을 누르면 특정한 동작을 하도록 구성할 때 사용을 합니다.)
table, tr, th, td 태그
<table>
<thead>
<tr>
<th colspan="2">헤더</th>
</tr>
</thead>
<tbody>
<tr>
<td>첫번째 행</td>
<td>안녕</td>
</tr>
<tr>
<td>두번째 행</td>
<td>좋네요</td>
</tr>
</tbody>
</table>table 태그는 HTML 문서 내에서 표를 만들 때 사용합니다.
thead, tr, th, tbody, td 태그와 함께 사용됩니다.
tr 태그는 표에서 하나의 행을 만들때 사용하고,
그 안에서 헤더를 표시하기 위한 것이라면 th 태그를, 내용을 표시하기 위한 것이라면 td 태그를 사용합니다.
ol, ul, li 태그
<ol>
<li>vscode 를 실행한다.</li>
<li>html 파일을 만든다.</li>
<li>내용을 작성한다.</li>
<li>완성.</li>
</ol>ol 태그는 ordered list 의 약자로, 순서와 함께 정렬된 목록을 표시할 때 사용합니다.
<ul>
<li>우유</li>
<li>커피
<ul>
<li>아메리카노</li>
<li>라떼</li>
</ul>
</li>
</ul>ul 태그는 순서없이 목록을 표시할 때 사용합니다.
HTML 시맨틱 태그란
시맨틱 태그의 개념
시맨틱 태그 (Semantic Tag) 란 태그 자체적으로 의미가 있는 태그를 사용하는 것입니다.
h, p, form 등 태그만 보아도 안의 내용이 무엇일지 유추가 가능하도록 작성되는 태그를 말합니다.
이렇게 태그의 용도에 알맞게 작성하게 되면,
- 웹사이트의 SEO(검색 엔진 최적화)를 할 수 있습니다.
- 다른 개발자가 태그만 보더라도 쉽게 유추할 수 있습니다.
스타일에 관계없이 우선은 내용에 알맞은 HTML 태그를 쓰는 것이 올바른 HTML 작성 방법입니다.
→ 즉, 작은 글자로 제목을 표시하고 싶어도 우선은 h 태그를 사용하고, css 를 통해서 해당 부분의 글자 크기를 줄이는 것이 올바른 작성 방법!
HTML 문서를 작성할 때는, 전체적인 구조를 아래와 같이 작성하는 것이 가장 이상적입니다.
https://developer.mozilla.org/ko/docs/Glossary/Semantics
header 태그를 통해 사이트의 제목을 표시
nav 태그를 통해 사이트의 메뉴를 표시
main 태그를 통해 사이트의 본문을 표시
section 태그를 통해 특정 부분의 제목을 표시
article 태그를 통해 세부적인 주요 글 등을 표시 / aside 태그는 보조적인 글 등을 표시
footer 태그를 통해 본문은 아니지만, 관련된 출처 등의 정보를 표시
