[TIL] 항해99 22일차

돼지·2022년 1월 31일

항해99

목록 보기

27/104

리액트 숙련주차 과제를 완성하였다.

물론 완벽하지 않고 엉성하고 개판으로 우연히 기능은 구현하게 됐다.

강의만 보면 따라올 수 있는 수준이었으므로 내가 온전히 구현했다라고 생각하지 않는다.

기능도 기능이지만 css기초도 모르는 내 수준에 또 한번 감탄하며 공부할 자료를 찾아보자

CSS

overflow

요소의 컨텐츠가 너무 커서 요소의 블럭 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다.

키워드 값

visible : 기본값. 요소가 넘어도 그대로 출력된다.
hidden : 숨기기. 요소가 컨텐츠 블럭을 넘으면 자동숨김처리 된다.
clip : 히든과 마찬가지로 콘텐츠 안쪾여백 상자에 맞춰 자른다.
그러나 코ㄷ를 사용한 스크롤링도 방지하므로 어떤 스크롤도 불가능하다.
scroll : 스크롤. 요소가 넘으면 스크롤을 제공한다.
auto : 기본값처럼 보이다가 값이 넘으면 스크롤을 제공한다.

기능구현 할 떄 박스안에 텍스트가 넘어버리거나 숨겨진 처리는 도와준 역할을 하였다.
값을 넣으면 바로 변하기 때문에 이해보다 눈으로 보며 처리할 수 있어 좋았다.

번외로 -x, -y도 있어 x축과 y축을 따로 지정할 수 있다.

max-height

요소의 최대 높이를 정의한다.

내용이 최대 높이보다 크면 넘치게 된다.
(overflow를 써야할 시간)

max-width

요소의 최대 너비를 정의한다.

display

요소를 블록과 인라인 요소 중 어느쪽으로 처리할지와 함께 flow, grid, flex 처럼 자식요소를 배치할 때 사용할 레이아웃을 설정한다.

flex

flex : 아이템들은 가로방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. (마치 inline처럼)
height는 컨테이너의 높이만큼 늘어난다.

inline-flex도 있는데 아이템의 배치와 관련이 있다기보다 컨테이너가 주변요소들과 어떻게 어우러질지 결정하는 값이다.
inline-flex는 inline-block처럼 동작해요.

flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성

값으로 4개가 있으며 row, row-reverse, column, column-reverse

flex-wrap : 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

값은 3개가 있으며 nowrap, wrap, wrap-reverse

flex-flow : flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 된다

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

grid

Flex와 Grid의 큰 차이점

Flex는 한 방향 레이아웃 시스템이고 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

전체적인 레이아웃은 grid로 잡고 각 부분에 flex와 grid를 섞어 사용할 수 있다.

그리드 컨테이너 (Grid Container) : 그리드를 적용하는 그리드 전체 영역.

그리드 아이템 (Grid Item) : 그리드 컨테이너의 자식 요소들

그리드 트랙 (Grid Track) : 그리드의 행(row)또는 열(column)

그리드 셀 (Grid Cell) : 그리드의 한 칸을 가리킨다.

그리드 라인(Grid Line) : 그리드 셀을 구분하는 선

그리드 번호(Grid Number) : Grid 라인의 각 번호

그리드 갭(Grid Gap) : Grid 셀 사이의 간격

그리드 영역(Grid Area) : Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합

flex와 마찬가지로 컨테이너에 적용하는 속성, 아이템에 적용하는 속성으로 나뉜다.

이거 외에도 정말 많지만 출저님의 사이트에서 보면 좀더 이해가 잘간다.
https://studiomeal.com/archives/533 - 그리드 출저
https://studiomeal.com/archives/197 - 플렉스 출저

box-sizing

요소의 너비와 높이를 계산하는 방법을 지정한다.

contnet-box : CSS 표준이 정의한 초기 기본값. width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 370px입니다.
요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.

border-box : width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 350px입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 border-box를 사용해 요소를 사라지게 할 수는 없습니다.
요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.

..글 읽는거 보다 MDN가서 예제를 보면 이해가 빠르다.