HTML 기초 코드
div
<div>
</div>
단락을 구분짓는 태그로 코드의 기본적인 묶음을 담당합니다.
h1 ~ h5
<h1>TITLE</h1>
대개 글의 타이틀이나 글의 문단을 나타내는 곳에 사용하는 코드로 h1 ~ h5는 미리 CSS를 정해두고 코드를 제작하시면 제작속도를 향상시키 실 수 있습니다.
p
<p>
오늘 하루도 행복하세요.
</p>
문장을 묶어주는 태그로 사용됩니다. 주로 문장의 상단과 하단에 공백을 주기위해 사용을 하는 코드로써 p 태그는 사용 전 CSS에서 상단 하단의 공백 양을 미리 정해주시면 좋습니다.
span
<p>
오늘도 좋은 <span>하루</span>되세요.
</p>
특정 단어에 강조를 하고 싶거나 단어별로 쪼개어 스타일을 꾸미고 싶을 때 사용하는 태그입니다.
a
<a href=""></a>
클릭시 링크를 이동시켜주는 태그로 href를 함께 사용하며 a 태그를 클릭시 href에 들어간 주소로 페이지를 이동(리다이렉트)시킵니다.
img
<img src="" alt="">
사진을 불러오는 코드로 src에 이미지 위치를 넣고 alt는 이미지를 설명하는 글을 적어줍니다.
video
<video src=""></video>
이미지와 비슷한 형식으로 사용됩니다. src에는 비디오의 위치를 넣어주시면 됩니다.
audio
<audio src=""></audio>
비디오와 비슷한 형식으로 사용됩니다. src에는 오디오의 위치를 넣어주시면 됩니다.
table
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
박스형 테이블을 만들 때 사용하는 태그로 엑셀형식 혹은 자료 정리·나열 시 사용되는 태그입니다.
list
<ul>
<li></li>
</ul>
리스트를 표현할 때 사용되는 태그입니다. ul 안에 li가 감싸주어 표시가 CSS변경이 없다면 자동으로 들여쓰기가 되어있습니다. 다른 코드들로도 리스트를 구현할 수 있지만 모든 태그들을 동일하게 사용하면 수정 및 개발 시 해당 코드가 어떤 분류인지 확인이 어렵기 때문에 list는 ul 태그로 구분을 지어야지 코드 작성·관리에 편리합니다.
HTML 코드는 몇 번만 사용하다보면 익숙해집니다. 하지만 분류의 습관이 잘못 들면 고치기 정말 어려워요.
처음부터 차근차근 용도에 맞는 코드를 사용하셔서 가독성이 좋은 코딩 습관을 들이는 것이 중요합니다!
이 포스트는 가장 많이 사용되는 HTML태그를 기재한 것이지 모든 HTML 태그를 기재하지 않았습니다.
HTML태그들 중에 설명이 길어지는 글 같은 경우에는 별도의 포스팅으로 보다 자세히 글을 작성하겠습니다.
오늘도 좋은 하루 되세요 😁
'프론트엔드 🐣 > HTML' 카테고리의 다른 글
HTML: 폼(FORM)의 기능과 구현 (8) | 2023.03.05 |
---|---|
HTML 기본 틀 (0) | 2023.03.05 |