21.3.30 TIL(cssレイアウト、selector)

23034 ワード
TIL テキストリンク

中級


学習目標
  • 各種CSSセレクタ規則を理解する.
  • の子孫と子の違いを理解する必要があります.
  • レイアウトのHTMLを作成できます.
  • Flexboxを使用してレイアウトを作成できます.(次のプロパティを理解する必要があります)
  • 方向:flex-direction
  • はどのくらい増加しますか?:flex-grow
  • の大きさはどれくらいですか.flex-basis
  • 水平ソート:prevident-content
  • 垂直整列:align-items

    • cssコレクタ

    *트리구조에서 같은부모엘리먼트 에서 나온 자식엘리먼트 끼리 형제 엘리먼트 라고 하며
 부모엘리먼트에서 1단계밑에 있는 엘리먼트를 자식엘리먼트
 부모엘리먼트 밑에 1단계를 포함한 모든 엘리먼트를 후손엘리먼트 라고 한다 (후손엘리먼트 안에 자식엘리먼트가 있다)
 
 1.자식셀렉터 = header > p { } // > 는 header의 자식 엘리먼트 p를 선택합니다.
 2.후손셀렉터 = section h2 { } // 띄어쓰기로 부모와 후손엘리먼트를 구분하여 section의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다.
 3.tag셀렉터 = section, h1 { }  // 쉼표(,)는 section태그와 h1태그를 다중으로 선택한다
 4.인접 형제셀렉터 = article + p { }  // + 는 article 태그의 인접한 형제 엘리먼트 p를 선택한다
 5.형제셀렉터 = section ~ p { }  // ~는 section과 형제 엘리먼트 p를 모두 선택한다
 6.id , class 셀렉터 = #label.center { }  // id가 label이면서 동시에 class가 center인 엘리먼트를 선택한다
 
 7.속성 셀렉터 = // 대괄호([])한에 선택할 속성을 넣는다  
 a[href] { }  //a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택한다    
 p[id='only'] { } // p 엘리먼트 중에서, id가 only인 속성을 갖는 모든 엘리먼트를 선택한다
 div[class='center'] { }  // div 엘리먼트 중에서, class가 center인 속성을 갖는 모든 엘리먼트를 선택합니다.
 
 
 8.구조 가상 클래스 셀렉터 
 p:first-child { }  // :first-child는 p 엘리먼트 중에서, 첫 번째 자식 엘리먼트인 p 엘리먼트를 선택한다 
 div:last-child { } // :last-child는 div 엘리먼트 중에서, 마지막 자식 엘리먼트인 div를 선택한다
 div:nth-last-child(2) {…}  // nth-last-child(2)는 div 엘리먼트 중에서, 마지막에서 두 번째 자식 엘리먼트인 div를 선택한다
 ul > li:last-child {…} // :last-child는 li 엘리먼트 중에서, 마지막 자식 엘리먼트인 li를 선택한다
                       // ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택한다
 ul > li:nth-child(3) {…} //  :nth-child는 li 엘리먼트 중에서, 세 번째 자식엘리먼트인 li를 선택한다
                         // ul의 자식 엘리먼트 중에서, 세 번째 자식 엘리먼트가 li인 것을 선택합니다.
 p:first-of-type {…}  // p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택한다
                      // (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다)
 div:last-of-type {…}  // div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택한다
 p:nth-of-type(2) {…}  // p 엘리먼트의 형제 엘리먼트 중 두 번째 p 엘리먼트를 선택합니다.
 p:nth-last-of-type(2) {…}  // p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택한다
 p:not(#only) {…}  // p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택한다
 div:not(:nth-of-type(2)) {…} // div 엘리먼트의 형제 엘리먼트 중 두 번째 div 엘리먼트를 제외한 모든 div 엘리먼트를 선택한다

    レイアウト用html


    構成
  • html
    CSSを使用してスクリーンを分割する場合、垂直分割と水平分割を順次適用して、コンテンツの流れに追従することができます.
  • 垂直分割:画面を垂直に分割し、要素を水平に配置して、コンテンツを水平に配置できます.
  • 水平分割:各分割された要素を水平に分割し、内部コンテンツを垂直に配置します.
  • 水平に区切られた要素にheight属性を追加すると、水平に区切られた
    • をより直感的に行うことができる.
    例
    <div id="container">
  <div class="col w10">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w70">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
</div>

[코드] 레이아웃을 고려해 작성한 HTML 파일


.w70 { width: 70%; }
.h40 { height: 40%; }
[코드] 클래스 이름에 맞는 CSS 구현

클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 한다

    レイアウトのリセット


    htmlの基本ドキュメントスタイルがレイアウトに干渉する可能性があります
    예시
- 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body> 태그가 가진 기본 스타일에 약간의 여백이 있습니다.
- width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있습니다. (이전 유닛을 통해 박스 크기 측정 기준(box-sizing)에 대해 학습한 내용입니다.)
- 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다fmek
    したがって、レイアウトを行う前に、デフォルトのスタイルを削除するコードを適用します.
    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

[코드] 기본 스타일링을 제거하는 CSS 코드의 예시

    Flexboxスナップレイアウトの使用

  • display:flex分析
    • flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다
display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다.

  <div id="outer">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

[코드] "display: flex"를 적용시키는 예시를 위해 작성한 HTML 코드


#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  border: 1px solid green;
  padding: 10px;
}

