HTML 기초

지은·2022년 8월 25일
1

HTML

목록 보기
1/1
post-thumbnail

HTML

HTML(HyperText Markup Language) : 웹 페이지의 뼈대를 구성하는 마크업 언어

트리 구조(tree structure)

: 태그 안에 태그를 넣고 들여쓰기(indent) 하는 것!

<html>          <!--parent-->
  <head></head> <!--children-->
  <body></body>
</html>

HTML 요소(Elements)

주요 요소

ElementDescription
<html><html>요소는 문서의 루트(최상단 요소)를 나타내며, '루트 요소'라고도 부른다.
<head>기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다.
🫙 문서가 사용할 title, script, style에 대한 정보
<body>HTML 문서의 내용을 나타내며,
한 문서에 하나의 요소만 존재할 수 있다.

메타데이터

<head> 태그 안에 들어가는 메타데이터 태그들

ElementDescription
<meta>base, link, script, style, title과 같은 다른 메타 관련 요소로 나타낼 수 없는 Metadata를 나타낸다.
<title>브라우저/탭에 보이는 문서 제목을 정의한다.
<base>문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다.
문서에는 하나의 요소만 존재할 수 있다.
<link>현재 문서와 외부 리소스와의 관계를 명시한다.
🫙 CSS 연결, 사이트 아이콘(Fabicon), 앱 아이콘 연결 등
<style>문서에 대한 스타일 정보를 포함한다.

시맨틱 태그

ElementDescription
<header>페이지나, 섹션의 가장 윗부분에 위치하며, 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
🫙 제목, 로고, 검색창, 상단바, 작성자 이름 등
<nav>내비게이션(navigation)의 약자, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용한다.
🫙 메뉴, 목차, 색인 등
<main>문서의 주요 콘텐츠를 나타낸다.
<article>문서, 페이지, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
<section>문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
<h1~6>6단계의 제목을 나타낸다.
<aside>문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
🫙 사이드바, 광고창, 콜아웃 박스
<footer>페이지나, 섹션의 가장 윗부분에 위치하며, 추가적인 콘텐츠를 나타낸다.
🫙 작성자, 저작권 정보, 주소, 연락처, 관련 문서 등
<address>해당 문서와 관련된 사람, 단체, 조직의 연락처 정보를 나타낸다.

section, article, div의 구분

  1. 독립적으로 구분해 배포하거나, 재사용할 수 있는 내용 : <article>
    ex. blog post, news article..
  2. 서로 관계가 있는 내용 : <section>
  3. 의미적으로 관계가 없는 내용 : <div>

header와 h1의 차이

  • <header>영역을 나눌 때 사용 ➡️ 제목, 로고, 검색창 등을 포함
  • <h1>은 제목 텍스트를 입력할 때 사용

텍스트 태그

block-level

ElementDescription
<div>콘텐츠를 분할하는 요소로, CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다
<ul>Unordered list, 정렬되지 않은 목록을 나타낸다.
<ol>Ordered list, 정렬된 목록을 나타낸다.
<li>List, 목록 안의 항목을 나타낸다.
<p>Paragraph, 하나의 문단을 나타낸다.
<hr>Horizental rule, 구획 내 주제 변경, 분리시 사용하는 수평선

p와 div의 차이

  • p : 단락이 나누어지며, 줄 바꿈 시 마진이 발생한다.
  • div : 단지 영역을 구분할 뿐이며, 마진이 없다.

inline-level

ElementDescription
<a>Anchor, href속성을 통해 다른 URL로 연결하는 하이퍼링크를 만든다.
<span>인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다.
<br>Single line break, 줄바꿈을 한다.
<strong>중대하거나 긴급한 콘텐츠를 나타낼 때, 텍스트를 볼드체로 표시한다.
<i>Italic, 어떤 이유로 주위와 구분해야 할 때, 텍스트를 이탤릭체로 표시한다.
<u>Underline, 틀린 단어나 고유 명사 등을 일반 텍스트와 구분해야 할 때,
텍스트에 밑줄을 표시한다.
<small>덧붙이는 글이나, 저작권과 법률 표기를 할 때, 텍스트를 작게 표시한다.
<s>Strikethrough, 텍스트에 취소선을 표시한다.

