Front-end/100DaysOfCode
[100DaysOfCode] 19강
year.number
2022. 8. 1. 20:30
overflow

border radius 값이 이미지에 먹히지 않는 현상 발생!
💡overflow: hidden
* 컨테이너 자식에게 적용X, 컨테이너 자체에 적용O
main 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을 쓰는 것이다