[코드] HTML의 div 요소를 선택하여, 부모요소에 "display: flex"를 적용한 예시

    「display:flex」を適用した赤いボックスのサブエレメントが左側から順に配置されます.

    指向性Flex要素(flex-direction)


    flexboxでは、基本的にボックスの垂直分割方向を設定するflex-directionプロパティを親ボックス要素に適用し、水平分割することができます.
    flex-direction 속성 = row(기본값), column
-부모요소에는 display 속성에 flex를 적용 (display: flex)
-자식요소에는 flex 속성에 값을 적용 (flex: 0 1 auto)
    サブエレメントに適用されるflexプロパティにはgrow(膨張指数)、shorth(収縮指数)、base(ボックスのデフォルトサイズ)の値があります.
    サブボックスに属性値を指定しない場合、flex属性はデフォルト値を受け入れます.
    flex: 0 1 auto;  (순서대로 grow, shirink, basis)
[코드] 자식요소에 속성값을 주지않을때 flex 속성의 기본값
    grow,shirnink属性はスケールによって異なる結果を生成する

    grow


    たとえば、親ボックスに複数のサブボックスがあるとします.角.
    サブボックスが持つgrow値の合計がnの場合、
    growプロパティの値を1に設定すると、適用1/nの横または縦の長さを表し、growプロパティの値を2に指定すると、2/nの長さを表します.

    shirink


    shriftはgrowとは逆に箱の大きさが設定された割合で小さくなります
    通常、レイアウトではshirninkを1に設定しgrowプロパティを変更することをお勧めします.
    shripプロパティはwidthまたはflex-basesプロパティのパーセントに基づいているため、実際のサイズを予測するのは難しい

    basis


    サブボックスは、flex-growまたはflex-schripが増加または減少する前にデフォルトのサイズを有します.
    growが0の場合、ベースサイズを指定するとサイズが保持されます
    <div id="outer">
  <div class="left">메뉴</div>
  <div class="right">본문</div>
</div>
[코드] HTML 파일에 작성된 메뉴와 본문이라는 두 가지 자식 박스
.left {
  flex: 0 1 100px;
}  /* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.right {
  flex: 1 1 auto;
} /* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */  
[코드] 왼쪽 메뉴 박스는 크기를 유지해야 하므로 flex-basis 속성에 100px을 적용합니다.

    図の右側のテキストボックスはflex-basesプロパティをautoに設定し、flex-growプロパティの影響を受けます.

    コンテンツのソート

  • axis(軸)は、主軸と十字軸で区切られています.
  • flex-デフォルトで行の場合、主軸は水平軸です.
    mainaxisが横方向の場合crossaxisは縦
  • axis(軸)に整列可能なアトリビュート
    justify-content , align-items
    justify-コンテンツ属性は主軸に対して整列し、items属性は十字軸に対して整列します.
    flex-directionプロパティの値をcolumnに設定すると、mainaxisとcrossaxisが互いに置き換えられます.
    コンテンツを水平に整列(definition-content)
    親ボックスにjustify-contentプロパティを適用すると、サブボックスが
    • に水平に整列します.
  • flex-start
  • flex-end
  • center
  • space-between
    コンテンツ垂直整列(align-items)
  • flex-start
  • flex-end
  • center
  • stretch
    • ドラッグして上下2つのdivサイズを変更
    [接続リスト]コンセプト-2