1.概念

1.1 HTMLドキュメントを使用したレイアウトの作成

必要なレイアウトをワイヤフレームとして描画し、HTMLとして組織することは、フロントエンドの開発者の素質です.

大きなフレームワークで領域を分割します.

各領域にマーク

idおよびclassはタグに使用される.

idドキュメント全体で一意の名前を使用したい

class重複領域をタイプ別に分類

選択者マーキング法.

와이어 프레임:スクリーンレイアウトの設計方法

목업:実物に似た試作作業を行う.役に立たない空き缶のようです.Publisherがやったのは牧業までしかし、最近ではデザイナーが木業を超え、原型の簡単な機能も実現している.あ.

프로토타입:最初から最後まで重要な動作を実現できるアプリケーションです.木業+コア機能

하드코딩:サーバに接続せずにコードに直接データを入力します.e.g.ツイッタープリント

<div id="container">
  <div class="col w30">
    <div class="image">그림1</div>
    <div class="image">그림2</div>
    <div class="image">그림3</div>
    <div class="image">그림4</div>
  </div>
  <div class="col w30">
    <div class="row h30">기본</div>
    <div class="row h30">특기</div>
    <div class="row h40">취미</div>
  </div>
  <div class="col w40">
    <div class="row h60">회사</div>
    <div class="row h40">집</div>
  </div>
</div>

垂直->水平

小さなエリアをもう一度包みます.

重複する領域は同じクラス名で囲まれている.

col(列)、row(行)

クラス名実装の内容を付与する.

Atomic CSS

これはCSS作成時にクラス名を指定する方法である.

レイアウトのリセット

HTMLドキュメントには、レイアウトを妨げるスタイルのデフォルト値があります.したがって、スタイルの初期化に使用できるライブラリはたくさんありますが、使用する必要はありません.基本的な造形を取り除くだけで十分です.

box-sizing

bodyラベルの余白とpadding

常に初期化するのではなく、必要に応じて初期化する.ブラウザごとにhtmlタグに適用されるデフォルト値が異なるため、初期化が必要になる場合があります.

* reference site : mdn, http://necolas.github.io/normalize.css/

1.2 CSSコレクタ

section, h1:複数選択section h1:sectionの子孫elmentでh 1 elmentを選択.row#comments : .rowクラスとcomments IDを持つ別名(スペースに注意).row #comments : .rowクラスにcomments IDを持つ別名section > div:sectionのサブエイリアスのdivラベル.順番は大丈夫です.article + p:articleに隣接する兄弟ellementp.直接隣接できない場合は、読めないことを確認します.変えて、読みました.HTMLドキュメントは上から読み込まれているので、上に隣接していると読み込めません.section ~ p:同じ位置にあるpタグを取得します.隣の兄弟エリメントpを全部持ってきてください.これは上より広い概念であるべきだ.

サブセレクタvs子孫セレクタ

子セレクタは自分の真下の子のみを選択するセレクタで、子孫セレクタは子、孫、子孫のセレクタです.

<div class="container">     
  <h2> to-do-list </h2>     
  <ul>         
    <li>list 1</li>         
    <li>list 2</li>         
    <li>list 3</li>     
  </ul> 
</div>

divタグの子はh 2とulであり、liは子孫である.

.container > h2:サブコレクタ

.container li:子孫コレクタ

1.3 Flexbox

flexboxにより、箱を柔軟に増やしたり減らしたりしてレイアウトを形成することができます.display: flex

親要素にこの属性を追加すると、子要素は左側から順に配置されます.

デフォルトはrowです.このプロパティを書くと、横並びに表示されます.

親要素に適用する必要があります.

flex-direction: row flex-dirextion: column

boxは分割の方向を設定することができる.デフォルトは「水平」(row)ですが、「垂直」(column)に変更することもできます.

flex : <grow> <shrink> <basis>

growおよびshriftは比率の値である.

この2つの属性は互いに衝突する概念であるため、同時に使用されない.

3つの属性のデフォルト値はflex : 0 1 autoです.

は、3つの属性を単独で入力してもよい.(marginやpaddingなど)

flex-grow

ボックスは、他のサブボックス要素に対する割合に応じて増加する.(該当grow値/総grow値)

0すべてのサブボックスに同じ値がある場合、同じ割合で増加します.

Chrome開発者ツールは、実際のサイズが異なることを確認します.ただし、flex-basicを0%に設定すると、同じであることがわかります.

flex-basis

サブボックスは、最初の2つの属性が増加または減少する前に、デフォルトのサイズです.

flex-grow属性値が0の場合にのみ保持されます.

widthが同時に適用される場合、flex-basedが優先されます.

コンテンツが多すぎてサブボックスが多すぎる場合はmax-widthに書き込むことができます.

justify-content

mainaxisソート.

flex-start flex-end space-between center

align-items

crossaxisソート.

flex-start flex-end stretch center

2.エラーログ

すべての要素を選択するセレクタとhtmlタグのみを選択するセレクタを混同した.

*{}直接作用範囲を描いたとき、私が想像していたのとは違います.すべての箱はちゃんと描かれているはずです.

min-heightは最小高さを指定します。

twittler mock-up sprintで見逃した部分

float textarea

重複する部分は、複製する前に確認して複製することが望ましい.

remビュー

完全タグにbox-size:border-boxを指定します.

formは、sectionラベルを使用してhtmlドキュメントを意味的に作成します.

formタグが理解されていないと、予期せぬ事態になる可能性があります.

ul-liラベルを使用してコメントを含む.

dotで発生した問題はlist-style:noneである.属性を追加および削除できます.

3.質問

article+pでは、隣接するエンティティがpではなく、他のエンティティであれば?

コンピュータ上で文字を使ってスクリーンを描くのは意外にも難しい.GUIでスクリーンに絵を描いた光景を思い出しました.