DAY 19

오버플로우

CSS의 오버플로우(overflow) 속성은 요소의 내용이 요소 자체의 크기를 초과할 때 처리 방법을 지정하는 속성이다. 즉, 요소에 내용이 너무 많거나 너무 크면 어떻게 처리할지를 설정하는데 사용된다.

overflow 속성은 다음과 같은 값들을 가진다:

1. visible: 기본값으로, 내용이 요소의 영역을 넘어가더라도 요소의 경계를 벗어날 수 있다. 다른 요소들을 덮을 수 있다.

2. hidden: 내용이 요소의 영역을 벗어날 경우, 넘치는 부분은 잘린다. 즉, 요소의 외부로 표시되지 않는다.

3. scroll: 내용이 요소의 영역을 넘어갈 경우, 스크롤 바가 나타난다. 이를 통해 사용자는 내용을 스크롤하여 숨겨진 부분을 볼 수 있지만 스크롤 바가 나타나지 않을 수도 있다.

4. auto: 내용이 요소의 영역을 넘어갈 경우, 필요에 따라 스크롤 바가 나타난다. 내용이 요소의 영역 내에 있으면 스크롤 바는 나타나지 않는다.

5. overlay: 내용이 요소의 영역을 벗어날 경우, 스크롤바 대신 내용 위에 스크롤을 위한 버튼이 나타난다. 단, 모든 브라우저에서 지원되는 것은 아니며, 브라우저에 따라 동작이 달라질 수 있다.

overflow 속성은 주로 div, span, p, ul, li 등의 블록 또는 인라인 요소에 적용되며 이 속성을 이용하여 내용이 넘칠 때의 처리 방식을 조절하여 이용할 수 있다.

우리의 과제에는 모서리가 둥근 사진을 만들기 위해

    overflow: hidden;

을 적용시켰다.

하지만 카드들을 10개정도 만들고 그것을 배치하려니 한 줄로 밑으로 쭉 내려가는 형태가 나와서 새로운 속성을 적용시켰다.

CSS GRID

CSS 그리드(Grid)는 웹 페이지의 레이아웃을 만들기 위한 레이아웃 시스템이다.
CSS 그리드를 사용하면 행(row)과 열(column)을 기반으로 웹 요소를 배치할 수 있으며, 복잡한 레이아웃을 상대적으로 쉽게 구현할 수 있다.
그리드 시스템은 Flexbox와 함께 웹 페이지의 레이아웃을 제어하는 강력한 기능을 제공한다.

CSS 그리드를 사용하기 위해서는 부모 요소(컨테이너)에 display: grid; 속성을 설정하고, 그 안에 자식 요소(아이템)를 배치한다.

아래는 CSS 그리드의 기본적인 사용법입니다.

.container {
  display: grid;
}

그리드 템플릿 정의: 그리드 아이템들이 배치될 행과 열을 정의한다. grid-template-columns은 열의 크기를, grid-template-rows는 행의 크기를 정의한다.

.container {
  display: grid;
  grid-template-columns: 100px 200px 150px;
  grid-template-rows: 50px 100px;
}

그리드 아이템 배치: 자식 요소를 그리드 아이템으로 배치한다. grid-column과 grid-row 속성을 사용하여 아이템을 원하는 위치에 배치할 수 있다.

.item {
  grid-column: 1 / 3; // 아이템을 1열부터 3열까지 확장
  grid-row: 1 / 2; // 아이템을 1행에서 2행까지 확장
}

또한 이렇게 그리드를 만들 경우 특정 아이디가 존재하지 않아 이들을 요소로서 사용하기가 힘든데 이럴 경우 사용하는 속성이 있다.

nth-type 선택자

li:first-of-type {
	background-color : yellow;
}

이럴 경우 첫 번째 요소의 배경색이 노란색이 된다.

li:nth-of-type(3) {
		background-color : yellow;
        grid-column : 1 / 2; // 아래 설명
}

이럴 경우 세 번째 요소의 배경색이 노란색이 된다.
하지만 생각해야 할 것이 첫 번째 요소는 1번에서 시작해서 2번에서 끝나고 두 번째 요소는 2번에서 시작해서 3번에서 끝난다. 그렇기 때문에 grid-column을 이용해도 3번 카드만 지정된다. 그렇기 때문에 3번 카드가 한 열을 다 차지하기 위해서는 grid-column을 1/3으로 수정해준다.

그렇게 되면 위의 사진처럼 3번 카드가 모든 자리를 차지할 수 있다.