반응형

온라인 강의/Advanced CSS and Sass [Udemy] 70

92. Creating Our First Grid

아래와 같이 $ 달러를 작성하면 $가 자동으로 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..

88. Wrapping up the Trillo Project: Final Considerations

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

87. Writing Media Queries - Part 2

@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: #..

84. Building the User Reviews Section

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

반응형