💛[開発案内ルートWeb UI]13レイアウト

レイアウトの概要

レイアウトの辞書の意味
:本、新聞、雑誌などで文章、画像などを効果的に整理し、配置する.
このように,ウェブページ上で効率的に設計されたウェブページを整理・配置するコンポーネントをレイアウトと呼ぶ.
レイアウトはレイアウトによって異なる種類があります.
通常、レイアウトには、グリッドの構成順序または位置に基づいて名前を付ける代表的な名前があります.

第1段レイアウト(最も基本的な)

頂部固定レイアウト

上・下固定レイアウト

二段レイアウト(2つのコンテンツ領域に分かれている)

三段レイアウト

マルチセグメントレイアウト(2セグメント、3セグメントレイアウトなど)

一級レイアウトの作成

一級レイアウト
:グリッドレイアウトで最も基本的なレイアウト.
タイトルエリア、コンテンツエリア、プッシュ特区が直列に接続されています

ex)NAVERショッピング、NAVER辞書、NAVER Post
特別なレイアウトでない場合、ほとんどのデフォルトのレイアウトはヘッダー領域、コンテンツ領域、フッター領域で構成されます.
自分でレイアウトを計画する必要があるスタッフは、Webサイトの設計を確認し、各分野の範囲を特定することで開始できます.
そのため、体験を練習し、さまざまなレイアウトを観察する必要があります.

実習の基本要求

ターゲットは、ヘッダー、コンテンツ、フッターからなる第1レベルのレイアウトを作成することです.

スタイルについて

KUNtenz最大横長1200 px
コンテンツ最小横長800 px
中央揃え

プライマリ・ラベルと属性

HTML
div
divで各要素の形態をキャプチャする.

CSS
min-width, max-width

<!-- div를 이용한 1단 레이아웃 -->
<div class="wrap">
   <div class="header">header</div>
   <div class="content">content</div>
   <div class="footer">footer</div>
</div>

<!-- html5를 이용한 1단 레이아웃 -->
<div class="wrap">
    <header>header</header>
    <section>content</section>
    <footer>footer</footer>
</div>

wrap:第1層レイアウトの全体的なフレームワークを決定する
通常、レイアウトを作成するときにwrap、wrapperなどの名前を付けることで親要素を作成します.
wrapに必要な要素を配置してレイアウトを完了

デフォルトラベルスタイル

.header{
    height: 100px;
    background-color: lightgreen; 
}
.content{
    height: 300px;
    background-color: lightsalmon;
}
.footer{
    height:100px;
    background-color: lightblue;
}

コンテンツ領域の最大値と中央揃え

.header{
    height: 100px;
    background-color: lightgreen; 
}
.content{
    max-width: 1200px; /* 최대 가로길이 1200px */
    height: 300px;
    margin: 0 auto; /* 블럭요소 가운데 정렬 */
    background-color: lightsalmon;
}
.footer{
    height:100px;
    background-color: lightblue;
}

グローバル最小値(800 px)

.wrap {
	text-align:center;
    min-width: 800px; /* 최소 가로길이 800px */
}
.header{
    height: 100px;
    background-color: lightgreen; 
}
.content{
    max-width: 1200px; /*최대 가로길이 1200px*/
    height: 300px;
    margin: 0 auto; /*가운데 정렬*/
    background-color: lightsalmon;
}
.footer{
    height:100px;
    background-color: lightblue;
}

整理する

max-widthで最大長を設定する
min-widthを使用して最小長さを設定する

マルチレベルレイアウトの作成

ex)NAVER音楽、NAVER知識パック、NAVER天気
ヘッダー、フッター、コンテンツ、aside(側)、表示領域
contentの領域を欄別に区切ったレイアウトをマルチレベルレイアウトと呼ぶ.
2つのバーが分かれている場合は、2段のレイアウト
content領域を3つの領域に分割して3段階レイアウトを行う
分割バーの数に基づいて、マルチセグメントレイアウトの数を決定します.

実習目標

コンテナの内容はcontentとside領域に分かれています.
目標はcontentとside領域を区切るborderと区切った線を容器の最小高さで満長にすることである.

スタイルについて

コンテンツ幅500 px
サイドメニュー幅300 px
コンテンツの最小高さ100%

プライマリ・ラベルと属性

HTML
div
divを使用して領域を位置決めします.

CSS
float, display(table, table-cell)

floatを使用する方法
2つの領域をfloatに並べ替え、side領域とcontent領域を

に分ける.

displayのtable、table-cellプロパティを使用して、2つのコンテンツをソート

<div class="wrap">
    <div class="header">header</div>
    <div class="container"> <!-- content와 aside의 묶음 영역 추가 -->
        <div class="content">content</div>
        <div class="aside">aside</div> 
    </div>
    <div class="footer">footer</div>
</div>

content,asideからコンテナへ

floatを用いる方法

