쥬니어 기획자

[HTML] 기초 문법 본문

개발

[HTML] 기초 문법

jyuuni 2023. 9. 7. 10:58
반응형

HTML 기본 구조

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test page</title>
  </head>
  <body>
    ...
  </body>
</html>

html은 크게 <head>와 <body>로 나뉜다.

  • <!doctype html> : 브라우저에 선언하는 역할
  • <html> : 전체 html 문서를 감싸는 태그
  • <head> :html 문서에 대한 정보를 나타내는 부분입니다. 하나만 존재해야하고, html 바로 아래에 있어야 한다.
  • - <title> : head 안에 들어가는 태그로 제목표시줄의 내용을 나타낸다.
  • - <meta> : meta 역시 head 안에 들어가는 태그로 문서에 대한 설명을 표시한다. 기본적으로 한글로 작성할 때는 charset="utf-8"을 사용한다.
  • <body> : html 문서에서 실제적으로 화면에 보여지는 부분을 나타낸다. <head> 아래에 위치해야 한다.

 

웹페이지 안에 포함되는 <body> 부분을 조금 더 자세히 살펴보자.

<body>
    <div class="skin">
        안녕하세요
        <div>div를 쓰면 문단이 나눠져요.</div>
        <p>p 태그를 쓰면 문단이 분리돼요. </p>
        <h1>h1을 사용한 가장 큰 제목</h1>
        <h2>h2를 사용한 소제목</h2>
        <h3>h 뒤에 숫자가 커질수록 크기와 굵기가 작아진다 </h3>
        <div><a href="https://www.naver.com/"> 네이버로 가는 길 </a></div>
        <input type="text">
        <div class='button'><button> 버튼입니다 </button></div>

    </div>

</body>

html 문법에서는 각 문장을 태그로 감싸는 형식으로 이루어져 있다.

 

  • <p> - 하나의 문단을 나눌 때 사용
  • <h#> - h1,h2,h3 ... ,h6 까지 뒤로 갈수록 작은 제목 표기
  • <b> - 텍스트 굵게, <strong>과 유사 
  • <div> - 레이아웃을 나눌 때 사용, 여러 소스를 묶어 css로 한번에 적용해주기 위
  • <a> - 하이퍼링크 삽입, href :클릭 시 이동할 링크

 

 

이 외에도

  • <br> - 줄바꿈(break), 엔터 효과
  • <hr> - 가로 줄 표 삽입
  • <pre> - 입력한 문장 형태 그대로 브라우저에 표현.  엔터,탭,띄어쓰기 모두 그대로 반영됨
  • <img> - 이미지 태그, scr :이미지 파일 경로 , alt : 대체 텍스트를 포함하여 작성

등등.. 다양한 태그가 있다.

 

반응형

'개발' 카테고리의 다른 글

[개발공부가 필요한 기획자의 눈물] MCP vs A2A  (4) 2025.08.21
'개발' Related Articles more