[100DaysOfCode] 19강

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을 쓰는 것이다