본문 바로가기
HTML

[HTML] HTML 작성 법

by lmyourpearl 2025. 12. 14.

HTML(HyperText Markup Language)은 웹페이지의 구조와 의미를 정의하는 마크업 언어로, 텍스트, 이미지, 링크, 표 등 웹 콘텐츠를 체계적으로 구성하며 웹 브라우우저가 내용을 이해하고 표시하도록 하는 웹의 가장 기본적인 언어입니다. '하이퍼텍스트'는 링크로 연결된 문서 기능을, '마크업'은 태그를 사용해 콘텐츠에 의미를 부여하는 것을 뜻하며, CSS(디자인)와 JavaScript(동작)와 함께 웹사이트를 만듭니다. 

 

주요 특징

  • 구조화: 제목(<h1>), 문단(<p>), 목록(<ul>, <li>) 등으로 콘텐츠의 계층 구조를 만듭니다.
  • 의미 부여: 특정 텍스트를 강조하거나(), 이미지를 삽입()하는 등 태그를 사용해 의미를 부여합니다.
  • 하이퍼링크: <a> 태그를 이용해 웹페이지 간의 연결(하이퍼링크)을 가능하게 합니다.
  • 프로그래밍 언어 아님: 복잡한 로직을 처리하는 프로그래밍 언어와 달리, 문서의 '구조'를 만드는 언어입니다. 

 

HTML의 역할

  • 뼈대: 웹페이지의 내용과 구조를 만드는 뼈대 역할을 합니다.
  • CSS와의 관계: CSS(Cascading Style Sheets)가 HTML 구조를 예쁘게 꾸며주고, JavaScript가 동적인 기능을 더해줍니다.

 

  • 태그로 마크업하기

         <태그명> ~ </태그명>

         시작 태그에서 종료 태그까지의 한 묶음을 요소라고 하며 태그는 영숫자로 씀.

 

  • 속성 추가하기

        <태그명 속성명(부가정보) = "속성값(내용)"> ~ </태그명>

        ex) <a href = "주소"> 검색하기 </a>

 

 

HTML 기본 틀

<!DOCTYPE html>	
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p> 안녕하세요 </p>
</body>
</html>
태그 설명
<!DOCTYPE html> 문서가 HTML5 형식임을 선언
<html> ~ </html> HTML 문서의 시작과 끝을 나타냄
<head> ~ </head> 브라우저가 문서를 읽을 때 필요한 정보를 알려주는 부분
<meta charset="UTF-8"> 문자 코드를 UTF-8로 지정.(문자 깨짐 방지)
<title> ~ </title> 페이지의 타이틀을 작성.(브라우저의 탭에 표시 됨)
<body> ~ </body> 사용자에게 보여줄 콘텐츠를 작성하는 부분

 

 

  • 제목 마크업하기

       <h1> ~ </h1>

       <h1>에서 <h6>까지 있으며 h1이 제일 크고 굵으며 h6가 보통 크기,굵기의 문자

 

  • 단락 마크업과 줄바꿈

       <p> ~ </p>

       paragraph로 단락(문장들의 모음)을 나타냄

       <br>

       break로 단독 태그로 사용하며 줄 바꿈 됨.

 

  • 목록 마크업
<ul>
  <li> ~ </li>
  <li> ~ </li>
</ul>

unordered list로 항목 간 순서가 없는 목록을 나타낼 때 사용

<ol>
  <li> ~ </li>
  <li> ~ </li>
</ol>

ordered list로 일의 순서,레시피,순위 등 항목 간 순서가 있는 목록을 나타냄

<dl>
  <dt> ~ </dt>
  <dt> ~ </dt>
</dl>

description list로 항목 이름과 항목 설명을 한 쌍으로 묶을 때 사용

 

 

  • 클릭 가능한 영역 마크업

      <a href="~"> ~ </a>

      anchor로 a 요소의 href 속성에는 링크 주소를 지정

 

  • 이미지 표시하기

       <img src="~" alter"~">

        src 속성에 이미지 파일의 위치를 지정. alt 속성에는 이미지가 표시될 수 없을 때 나타날 대체 텍스트를 지정

 

이미지의 종류

종류 설명
svg 형태가 복잡하지 않은 도형, 아이콘, 일러스트에 적합
고해상도 디스플레이 지원을 위해 사용이 늘고 있음
jpg 사진이나 그라데이션 등 색의 수가 많은 이미지에 적합
압축률이 높고, 파일 사이즈를 줄일 수 있음
png 단색으로 채워진 이미지나 선 중심 일러스트에 적합
WebP jpg보다 압축률이 높고, 동일 화질일 때 파일 사이즈가 더 작음

 

 

  • 강조하고 싶은 문장 마크업

       <em> ~ </em>

       emphasis로 텍스트를 강조하기 위한 효과를 부여

태그 설명
<strong> 경고문과 같이 긴급성,심각성, 중대성 강항 중요성을 나타낼 때 사용
<mark> 검색 결과에서 키워드를 표시하거나, 인용문에서 강조하고 싶은 부분을 나타낼 때 사용
<i> 등장 인물이 마음 속으로 하는 말, 외국어 구절, 기술 용어 등 주위의 내용과 톤을 구분하고 싶을 때 사용
<b> 기사의 요약문, 리뷰의 제품명 등 중요도가 높지 않지만 주목을 끌고 싶은 텍스트에 사용

 

  • 표 만들기
<table>
   <tr>
     <th> <th> <th>
    </tr>
    	<tr>
           <td> <td> <td>
        </tr>
        <tr>
           <td> <td> <td>
        </tr>
</table>

<table>로 표의 가장 바깥을 감싸고 표의 헤더 전체를 <thead>로 감쌈.

표의 각 행은 <tr>, 헤더 행의 셀은 <th>, 본문 행의 셀은 <td>로 감쌈.

 

  • 주소 마크업

       <address> ~ </address>

       연락처나 문의처를 나타내는 태그

티스토리툴바