div과 span의 차이

<span><div>와 매우 유사하지만,
<div>는 블록 레벨 요소인 반면, <span>은 인라인 요소이다.


이미지 & 멀티미디어 태그

ElementDescription
<img>문서에 이미지를 넣는다.
<audio>문서에 오디오 콘텐츠를 넣는다.
<video>비디오 플레이백을 지원하는 미디어 플레이어를 문서에 넣는다.
<track>audio, video요소의 자식 태그로, 자막 등 시간별 텍스트 트랙을 지정할 때 사용한다.
<map>이미지맵(클릭 가능한 이미지)을 정의할 때 사용한다.
<area>map요소의 자식 태그로, 이미지의 핫스팟 영역을 정의하고 hyperlink를 추가한다.

폼 태그

ElementDescription
<form>정보를 제출하기 위해 대화형 컨트롤을 포함하고 있는 section을 나타낸다.
<input>사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
타입 : text, password, radio, checkbox, button, number, email, tel, file, image, time, date, range, search, submit, url 등 / input태그의 타입 MDN
<textarea>멀티라인의 텍스트 편집 컨트롤을 나타낸다.
<button>클릭 가능한 버튼을 나타낸다.
<datalist>옵션 메뉴를 제공하는 컨트롤과 입력창을 나타낸다.
<select>옵션 메뉴를 제공하는 컨트롤을 나타낸다.
<optgroup>select요소의 자식 요소로 select요소의 옵션들을 묶을 수 있다.
<option>select, datalist, optgroup요소의 자식 요소로, 항목을 정의한다.
<label>사용자 인터페이스 항목(text, checkbox..)의 설명을 나타낸다.
input의 id속성과 label의 for 속성으로 서로 연결할 수 있다.

datalist와 select의 차이

  • datalist : 사용자가 입력창에 타이핑하여 옵션을 검색할 수 있다. (옵션이 매우 많을 때 사용)
  • select : 만들어진 옵션에서 선택만 할 수 있다.

폼 태그 MDN


Self-Closing 태그

<meta /> <base /> <link /> <img /> <area /> <track /> <input> <br /> <hr /> <col /> <embed /> <param /> <source /> <wbr />


HTML 요소의 속성(Attribute)

속성의 특징

  • 모든 HTML 태그는 속성을 가질 수 있다.
  • HTML 요소에 대한 추가적인 정보를 제공한다.
  • 주로 name="value"의 형태로 쓰인다.

주요 속성

href : 링크가 이동하는 페이지의 URL을 지정

<a href="https://www.w3schools.com">Visit W3Schools</a>

src : 이미지의 경로를 지정

<img src="img_girl.jpg">

width height : 이미지의 너비와 높이를 지정 (px 단위)

<img src="img_girl.jpg" width="500" height="600">

alt : 어떤 이유로 이미지를 표시할 수 없는 경우, 이미지에 대한 대체 텍스트를 지정

<img src="img_girl.jpg" alt="Girl with a jacket">

style : 요소에 색상, 글꼴, 크기 등과 같은 스타일을 추가

<p style="color:red;">This is a red paragraph.</p>

lang : 웹 페이지의 언어를 선언

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

title : 요소에 대한 추가 정보를 정의하여 요소 위로 마우스를 가져가면 tooltip으로 표시

<p title="I'm a tooltip">This is a paragraph.</p>

❔ 학습 후 궁금한 점

  • block, inline, inline-block의 차이는 무엇인지?

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EC%96%91%EC%8B%9D
https://www.w3schools.com/html/html_attributes.asp

profile
개발 공부 기록 블로그

1개의 댓글

comment-user-thumbnail
2022년 8월 25일

멋있어요 항상 응원합니다~~

답글 달기