배울 점, 기억할 점
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는 가장 가까운 relative를 가진 부모 기준으로 움직인다.
비슷한 구조를 가진. 반복되는 구조는 따로 components폴더에 css 폴더를 만든다.
color: rgba(0,0,0,0.3); : background에만 영향
opacity: 전체(글자, 박스)에 영향
사진 사이즈 변경 시, 가로 세로 비율 그대로 유지하려면 object-fit: cover; 추가
html css 너무 재밌다 ㅎㅎㅎ
728x90
'노마드 코더' 카테고리의 다른 글
| 코코아 클론 2주 완성 챌린지 수료! (0) | 2022.06.30 |
|---|---|
| 코코아 클론 챌린지 14일, 15일차 (0) | 2022.06.20 |
| 코코아 클론 챌린지 11일차 (0) | 2022.06.17 |
| 코코아 클론 챌린지 10일차 (0) | 2022.06.15 |
| 코코아 클론 챌린지 9일차 (0) | 2022.06.14 |