[웹 개발] HTML 기초 (2)

프로타쿠·2024년 6월 6일

웹 개발

목록 보기
2/21

<head>

제목 표시용이라고 이해하면 된다.

h1~6까지 있다.

<h1>Head 1</h1>
<h2>Head 2</h2>
<h3>Head 3</h3>
<h4>Head 4</h4>
<h5>Head 5</h5>
<h6>Head 6</h6>

<p>

하나의 문단을 나타낸다.

<br>
줄바꿈용 태그, <p> 안에서 뿐만 아니라, <body> 전체에서 쓸 수 있다.

<p>
    HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 언어로, 웹 페이지의 구조를 정의합니다. <br>
    HTML은 여러 요소로 구성되어 있으며, 각 요소는 브라우저에게 특정한 의미를 전달합니다.<br>
    HTML 문서는 일반적으로 시작 태그와 종료 태그로 이루어진 요소들의 집합으로 구성됩니다.<br>
<\p>

<a>

Anchor의 첫글자로, 하이퍼링크 역할을 한다.

  • 현재 웹 페이지 내부의 요소를 가리킬 수도 있고
  • 다른 웹 페이지로도 이동할 수 있다.
<!-- 내 유튜브 링크 -->
<a href="https://www.youtube.com/channel/UCvDlpDmdJhsHOhnrE5ptb5A">
  웹 페이지에 표시되는 Anchor의 모습
</a>

<a href="https://www.youtube.com/channel/UCvDlpDmdJhsHOhnrE5ptb5A"
   target="blank">
  새로운 페이지에서 열림
</a>

<span> & <div>

레이아웃을 지정하기 위한 태그. (자세한 차이는 나중에...)

<div> : 블록 영역
<span> : 인라인 영역

<div>
  &ltdiv&gt는 블록으로 취급됩니다.
</div>
<span>
  &ltspan&gt은 인라인으로 취급됩니다.
</span>

<img>

이미지 태그

<img src="(여기에 이미지 파일 경로)"
     alt="이미지를 띄울 수 없을 땐 이 문장을 표시합니다.">

<ol> & <ul> & <li>

리스트를 나타내는 태그들

<ol> : 순서가 있는 리스트을 의미함
<ul> : 순서가 없는 리스트을 의미함
<li> : 리스트의 아이템

<ol>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ol>
<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>

<dl> & <dt> & <dd>

설명(description) 리스트의 태그들

<dl> : DL 태그 영역임을 암시
<dt> : 설명할 아이템의 제목
<dd> : 설명할 내용

<dl>
  <dt>Name</dt>
  <dd>프로타쿠</dd>

  <dt>Email</dt>
  <dd>email@email.com</dd>

  <dt>Phone</dt>
  <dd>000-0000-0000</dd>

  <dt>Message</dt>
  <dd>HTML 공부 힘내자ㅏㅏㅏ</dd>
</dl>
profile
안녕하세요! 프로타쿠입니다

0개의 댓글