[公費教育]Day 36

簡単なスタートで、昨日作ったレイアウトを終えます.

img sr=“url”

実は画像を加えるのは簡単です.画像アドレスを属性値として入力すると終了します...
しかし、レイアウトに画像を入れると、サイズが合わないために画像が変形することがよくあるという問題がある.
したがって,ブラウザでF 12をクリックした後,長いdivに画像を入れる場合には,画像の大きさを知り入れて入れる必要があるため,開発者ツールとしてF 12を用いる.
inspectを使用して要素の情報を確認します.そして<div>パックで綺麗に入れて終わりました!

うーんデザインしなくてもいいよ~

positioning

positionプロパティは、tableの後にレイアウトを作成する際に使用されるテクノロジーですが、要素の位置を変更することを目的としています.通常、位置が分からない場合には、調整位置は、マージン、充填を調整することによって実現される.
しかし、margin、paddingも位置調整を目的としているわけではなく、複数の要素が内部にあると、ちょっと油断するとサイズが大きすぎて割れてしまう場合があります.
従って、position属性とtop, left等の方向を組み合わせて位置変換を行うことがCSS位置調整の基礎となる.

[使用方法]

예시
 <div id="container">
        <div id="box1" class="box"></div>
적용
  #box1{
            background-color: black;
            top: 30px;
            left: 30px;
	}

1) static

position의 기본값, 이 상태에선 top, left 등의 위치 조정이 적용되지 않는다.

上記の例では、box1に対してtop, leftが適用されたが、位置は変化しなかった.これは、要素のデフォルト値がstaticであるためです.すなわち,静的要素はpositionを適用せず,要素の位置値を変更する必要がある.
また,静的要素は通常の流層に存在する.その名の通り基本状態なので移動できず、一番後ろの階なのでz-indexも適用されません.
では、静的以外の値について説明します.

2) relative

条件:法線フロー内の元の要素の位置
適用:法線ストリームの元の位置から移動し、要素を移動するときに主に使用します.

예시
 <div id="container">
        <div id="box1" class="box"></div>
적용
  #box1{
            position: relative;
            top: 30px;
            left: 30px;
	}

3) absolute

データム:自分が属するParent要素に基づいて移動します.
適用:デフォルトの場所は通常のプロセスの場所です.ただし、位置を変更すると、そのデータムの親要素の周りを移動します.しかし、自分の所属する親は静止状態にあってはならない.
absoluteは実行時に自分のparent要素の位置を確認し、静的であれば無視し、隣接するparent要素に移動するためです.
したがって、すべての親要素が静的である場合、bodyを基準に移動するため、基準となる親要素は相対的に変換されます.

デザイン的にはPPTが一番です.
また,absolute自体はfloatのように層の概念であり,absoluteのn個の要素を適用してn個の層を作成する.つまり、画面を構成する複数のレイヤーの1つであり、通常のプロセスの要素はデフォルトのレイヤーの上に上昇し、各レイヤーには順序があります.absoluteの状態の層順序を変更したい場合は、z-indexに調整することができる.

4) fixed

データム:現在の画面
私たちがネットサーフィンをしている間に、スクリーンに現れた広告にはこの属性があります.
ここに表示される画面は、ブラウザウィンドウに表示されるサイズであり、「領域全体」ではありません.
だからいっそスクリーンの特定の位置に固定して、スクロールしても消えません.
これを応用すると、主にチャットコンサルティング部品、スクリーンコントローラなどを実現します.

5) transform

これはレイアウトを特定するためのものではなく、それぞれの要素に適用されて変化するアニメーション効果アトリビュートといえます.主に:hover / :activeと組み合わせられ、ユーザが元素に対して特定の動作をするときの反応に用いられる.

transform : rotate(~deg); 회전
transform : scale(?);	크기 증가
transform : translate(20px,100px); 위치 이동

もちろん、単独で実施するスタイルも良いですが、良いCDNがたくさんあるので、Google検索で利用することをお勧めします.
今日学んだ位置づけや、レイアウトの要素を移動するときに効果を作成するときに使用するレイアウトテクニックは、実際のWebサイトでも簡単に見つけることができます.
昨日突然写真を撮っただけ?提出要求があったので7時間ずっとレイアウトをしていましたが、測位を乱用してしまい、結果的に画面が小さくなってしまうと、それに応じて縮小することがよくありました.
だから特別な場合でなければ、使わないほうがいいです.