>TIL:CSS概念原理

9021 ワード
TIL CSS テキストリンク

🙋🏻‍♀️ 目標:面接準備前に知った内容の概念を整理する.

1. Box-sizing


🙌箱の大きさを指定する前に、中身が参照される属性値かどうかを指定します.
キーワード💡: padding box-sizing border-box 
box-sizing: content-box; ("내용물 크기가 작아질바에 박스를 크게 만들어주세요", 기본값)
box-sizing: border-box; ("내용물 크기가 작아지는걸 감소하더라도 박스 크기는 변하면 안되요.")

  • ソース
    mdn: box-sizing

    • 2. Position


    🙌ボックスの位置を調整する属性値.
    キーワード💡: absolute static 
    position: relative; ("원래 있던 자리를 기준으로 위치를 변경 하겠습니다.")
position: absolute; ("근접한 부모의 기본값이 스테틱이 아닌 부모의 기준으로 변경하겠습니다.", relative 로 설정된 부모 컨테이너 기준에 맞춰서 이동)

  • ソース
    mdn: position
    mdn: Layout and the containing block
    • 🙌他の位置属性のStickyとFixedの違いについて説明します.
    キーワード💡: sticky fixed 
    position: sticky; ("top, left같은 포지션을 지정할테니 fixed처럼 뷰포트에서 고정시키지 않고 부모 박스를 기준으로 변경하겠습니다.")
position: fixed; ("부모와 상관없이 Viewport안에서 위치 변경하겠습니다.")

  • ソース
    mdn: margin

    • 3.並べ替え


    🙌これは、テキストまたはボックスを位置合わせする方法です.
    キーワード💡: margin: auto text-align: center translate(50%, 50%) line-height 
    *박스 수평 정렬
margin: auto;
*박스 수직+수평 정렬
transform: translate(50%, 50%);

*텍스트 수평 정렬
text-align: center;
*텍스트 수직+수평 정렬
text-align: center;
line-height: px; (부모 컨테이너 높이만큼)

    3. Background


    🙌Backgroundに関連する属性と属性値.
    キーワード💡: background background-repeat background-position background-size 
    *이미지 반복x
background-repeat: no-repeat;
*이미지 중간 정렬
background-position: center;
*이미지 커버
background-size: cover;

*(팁)한 번에 쓰기🚀
background: center/cover no-repeat url('#');

  • ソース
    mdn: background
    mdn: background-image

    • 3. Transform


    🙌Transformに関連する属性と属性値.
    キーワード💡: translate scale rotate 
    *이동(x축, y축)
transform: translate(15px, -10px);
*확대
transform: scale(1.05);
*회전
transform: rotate(45deg);

*(팁)한 번에 쓰기🚀
transform: translate(10px, 10px) scale(1.1) rotate(90deg);

  • ソース
    mdn: transform

    • 3. Transition


    🙌Transitionに関連する属性と属性値.
    キーワード💡: transition 
    (예시)
.card:hover {
background-color: chocolate;
transition-property: color;
transition-duration: 300ms;
transition-timing-function: ease-in;
}

*(팁)한 번에 쓰기🚀
transition: background-color 또는 all 300ms ease-in;

  • ソース
    mdn: transition
    mdn: animation-timing-function
    • KMPアルゴリズム
    回転マトリクス枠線[テスト符号化]