차근차근 배움터

fr 과 repeat을 이용하여 grid를 조정할 수 있다 1. grid-template-columns: repeat(2, 200px) 1fr; 2. grid-template-columns: repeat(3, 1fr); 3. 4.

아래와 같이 $ 달러를 작성하면 $가 자동으로 1, 2, 3, 4, 5 ,6 순서대로 숫자를 작성해준다. .container>.item.item--$ 아래와 같이 사용해 봤는데 grid-gap -> gap grid-row-gap -> row-gap grid-column-gap -> column-gap 이제는 위의 기능의 이름이 변경되었다고 한다. flex 박스로 복잡하게 만드는 것보다 간단하게 구현할 수 있다. .container { background-color: #eee; width: 1000px; margin: 30px auto; display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 200px 200px; // gr..

Firefox를 사용하기 때문에 새로운 브라우저를 설치해 봤다

CSS Grid로 인해서 편하게 레이아웃을 짤 수 있게 되었다. 이번 강의에서는 css grid 와 flex 도 비교할 수 있을 것이다.

Safari 와 같은 곳에서 적용되지 않는 속성들은 이렇게 작성한다. //New Browser @supports (-webkit-mask-image: url()) or (mask-image: url()) { // background-image: url("../img/chevron-thin-right.svg"); background-size: cover; background-color: var(--color-primary); -webkit-mask-image: url("../img/chevron-thin-right.svg"); -webkit-mask-size: cover; mask-image: url("../img/chevron-thin-right.svg"); mask-size: cover; backgro..

@media only screen and (max-width: $bp-medium) { padding: 2.5rem 0; } 반응형까지 모두 완성했다 _base.scss /* COLORS Primary: #eb2f64 Primary light: #FF3366 Primary dark: #BA265D Grey light 1: #faf9f9 Grey light 2: #f4f2f2 Grey light 3: #f0eeee Grey light 4: #ccc Grey dark 1: #333 Grey dark 2: #777 Grey dark 3: #999 */ :root { --color-primary: #eb2f64; --color-primary-light: #ff3366; --color-primary-dark: #..

flexbox가 media query 작성을 얼마나 쉽게 할 수 있게 하는 지 알 수 있다 아래와 같은 방식으로 media query를 너비 조정과 모바일 화면에 더 최적화되게끔 만들었다 @media only screen and (max-width: $bp-medium) { padding: 2rem; margin-bottom: 3rem; }

버튼까지 만들기 완료

div 대신 figure 사용해서 review 요소를 만드는 것이 좋다 HTML로 특수기호를 넣고 싶을 때 여기에서 HTML Entities 아래에서 확인 가능하다 https://css-tricks.com/snippets/html/glyphs/ Glyphs | CSS-Tricks capital O, slash css-tricks.com _components.scss //////////////////////////////////////////////// /// LOGO .logo { height: 3.25rem; margin-left: 2rem; } //////////////////////////////////////////////// /// SEARCH .search { flex: 0 0 40%; dis..