코코아 클론 2

코코아 클론 챌린지 12일, 13일차

배울 점, 기억할 점 border-radius와 box-shadow: inset을 통해 곡면에 입체감을 줄 수 있다. overflow-x 속성으로 width를 초과한 부분을 어떻게 처리할 지 설정할 수 있다. visible: 기본값으로 내용이 잘리지 않음. 넘치는 내용은 밖으로 흘러 넘침. hidden: 내용이 잘림. x축의 스크롤바가 나타나지 않음. scroll: 내용이 잘림. x축의 스크롤바가 나타남. auto: 내용이 잘림. 필요할 때만 x축의 스크롤바가 나타남. display: flex;는 display: block;은 함께 적용시킬 수 없다. element들이 겹치게 하려면 position: absolute; container에 relative 잊지않기! absolute는 가장 가까운 relat..

노마드 코더 2022.06.18

코코아 클론 챌린지 6일차

배울점, 기억할 점 inline-block는 별로... flexbox 사용 규칙 1. 자식 엘리멘트에는 어떤 것도 적지않는다. 자식을 움직이려면 부모를 flex container로 만든다. 부모를 display : flex; 로 만든다. 2. main axis cross axis x축이 주축, y축이 교차축. justify-content는 주축에 적용. align-items는 교차축에 적용. vh : viewport height 100vh는 100% vh. 창에 꽉 차게. 화면의 크기가 달라도 동일하게. 3. justify-content는 주축에 적용. align-items는 교차축에 적용. 이걸 바꿀 수 있다. flex 했을 때, 디폴트는 row. flex-direction: column 을 했을 때,..

노마드 코더 2022.06.11
728x90