반응형

⭐ 웹페이지 구조

<html>
	<head>
	( 부가적인 정보 )
	</head>
	<body>
	( 본문 내용 )
	</body>
</html>
  1. 주로 부가적인 정보 <head> </head> 태그 안에서 주로 쓰인다.
  2. 본문인 태그들은 <body> </body> 태그 안에서 쓰이고 있다.
  3. <html>태그는 <head>, <body> 태그를 감싸주는 역할로 약속을 해두었다.

❓ DOCTYPE

<!DOCKTYPE html>

DOCKTYPE은 이 브라우저에게 어떠한 표준을 따르고 있는 태그들인지를 알려주기 위함. ( 구조상 최상단에 위치 )

✅ 태그는 열고 닫는다?

<h1>오늘의 명언</h1>
	우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.

  • <strong>(텍스트)</strong> - 문자를 강조하게 표현한다. ( 텍스트 )
    • 파란 부분은 시작태그, 빨간 부분은 닫히는 태그
  • <h1>(제목)</h1> - h1 부터 h6까지 제목을 나타내는 태그.
  • HTML도 언어이기 때문에 규칙을 따라야 한다. 아무리 줄 띄어쓰기를 해도 변화가 없을 것임.

✅ 링크 연결 <a>태그

<body>
	<h1>오늘의 명언</h1>
	  우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
	  (<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" target="_blank" title="인물 정보" >도널드 커누스</a>) 
</body>

  • <a> </a> - 링크를 걸어두는 태그 (anchor의 약자)
    • 태그에는 속성이라는 기능을 가지고 있다.
    • href = “ (경로명) “ - 링크를 클릭시 해당 경로로 이동함.
    • target = “_blink” - 새로운 탭으로 열음.
    • title = “인물 정보” - 해당 태그에 마우스를 갖다대면, 툴팁을 보여줌.
    • 어떤 속성이 먼저 앞에 있든 뒤에 있든 순서는 중요하지 않음.

✅ 리스트 나열 <li>, 그룹핑 <ol>, <ul> 태그

<body>
  <ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
  </ol>

  <ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>
</body>

  • <li> </li> - 리스트를 나열 하는 태그 (list의 약자)
  • 주로 그룹핑할때 쓰이는 태그들로 <li>태그와 같이 쓰인다.
    • <ul> </ul> - 순서없이 나열하는 태그 (unordered list 약자)
    • <ol </ol> - 순서가 있게 나열하는 태그 (ordered list약자)

✅ 웹 페이지 제목 <title>과 문자 코드 맞추기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML - 수업소개</title>
</head>
<body>
  <h1>HTML</h1>
  <ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
  </ol>

  <h2>선행학습</h2>
  <p>
    본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된<br>
    수업은 아래 링크를 통해서 접근하실 수 있습니다.
  </p>
</body>
</html>

해당 부분들은 위 태그들과 다르게 부가적인 태그들이다.

  • <title>(제목)</title> - 웹 페이지의 제목을 설정하는 태그

글씨가 깨지는 경우가 있다.

  • **<meta charset=”UTF-8”>**로 지정한다.

✅ 단락 <p>태그

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>[1] Hypertext Markup Language (HTML) is the standard markup language[a] for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
  <p>[2] Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.</p>
</body>
</html>

<p> </p>태그는 paragraph의 약자로, “단락” 을 의미한다. 주로 텍스트의 단락을 구분할때 쓰인다.

 

✅ 줄바꿈 <br>태그

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>[1] Hypertext Markup Language (HTML) is the standard markup language[a] for documents designed to be displayed in a web browser.<br> It defines the content and structure of web content.<br><br>It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
  <p>[2] Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.<br> HTML describes the structure of a web page semantically and originally included cues for its appearance.</p>
</body>
</html>

<br>태그는 A forced line-break의 약자로, “강제로 줄을 바꾼다” 라는 의미를 가진 태그이다.

  • <br> 태그는 닫는 태그가 없다.
  • 두번쓰면 두번 줄바꿈되며, 선언한 태그 수에 따라 줄바꿈 처리된다.

✅ 이미지 <img>태그

pixa.bay.com - 이미지 생성 사이트 ( 저작권 X )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="./img/flowers1.jpg" alt="꽃 이미지" width="150" height="200">
</body>
</html>

<img> 태그는 웹 페이지에 이미지를 포함하는 태그를 말한다.

  • src = “경로” - 이미지의 경로를 설정한다.
  • alt = “(설명)” - 이미지를 불러올 수 없을때, 텍스트(설명)로 대체한다.
  • width , height - 가로, 세로 길이와 비율을 설정할 수 있다.
    • 가로 100은 100픽셀, 50%는 웹페이지의 50%크기를 의미.

⏰ 변천사와 통계

  • HTML 연대기
  • HTML 통계
 

HTML Study - AWR SEO Guide

This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.

www.advancedwebranking.com

 

주로 쓰는 HTML 태그들의 빈도 수를 나타낸다.

개발자들이 가장 많이 쓰는 태그들 위주로 학습하는 것이 좋을 것이고, 빈도수가 낮은 태그들은 검색해서 찾아서 쓰는것이 바람직하다.

반응형

'프로그래밍 > HTML,CSS' 카테고리의 다른 글

더 나아가, HTML5  (0) 2025.12.08
2. 표 만들기 (Table)  (0) 2025.11.19

티스토리툴바