TIL 08 HTML (1)
HTML
Hypertext Markup Language
컨텐츠의 구조를 정의하는 마크업 언어. 컨텐츠(내용)에 태그(마크)를 씌워 구조를 구분하여 정의한다.
기본구조
<시작태그>컨텐츠</종료태그> ← 한 덩어리를 요소(Element)요소(Element)가 하나 둘 쌓여 HTMl 문서를 이루지만 요소(Element)만으로 HTML 문서를 완성할 수는 없다.
문서구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> html 문서구조 </title>
</head>
<body>
<h1>내용</h1>
<p>내용2</p>
</body>
</html>-
!DOCTYPE html
문서형식을 정의할 때 사용하는 문장이다. 이 문서가 html 문서라고 브라우저에 알려주는 역할이다. -
html lang="ko"
html여기서부터 본격적으로 HTML문서가 시작된다. html 태그는 전체 HTML문서를 감싸는 태그이며 단 한 번 사용할 수 있다. html 태그 밖으로 다르 태그는 존재 할 수 없다.
lang는 페이지의 주 언어를 명시한다. 시각장애인인 유저가 웹 페이지에 접근하는 경우 음성으로 듣는 형식을 선택했을 때 사용된다. -
head
head태그는 HTML 문서에 대한 정보를 담고 있다. 일반 상용자는 웹 사이트에서<head>태그에 속한 정보를 볼 수 없다. 이 태그는 HTMl 문서 안에 단 하나 존재할 수 있으며,<html>태그 바로 아래 위치한다.
<meta>: 문서와 관련된 정보를 담는 태그. 브라우저만 읽을 수 있다.<title>: 웹 페이지의 제목을 담는 태그.
- body
body태그는 HTML 문서 중에 사용자에게 실제로 보여지는 부분이다.<head>와 마찬가지로 문서 내 단 하나만 존재 할 수 있다.</head>바로 아래 위치한다.<body>태그에는 다양한 태그들을 포함할 수 있다.<head>태그 내부와<body>태그 내부에 존재하는 태그는 종류에 상관 없이 여러 번 사용 할 수 있다.
- 제목태그 : h1 ~ h6
- 본문태그 : p, br, prem br
<p>paragraphs의 약자. 단락 혹은 문단. 요소태그.<br>break의 약자. 엔터와 동일한 역할, 줄바꿈. 빈요소태그.<pre>preformatted의 약자. 형식화된 텍스트를 부라우저에 그대로<div>division의 약자. 분할. 각각의 태그를 구분 짓기 위해 사용되는 태그.
종료 태그를 쓰지 않는 요소를 빈 요소(Empty element)라고 부른다. 종료 태그가 없기 때문에 컨텐츠가 비어 있고, 태그 사이가 비어 있다.
레이아웃
웹 사이트의 기본이 되는 레이아웃이며, HTML5에서는 해당 레이아웃을 아예 태그로 만들어 각 요소의 쓰임을 명확하게 구분하였다. 이러한 태그를 시맨틱태그(Semantic tag)라고 부른다.
시맨틱태그 : 의미를 가지는 태그
<header>
웹 페이지 혹은 <section>의 소개나 제목을 담기 위해 사용하는 요소.<head>태그와 혼동하지 않도록 유의하자.
<nav>
내비게이션 역할을 수용하는 요소. 페이지 이동을 위 한 메뉴를 주로 담는다.
<section>
기준에 따라 구획을 구분하기 위해 사용. 기준에 맞는 <article>을 담는다.
<article>
주 내용을 담기 위해 사용하는 요소.
<aside>
광고 또는 사이트의 주변 부분에 해당하는 내용을 담기 위한 요소.
<footer>
일반적으로 웹 사이트 가장 아래. 회사 정보나 사이트 정보등의 추가 정보를 담기 위해 사용하는 요소.
글자
- strong : 볼드체로 바꾼다.
- em : emphasized. 이탤릭체로 바꾼다.
- sup : 단어 혹은 문장을 일반 위치보다 위로 올린다.
- sub : 일반 위치보다 아래로 내린다.
- ins : 문장 아래 밑줄
- del : 취소선
링크
하이퍼 링크는 하이퍼 텍스트를 가능하게 만든 핵심 도구. 간단하게 주소 링크라고 생각하면 편하다. HTMl에서는 <a>태그가 이 하이퍼 링크의 역할을 한다.
* 기본구조
<a href="주소" alt="설명" target=""> 컨텐츠 </a>-
링크태그
<a>
이 태그를 사용하면 링크를 통해 다른 웹 페이지로 이동하거나 문서로 이동할 수 있는 통로가 마련된다. -
href
Hypertext Reference.<a>가 참조하는 웹 사이트 주소(경로)를 값으로 가진다. -
target
링크를 클릭했을 때 해당 페이지를 어디로 열지 정하는 속성.- _self : 현재 탭에서 링크 열기
- _blank : 새 탭 혹은 새 창에서 링크 열기
-
URL
웹 사이트 주소(도메인, domain)와 경로(path)를 합쳐 URL(Uniform Resource Locator)이라고 한다. HTMl 페이지, CSS 문서, 이미지 등을 자원(Resource)이라고 부르며, URL은 인터넷에서 자원의 위치를 표현한다. 실제 링크 주소 값이 들어가야 하며, 자세히 이야기하자면 주소와 경로가 합쳐진 URL 입력 되어야한다.- 절대 URL : Absolute URL. 접근하는 최초 시작점(주소)부터 경유한 경로를 모두 기록.
- 상대 URL : Relative URL. 현재 위치(기준점)를 기준으로 상대적인 경로를 기록.
이미지
- img
이미지 태그는 넣고자 하는 이미지에 대한 속성을 작성해야 하는 태그이며, 빈 요소이기 떄문에 종료 태그를 작성하지 않는다.
* 기본구조
<img src="이미지 url" alt="이미지 대체문구" />오디오와 비디오
오디오
* 기본구조
<audio controls>
<source src = "오디오주소" type="audio/mpeg">
</audio>비디오
* 기본구조
<video controls>
<source src = "비디오주소" type="video/mp4">
</video><video>, <audio> 에 사용되는 <type>는 생략할 수 있다.
<video> 태그는 height와 width를 사용할 수 있다. (오디오는 안됨.)
Author And Source
이 문제에 관하여(TIL 08 HTML (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@whatss/TIL-08-HTML-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
