전체 글

[HTML] Web 클론코딩 (style-box)

* 사용한 기술 HTML SCSS * https://paint-box.com/ 해당사이트를 참고하여서 의류 쇼핑물 사이트를 만들 예정이다. * 해당사이트의 웹구성은 언제든지 바뀔수도 있으니 참고 * HTML과 SCSS를 이용하여 레이아웃과 스타일만 적용 예정 * HTML, SCSS연습에 목적을 두고있다. [사진출처] * https://unsplash.com/ [font] https://fonts.google.com/specimen/Montserrat https://fonts.google.com/specimen/Caladea * header 구성 * index.html Nail Studios Shop Polish Journal * _titles.scss %miniTitle { font-family: 'Mo..

[Useful_website] 변수명지어주는 사이트

* 변수명 지어주는 사이트 https://www.curioustore.com/#!/ 변수명을 작명하기 어려울때 한글로 변수명을 입력하면 변수명을 만들어준다. 사용방법이 되게 간단하며 변수명이 고민될때 매우 유용하게 사용된다. remove, get, set, insert, select, update, delete와 같이 요청에 맞는 변수명도 선택이 가능하다. * 사이트 사용 방법

[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:..