TIL no.2-HTMLベース

シンボルマークSEMANTIC TAG

HTMLのbody領域では、上図のようにシンボルマークを使用して画面を分割します.よく訪れるポータルサイトNaverやNextもこのように構成されています.

<header>: 주로 머리말, 제목을 표현하기 위해 쓰인다.
<nav>: 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크의 역활을 담당한다. 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능하다.
<section>: 본문 콘텐츠를 담는다. <section>안에 <section>을 넣는 것도 가능하다.
<article>: 실질적인 내용을 넣는다.
<aside>: . 주로 본문옆에 광고를 달거나 링크들을 이 공간에 넣어 표현한다.
<footer>:화면의 구조 중 제일 아래에 위치하고, 회사소개 / 저작권 / 약관 / 제작정보 들이 들어가며, 연락처는 <address>태그를 사용하여 표시한다.

BLOCK vs. Inline vs. Inline-block

Block Element

物を塊に積み上げるように、理解しやすい.ブロックの高さと幅を特にCSSに変換しない場合は、Webサイトの左から右に移動します.

Inline Element

街区の装飾に対応した構造を有する.一般的に、ユーザーは任意にサイズを指定するのではなく、指定した高さと幅を使用します.改行しない.

Inline-block Element

は、ブロック要素と行内要素の組み合わせで、両方の要素の特徴を使用できます.

BOX MODEL

すべてのHTML要素は、ボックスモデル(box model)と呼ばれるボックス(box)形状で構成されています.ダンボールモデルの要素は、塗りつぶし、枠線、および余白に分けられます.
※Chromeマウス右クリック>チェック

padding

コンテンツと枠線の間隔.ダウンジャケットが見えない.

border

ダウンジャケットの周りに巻いた縁.

margin

枠線と隣接する要素の間隔.利益は見えない.