-
[100DaysOfCode] 19강Front-end/100DaysOfCode 2022. 8. 1. 20:30
overflow
border radius 값이 이미지에 먹히지 않는 현상 발생!
💡overflow: hidden
* 컨테이너 자식에게 적용X, 컨테이너 자체에 적용Omain li { display: flex; background-color: white; box-shadow: 0px 4px 16px 2px rgba(219, 219, 219, 0.561); border-radius: 16px; overflow: hidden; width: 600px; }
CSS grid
💡 Task
- Card를 2개씩 한 줄에 두고 싶다
- Card 3는 한 열을 다 차지하게 하고 싶다/* css grid */ display: grid; /* 그리드 내 사용 가능한 공간 정의하는 방법: fr(fraction) */ grid-template-columns: 1fr 1fr; /* 맨 앞 행과 맨앞 열의 틈을 정하는 방법: gap */ gap: 100px 200px;
개발자 도구를 통해 grid 버튼을 눌러서 확인해보면 2개씩 한 줄에 정렬된 것을 확인할 수 있다
nth-type
/* 부모 요소(ul) 안에서 찾을 수 있는 첫 번째 li 개별 항목을 목표로 한다 */ /* li:first-of-type { background-color: blue; } */ li:nth-of-type(3) { background-color: blue; color: white; /* 요소가 몇 개의 열을 차지해야 하는지 명령 */ grid-column: 1 / 3; /* 3 대신 span 2도 가능 (중요한 열은 몇 개인가? 이 요소가 몇 개의 열을 추가해야 하는가?) */ }
개발자 도구로 grid를 확인해보면 맨 좌측이 1, 우측이 3이기 때문에 grid-column에서 1 / 3을 쓰는 것이다
'Front-end > 100DaysOfCode' 카테고리의 다른 글
[100DaysOfCode] 21강 (0) 2022.08.13 [100DaysOfCode] 20강 (0) 2022.08.05 [100DaysOfCode] 18강 (0) 2022.08.01 [100DaysOfCode] 17강 (0) 2022.08.01 [100DaysOfCode] 16강 (0) 2022.08.01