Study/HTML,CSS

[CSS_study] display : grid_8 auto-fit & auto-fill

* auto-fit & auto-fill repeat() 함수 안에서만 동작한다. 이 둘을 이용하면 responsive website(반응형 웹사이트)를 손쉽게 만들 수 있다. 즉, 대부분의 경우 repeat()의 첫번째 인자로 직접 숫자를 쓰는 것보다 auto-fill, auto-fit 둘 중 하나를 쓰는 경우가 좋은 방법이다. * auto-fit은 유동적인 사이즈를 위해서 사용되고 auto-fill은 정확한 사이즈를 위해 사용된다. element들을 같은 사이즈로 맞추고싶다면 auto-fill element들의 크기도 커졌으면 좋겠다면 auto-fit (참고) auto-fill에 하나의 요소가 추가되면 빈공간에 할당된다. (참고) auto-fit에 하나의 요소가 추가되면 row안에 맞추기 위해서 다른..

[CSS_study] display : grid_7 minmax & min-content & max-content

* minmax(min, max) element가 가능한 한 엄청 크길 원하는데, 동시에 엄청 작게 되는것은 원치 않을 때 ex) grid-template-columns: repeat(5, minmax(100px, 1fr)); - 최소 100px, 최대 1fr * max-content content의 크기만큼 cell의 크기를 늘린다. * min-content content의 크기를 최대한 줄여 cell의 크기를 줄인다. 어떻게 content가 보여야 하는지 디자인하는 것이다. (참고) repeat(), auto-fit, auto-fill, minmax와 결합하여 반응형 디자인을 만들 수 있다. * min-content & max-content 예시 코드 This is a very long text Th..

[CSS_study] display : grid_6 place-self & auto columns and rows

* place-self : [수직] [수평] (child에만 적용되는 property) justify-self : child의 수평 align-self : child의 수직 이 둘을 다 포함한게 place-self : align-self/justify-self 순서 * grid-auto-rows: (크기) default value를 설정해두어 내가 만들어놓은 row보다 더 많은 content가 있으면, 자동으로 row를 만든다. 얼마나 많은 element들을 가지는지 상관하지 않을 때 사용 * grid-auto-flow: (방향) [기본값: row] flex-direction과 비슷하다. 새로운 row를 만들지, 새로운 column을 만들지에 대한 방향을 결정한다. * grid-auto-columns: ..

[CSS_study] display : grid_5 place-items & place-content

* place Items & place Content * items는 각각의 cell을 의미한다. * content는 grid 전체를 의미한다. * jusitfy(align)-items은 각각의 셀 하나하나에 어떤 걸 적용할지에 관한것 (셀안에서 항목이 이동) * justify(align)-content는 grid 전체를 움직이게 된다. * place-items : [수직] [수평] justify-items 수평(가로) // default=stretch align-items 수직(세로) // default=stretch 이 둘을 다 포함한게 place-items : align-items/justify-content 순서 * place-items 예시 코드 .grid { display: grid; gap:..

[CSS_study] display : grid_4 grid-template & fr (fraction)

* fr(fraction) fr(fraction)은 사용 가능한 공간을 의미한다. 즉 기본적으로 grid에서 가질 수 있는 만큼의 공간을 차지한다. fr값은 비율로 공간을 나눈다. ex) grid의 width가 작아지면 1fr의 값도 작아진다. 따라서 화면 크기가 변해도 비율은 그대로이다. 모바일에서도 호환되는 유연한 layout을 만들 수 있다. * fr은 전역으로 결정되는 것이 아닌 grid container에서 결정된다. 따라서 fr을 쓰기 위해서는 grid container에 height을 명시해야 한다. block은 width와 height가 주어져 있지 않은 경우에는 width는 가능한 한 최댓값, height은 0이다. 따라서 fr을 쓰려면 grid container에 height만 써도 동..

[CSS_study] display : grid_3 (Line Naming)

* Layout using named grid lines grid-template-rows 및 grid-template-columns 속성으로 그리드를 정의할 때 그리드의 일부 또는 모든 라인에 이름을 지정할 수 있다. * Line Naming (예시코드) body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .grid { display: grid; gap: 10px; grid-template-columns: [first-line] 100px [second-line] 100px [third-line..