CSS3 [CSS] SCSS 아키텍처 7-1 pattern 폴더 및 파일 정리 하는 기준 (+ 실제 구성) CSS 공부를 위해 Udemy에서 advanced css인강을 하나 들었었는데, 그 인강에서 SCSS 파일들을 구분해놓은 방식이 신기했었다. 나중에 알고보니까 그렇게 파일을 구분해놓은 것이 CSS 아키텍처 중 하나인 7-1패턴이라는 것이었다. 7-1패턴에 대해 좀 더 알아보기 위해 구글링 중, 좋은 글을 발견해서 중요한 부분만 번역을 하면서 내가 정리해놓았던 부가 설명을 덧붙여서 공유! 원문 : https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture 7-1 Sass Architecture A natural question at this juncture is: “Okay, if .. 2021. 10. 23. [CSS] 화면에 요소 정가운데에 위치시키는 방법 (반응형!!!) + 텍스트 가운데 배치 1. flex 사용하는 방법 (개인적으론 flex방법을 선호한다ㅎㅎㅎ) 부모요소에 display:flex; justify-content:center; align-items:center; item 2. absolute & translate 사용하는 방법 자식요소에 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); item ++ 추가 박스 안에 글자까지 가운데에 위치시키고 싶다면 자식요소에 display:flex; justify-content:center; align-items:center; 를 추가해주면 된다. item 이렇게 하면 2021. 10. 19. [CSS] grid-garden으로 재밌게 공부하는 grid flex를 처음 배울 때 flex froggy라는 https://flexboxfroggy.com/ 사이트에서 이것저것 flex를 가지고 놀았었는데 , grid도 grid-garden (https://cssgridgarden.com/) 이라는 비슷한 사이트가 있길래 여기서 grid를 가지고 놀아봤습니다. Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com Grid Garden A game for learning CSS grid layout cssgridgarden.com flex도 container를 위한 속성과 item을 위한 속성으로 나뉘는데, container 속성 : display, flex-direction, flex-wrap, ga.. 2021. 10. 19. 이전 1 다음