html, body, .wrap{
	height:100%: /*min-height값 적용 위해*/
}
.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    position: relative; /* position 기준영역 설정 */
    width: 800px; /*자식요소 float 두개를 받아들일 수 있을 정도의 크기*/
    margin: -100px auto; /*가운데 정렬*/
    min-height:100%; /*최상단의 부모 요소로부터 상속받아야함*/
    padding:100px 0;
    box-sizing:border-box; /*padding값이 높이값에 영향을 주지 않게 하기 위해*/
    
}
.container:after { /*footer 위한 float 해제*/
  display: block;
  clear: both;
  content: '';
}
.content {
    float: left; /*정렬*/
    width: 500px; 
    height: 300px;
    background-color: lightsalmon;
}
.aside {
    float: left; /*정렬*/
    width: 300px; 
    height: 300px;
    background-color: lightseagreen;
}
.aside:after{ /* 구분선 만들기 */
/*가상 엘리먼트로 도형을 만들어서 띄워줌*/
    content:''; /*빈 content*/
    position:absolute;
    right:300px;
    top: 100px;
    bottom: 100px;
    width:5px;
    background-color: #000;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

display:tableを使用して2段階レイアウト

を作成する

html, body, .wrap{
	height:100%;
}
.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    display: table; 
    /*고정된 크기를 가지게*/
    table-layout:fixed;
    width: 800px;
    
    margin: -100px auto;
    min-height:100%;
    padding: 100px 0;
    box-sizing:border-box;
}
.content {
    display: table-cell; 
    width: 495px; /* -5px 하여 추가된 구분선 만큼 빼기 */ 
    background-color: lightsalmon;
    border-right: 5px solid #000; /* border를 이용해 구분선 추가 */
}
.aside {
    display: table-cell;
    background-color: lightseagreen;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

float法との違い
containerと長ければ長いほど短くなり、table-cellが継承する高さ値が高くなります.
->サブエレメントのheight値は不要
->区切り線を挿入する場合は、コンテンツのborderまたはasideのborderを使用できます.

floatを使用したレイアウト
floatを無効にするコードを使用する必要があります
コンテナの高さ値の最大化方法を使用して、コンテンツ領域とサイド領域の区切り線を作成します.

display:tableを使用したレイアウト
table-cellの高さ値はコンテナの高さ値に基づいて継承されるため、borderのみを使用すると、分割線をより容易に作成できます.

マルチセグメントレイアウトの作成は、各領域を配置するためにどのプロパティを使用するか、サイトの構成に適したレイアウトを使用するかを考慮する必要があります.
したがって,状況に応じた方法を選択して適用する必要がある.

固定レイアウトの作成

固定レイアウト
上下固定レイアウト
ex)ソフトバー、オーディオクリップ、回線
コンテンツが長いため、メインメニューやコントロールエリアを最上位に固定でき、ユーザーがアクセスしやすいUIを最上位固定レイアウトと呼ぶことができます.

実習

頂部固定レイアウト

上下固定レイアウト

実習要件

ヘッド上部固定
脚注の下を固定
コンテンツの最小高さ100%

プライマリ・ラベルと属性

HTML
div

CSS
position(fixed), min-height, margin, padding

<div class="wrap">
    <div class="header">header</div>
    <div class="container">
        <div class="content">content</div>
    </div>
    <div class="footer">footer</div>
</div>

上部固定レイアウト

html,
body,
.wrap {
   height: 100%;
   /*상속하기 위한 부모의 height*/
}
.header {
    position: fixed;  
    top: 0; left: 0; right: 0; 
    height: 100px;
    background-color: lightgreen; 
}
.container {
    min-height: 100%; 
    /*height를 %로 지정하기 위해서는 부모요소로부터 높이값 상속받아야함*/
    margin-top: -100px; /*footer올리기 위해*/ 
}
.content{
    height: 300px;
    padding-top: 200px; /* 가려진 height의 높이값과 끌어올린 footer의 높이값을 합친 값을 padding-top으로 밀어준다. */
    background-color: lightsalmon;
}
.footer{
    position: fixed; 
    bottom: 0; left: 0; right: 0;
    height:100px;
    background-color: lightblue;
}

box-sizeプロパティの上部固定レイアウト

html,
body,
.wrap {
   height: 100%;
}
.header {
    position: fixed;  
    top: 0; left: 0; right: 0; 
    height: 100px;
    background-color: lightgreen; 
}
.container {
    min-height: 100%; 
    margin-top: -100px; 
    padding-top: 200px; /* 가려진 header와 끌어올린 footer의 높이값 만큼 부여 */
    box-sizing: border-box; /* padding이나 border를 컨텐츠에 부여된 높이값에 포함 */
}
.content{
    height: 300px;
    background-color: lightsalmon;
}
.footer{
    position: fixed; 
    bottom: 0; left: 0; right: 0;
    height:100px;
    background-color: lightblue;
}

上下固定レイアウト

html,
body,
.wrap {
    height: 100%; /* 부모요소에 height 100% 부여 */
}
.header{
    position: fixed;  
    top: 0; left: 0; right: 0;
    height: 100px;
    background-color: lightgreen; 
}
.container {
    min-height: 100%; 
    padding: 100px 0; /* height, footer 뒤로 가려진 영역 노출 */
    box-sizing: border-box; /* padding값을 높이에서 무시하도록 속성 추가 */
}
.content{
    height: 300px;
    background-color: lightsalmon;
}
.footer{
    position: fixed;  
    bottom: 0; left: 0; right: 0; 
    height:100px;
    background-color: lightblue;
}

整理する

position:fixed固定領域の使用方法を練習する
position:fixedはブラウザを基準としているので、設計ではfixedが入る位置を正確に把握して使用することが望ましい.

heightの継承
Heightを%として使用するためには,親から与えられた高さを継承しなければならない.重要
高さの値の100%はブラウザ表示部の高さの値しか得られません.

コンテンツの高さと負の値を100%取得
負の余白を作成する場合は、レイアウト全体に他の影響を及ぼさないように理解して使用します.