HTML

28 Dec 2020

HTML(Hypertext Markup Language)

“웹브라우저 상에서 보여지도록 디자인된 문서”

1. HTML의 기본구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

<!DOCTYPE>

웹 브라우저에게 어느 버전의 HTML 인지 알려주는 정보

오늘 날에는 모든 브라우저들은 HTML5가 지원되기 때문에 관습적으로 제일 상위부분에 작성한다.

<html></html>

다음 바로 아래에 위치한다.

html 태그는 html 파일의 제일 상위에 있는 태그이며, html 안에는 head와 body로 나누어져 있다.

<head>

사용자에게 보여지는 ui적인 요소가 전혀 없다.검색 시 나오는 타이틀이나 부가설명, 북마크 추가 시 제목 들이 정의되어 있다.<_head_>태그 내에 <_meta_>,<_title_> 태그가 있다.

<body>

사용자에게 보여지는 가장 중요한 요소이다.<_body_> 안에 작성되는 내용들이 사용자에게 보여진다.

2. HTML의 레이아웃

소개나 네비게이션의 기능들의 묶음을 나타내는 것으로, 사이트의 전체적인 정보를 정의하며, ui 상의 기능은 없다.

<nav>

페이지의 이동을 위해 내비게이션 링크로 구성된 부분으로, 페이지 안에 모든 링크들이 nav로 작성될 필요는 없다.

<aside>

본문과 직접적인 연관성이 없는 콘텐츠에 사용한다. 주로 사이드 바의 형태로 나타내며, 관련 사이트의 링크나 광고 등에 사용한다.

<section>

콘텐츠들의 문서나 응용프로그램의 일반적인 세션으로,하나의 페이지 안에서 주제가 다른 영역을 구분짓거나 하나의 글을 부분으로 나눈다. 홈페이지에서는 소개, 아이템 등이 섹션으로 분리할 수 있다. 요소가 스타일링을 위한 목적이거나, 스크립팅의 편의를 위해 사용할 때는 <_div_>를 권장한다.

<article>

본문의 내용을 표시하는 것으로, 사이트 안에 들어가는 독립적으로 구성할 수 있는 내용이 들어간다. 하나의 문서 안에 여러개의 article을 담을 수 있다.

3. HTML의 구성

Element (요소)
- Block level Element
  
  웹페이지 상에서 블록을 만드는 것으로, element 사이에 새로운 줄을 만든다. lnline element에 중첩될 수 없다. ex) p,li,nav, footer,div 등
- Inline Element
  
  항상 block level element에 포함되어 있으며, 문장과 단어 등 작은 부분에만 적용이 가능하며, 새로운 줄을 만들지 않는다. ex) a, em, strong, span 등
- Empty Element
  
  시작태그와 종료태그가 없고 단일태그로 구성되어 있다. ex) img
Tag (태그)

요소들을 구성하기 위해 사용하는 것이다.
Content (내용)

단락의 내용을 구성하며, text로 이루어져 있다.
Attributes (속성)

요소의 시작태그 안에서 사용되는 것으로 구체화된 명령어를 부여할 때 사용한다.

4. 다양한 태그들

<h1>,</h1> ~ <h6>,</h6>

제목으로 사용하기 위해서 자주 사용하는 태그이다.
<p>,</p>

단락을 구분하는 태그이다.
<div>,</div>

Division의 약자로, 레이아웃을 나눌 때 사용하며, CSS를 활용하여 스타일을 적용할 수 있다.
<a>,</a>

링크를 걸어 이동하게 해주는 태그로, 필수속성인 href를 넣어 이동하고자 하는 url를 넣어주면 된다.
img

이미지를 삽입하는 태그로, 필수속성인 src와 alt를 넣어 표기한다. src는 경로를 포함한 이미지 파일명을, alt는 이미지 설명을 넣어 이미지를 볼 수 없는 상황일 때 텍스트로 대체하기 위함이다.
부모 자식관계 태그 - <ul>&<ol>,<li>
<_ul_>은 unordered list로 순서없는 목록으로 점이나 모형이 앞에 붙게 된다.<_ol_>은 ordered list로 순서가 있는 목록으로 1,2,3..등 증가하는 번호가 붙게 된다.

html