HTML 2. 구조 뜯어보기

728x90

<.DOCTYPE html>

✔ <!DOCTYPE html>는 HTML5버전을 사용하고 있음을 의미

✔ 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에 작성하는 요소들이 유저들에게 보여지는 것이다.

<div class="title">안녕!</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="내사진">

위에서 div, a, img는 태그이고 class, href, src, alt는 속성이라고 함
alt는 이미지 대신 보여줄 텍스트

--------------------------------------------------------------------------------------

<h1>안녕</h1>
<img src="hi.png">

<태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 함

--------------------------------------------------------------------------------------

<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로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.

<dl>요소는 설명 목록을 나타냅니다.

은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.

<dt>요소는 설명 혹은 정의 리스트에서 용어를 나타냅니다. dl 요소 안에 위치해야 한다.

<figcaption>요소는 부모 figure 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다.

<figure> 요소는 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있다.

<hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다.

<li> 요소는 목록의 항목을 나타낸다.

<menu> 요소는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함한다.

<ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현한다.

<p> p태그 또한 텍스트를 주로 넣어주며, 문단을 통으로 넣을 때가 많음, 하지만 p태그는 span 태그와는 다르게 줄바꿈이 일어남

  ex) <p>이름: camille</p>
  <p>직업: 개발자 </p>
  >이름: camille
직업: 개발자

<span>span 태그에는 주로 텍스트를 넣어주며, span을 사용하면 줄이 바뀌지 않고 한 줄에 이어서 나오게 됨 -> 한줄에 이어서 나오는 요소를 inline-element라고 한다.

  ex) <span>이름: camille</span>
  <span>직업: 개발자 </span>
  >이름: camille 직업: 개발자

<pre>요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현한다.

<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현한다.

<a> a태그를 클릭하면 해당 홈페이지로 이동하게 되며

<a href="https://www.w3schools.com/tags/tag_div.asp"
      target="_blank">홈페이지</a>

여기서 a는 tag 이름이고
href는 attribute(속성) 이름이며
https://wecode.com 는 href 속성에 대한 attribute 값이고
"홈페이지"는 content(내용)이다.
해당 코드에서 target="_blank"는 새창으로 홈페이지를 뜨게해주는 속성이라고 볼 수 있다.

[💚 MDN 링크에서 필요한 요소들을 확인하고 적용 💚] (https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EB%A9%94%EC%9D%B8_%EB%A3%A8%ED%8A%B8)

💥 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에서 정의된 태그들은 믿고 사용한다.

ID vs CLASS

📌 id

id는 각 태그에 이름을 주는 속성으로 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 한다. 따라서 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있으며, 중복된 id 이름이 있으면 안된다!

<div id="profile">
id는 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용하는데, 예를 들면 <p> 태그에 글씨 크기를 20px로 적용하면, index.html에 있는 모든 <p> 태그의 글씨가 커진다. 하지만 특정 요소에 디자인을 적용하길 원할 때는 id값을 지정하고 id가 profile인 요소에만 글씨 크기를 20px로 적용할 수 있다.

📌 class

class도 태그에 이름을 주는 속성이다. id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있다는 특징을 가진다. 예를 들어 'camille'라는 이름을 가진 사람이 여러 명 이듯 여러 tag에 중복된 class 이름을 줄 수 있다.

<div class="content-wrap"></div>
<p class="content-wrap"></p>