HTML 2. 구조 뜯어보기
<html> <head> <meta charset="utf=8"> <meta charset="viewport" content="width-device-width"> <title>JS</title> </head> <body> </body> </html>
✔ Html 태그는 가장 위에 위치해 있는 파일이며, html 안에는 head와 body로 나뉜다.
head
사용자에게 보여지는 UI적 요소가 전혀 없으며 구글에서 검색할 때 나오는 타이틀이나 부가설명 북마크 추가시 보이는 제목이나 아이콘들이 정의 되어 있으며, 만약 CSS 파일이 있다면 연결하는 부분 또한 head에 있다.
따라서, head는 사용자에게 보여지는 정보가 없고 metadata로 구성되어 있다.
<meta charset="utf=8">
태그의 경우 이 페이지에서 보여지는 charactor set(글자의 포멧)은 utf-8로 현존하는 모든언어를 지원해주기 때문에 utf-8을 일반적으로 적용해 주면 된다.
<meta charset="viewport" content="width-device-width">
뷰포트에 대해서 정의하는 태그이며, width-device-width의 경우 디바이스 스크린의 모든 너비를 사용하겠다고 정의한 것이다.
<title>
이 부분은 검색하거나 북마크에 보여지는 타이틀을 의미한다.
<base>
요소는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 요소만 존재할 수 있다.
<link>
요소는 현재 문서와 외부 리소스의 관계를 명시합니다. 는 CSS를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있다.
<meta>
요소는 base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 Metadata를 나타낸다.
<style>
요소는 문서나 문서 일부에 대한 스타일 정보를 포함한다.
body
사용자에게 보여지는 가장 중요한 최상위 컨테이너, body에 작성하는 요소들이 유저들에게 보여지는 것이다.
<h1> <h2> <button> 위의 태그들을 각각 입력하면 자동으로 브라우저 상에 표현된다.
🔵 Content compartment
<address>요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.
<article>요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
<aside>요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현한다.
<footer>요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
<header>요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.<h1>, <h2>, <h3>, <h4>, <h5>, <h6> HTML <h1>–<h6> 요소는 6단 계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮다.
<main>요소는 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.
<nav>요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.
<section>요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
🟣 Text content
<blockquote>요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 cite 요소로 제공할 수 있다.
<dd>요소는 정의 목록 요소(dl)에서 앞선 용어(dt)에 대한 설명, 정의, 또는 값을 제공한다.
<div>요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.
<dl>요소는 설명 목록을 나타냅니다.
<dt>요소는 설명 혹은 정의 리스트에서 용어를 나타냅니다. dl 요소 안에 위치해야 한다.
<figcaption>요소는 부모 figure 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다.
<figure>요소는 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있다.
<hr>요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다.
<li>요소는 목록의 항목을 나타낸다.
<menu>요소는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함한다.
<ol>요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현한다.
<p>요소는 하나의 문단을 나타낸다.
<pre>요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현한다.
<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현한다.
💥 body 안에도 어느정도의 기본 구성은 섹셔닝해야 한다.
기본적으로 header, navigation var, main content, sidebar, footer 구역을 나눠줘야함
BOX vs ITEM
BOX(아이템을 섹셔닝해주는 보이지 않는) vs ITEM(보여지는)
✍ div를 이용해 무작위로 나누기 보다는 섹션 태그들을 이렇게 나눠주는 것이 중요하다 ❗❗
✍ section 안에 article이 있는데, article은 여러가지 아이템을 그룹화해서 재사용 가능한 article이 모아져 있는 것을 말한다.
✍ 섹션안에 아티클이 있고, 살펴보면 섹션안에 아티클이 있고 텍스트 두줄 라이크 버튼, 하트 버튼 이렇게 구성되어있는데 재사용이 가능한 요소를 묶어주는 역할을 하는 것이 article 이다.
BLOCK vs INLINE
🔴 block: 한줄에 하나만 배치
⚫ inline: 공간이 허용하면 다른 태그 옆에 배치가 가능
그러면 어떻게 이 반응이 가능한 것일까❓
W3C(World wide Web Consortium)
✍ 웹의 표준화를 추진하는 곳으로, 예를들어서 W3C에서 html태그에는 어떤~어떤~ 태그들이 존재한다. 라고 정의 하였을 때 다양한 현존하는 모든 브라우저들이 이 표준에 맞게 브라우저를 구현해야한다. 따라서, W3C에서 정의된 태그들은 믿고 사용한다.
Author And Source
이 문제에 관하여(HTML 2. 구조 뜯어보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ka0son/HTML-톺아보기-HTML-구조-뜯어보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
