2025년 7월 14일 (월)
7:59:27 PM
NEFFEX Chasing - NEFFEX
00:00
00:00
Buffering ...

최근 글 👑

자주 사용하는 HTML 기초 코드

2023. 3. 5. 11:31ㆍ프론트엔드 🐣/HTML
728x90

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태그들 중에 설명이 길어지는 글 같은 경우에는 별도의 포스팅으로 보다 자세히 글을 작성하겠습니다.

 

오늘도 좋은 하루 되세요 😁

728x90

'프론트엔드 🐣 > HTML' 카테고리의 다른 글

HTML: 폼(FORM)의 기능과 구현  (8) 2023.03.05
HTML 기본 틀  (0) 2023.03.05