📚TIL

day31

float

• 요소를 수평정렬 하기 위해 float 속성 사용
• float를 적용한 마지막 요소의 다음 요소에 clear를 통해 해제해줘야 레이아웃이 꼬이지 않음
• float 해제법 : 가상클레스를 만들어 부모요소에 클레스 추가

.clearfix::after {
	content : ""	//가상 성택자는 content를 필수적으로 추가
	clear : both;
}

• float를 해제하는 부모요소 내부에는 float를 사용하는 요소만 있어야 함
• float은 사용할 요소의 display 속성을 block으로 변경함
• flex, inline-flex, grid의 경우에는 float 속성 적용이 안됨

position

• 요소의 위치 특성을 지정하는 속성
• 위치를 직접 설정한다기 보단 위치의 특성을 정의하고 별도의 속성을 통해 정확한 위치를 설정
• absolute : 부모요소를 기준으로 배치하는 값으로 해당 요소가 기준으로 삼을 수 있는 영역을 부모 요소에 position속성을 넣어 지정해줘야 함 - relative가 가장 무난
• fixed : 뷰포트 기준으로 정렬되며 바로 위 부모요소의 position값도 fixed에 영향을 주지 못함 - transform, perspective, filter 속성 중 하나라도 조상에 존재할 시 그 조상요소를 기준으로 정렬됨
• absolute, fixed 값을 사용했을 대 display가 block이 될 수 있음

쌓임 맥락(Stacking Context)

• html요소는 x, y, z 축으로 이루어져 있으며 브라우저에 3차원 효과를 이용해서 요소가 z축에서 얼마나 높은지에 따라 쌓이는 순서를 달리할 수 있음
• z-index를 이용하여 요소의 쌓는 순서를 변경할 수 있음
• opacity, transform은 요소를 좀 더 위에 쌓을 수 있는 대표적인 방법

z-index

• 요소의 쌓는 순서를 변경할 수 있으며 사용할 수 있는 환경이 정해져 있음
• 기본값은 auto로 브라우저가 작동으로 값을 만들어 냄
• 조상으로부터 영향을 받지 않고 별도로 값을 지정하지 않은 상태라면 0인 상태

flex

• 1차원 레이아웃 구조를 작업할 때 사용
• 차원 : x(수평), y(수직)축에 해당하는 것
• block요소를 사용하며 기본적으로 수직으로 쌓이는 레이아웃을 가짐
• flex 적용시 자식요소가 x축으로 정렬됨
• flex container : 부모요소 - 정렬을 정의하는 요소
• flex items : 자식요소 - 정렬이 되는 요소들
• inline-flex : inline 특성과 유사하여 수평으로 쌓이며 가로, 세로 너비가 최대한 줄어들려 함 - 글자를 다룰 때 많이 사용

flex 속성

• flex-direction : flex 내부의 아이템들이 어느 축을 기준으로 정렬될 것인지를 정함
• flex-wrap : 각각의 item들이 줄바꿈 처리 유무를 정함
• justify-content : 주축의 정렬 방법을 정함
• align-items : item들이 한줄일 때 교차축의 정렬 방법을 정함
• align-content : 2줄이상 item들이 쌓여져 있을 때 교차축의 정렬 방법을 정함
• gap : item사이에 여백 만들기

flex-items

• flex-grow : item의 증가 너비 비율얼 설정
• flex-shrink : item의 감소 너비 비율을 설정
• flex-basis : item의 기본 너비를 설정
• flex : grow, shrink, basis를 순서대로 한번에 사용할 수 있는 단축 속성
• order : flex item의 순서를 지정하는 속성
• align-self : 지정한 item을 개별적으로 교차축 정렬 시 사용하며 align-items가 가진 모든 속성 사용 가능

grid

• 1차원 레이아웃 구조를 작업할 때 사용
• grid container : 부모요소 - 정렬을 정의하는 요소
• grid items : 자식요소 - 정렬이 되는 요소들
• inline-grid : inline 특성과 유사하여 수평으로 쌓이며 가로, 세로 너비가 최대한 줄어들려 함 - 글자를 다룰 때 많이 사용
• grid contents : grid내에 item이 차지한 범위

grid 속성

• grid-template-rows/columns : 행/열 축을 정의하는 속성
• grid-auto-rows/columns : 자동적으로 정해진 grid 크기에 맞춰 행/열 정렬
• grid-auto-flow : 각각의 item이 어떤 축의 방향으로 쌓일지 지정
• dense : grid-auto-flow의 속성 중 하나로 item 정렬시 빈공간이 있으면 그 공간을 채워서 정렬
• grid-row/column : span(num) : item이 사용할 수 있는 cell이 총 몇개로 확장될 수 있는지 지정
• justify/align-content : grid contents를 행/ 열(수평/ 수직) 축으로 정렬
• justify/align-items :grid item들을 행/ 열(수평/ 수직)축으로 정렬
• { grid-area : name } : container 내부 item을 grid에서 사용할 이름을 만들어 인위적으로 부여
• grid-template-areas : grid 역역을 item 이름을 통해서 레이아웃 설정
• grid-gap : item사이에 여백을 추가할 때 사용하며 하휘 호환성 고려시 grid라는 키워드를 붙이고 grid,flex의 통합을 위해 사용시 grid를 제외하고 사용

grid items

• grid-row-start/end : 각각의 행의 라인 번호 중 어떤 번호에서 시작/마무리 할지 설정
• grid-column-start/end : 각각의 열의 라인 번호 중 어떤 번호에서 시작/마무리 할지 설정
• grid-row/column : start, end를 동시에 작성 가능
• justify/align-self : justify/align-items를 item 개별적으로 관리할 수 있음

CSS 지식

• border의 색상을 입력하지 않을 시 요소가 가지고 있는 글자 색상 참조
• 기본적으로 html 요소들은 수직으로 쌓임
• .container .item:nth-child(4) : 컨테이너에 있는 4번째 아이템을 선택
• 전역으로 사용되는 style들은 사용할 요소를 정의하기 전에 정의해주는 것이 좋음
• inline 속성은 가로, 세로 너비가 최소한의 너비를 사용하도록 할 수 있으며 수직으로 쌓이는 특성이 수평으로 쌓이도록 변경됨
• perspective : 요소의 삼차원 변화에 대한 원근 효과를 제공하는 속성으로 화면에 특정 효과를 추가하기 위해 사용했다 다른 요소의 위치 기준에 영향을 미칠 수 있음
• 주축(main-axis) : 주가되는 축, 교차축(cross-axis) : 주가되는 축의 반대축
• height 값을 따로 지정하지 않았을 때 auto라는 값을 가지며 div 특성상 세로 너비는 최대한 줄어들으려하고 가로너비는 최대한 늘어나려 함
• caniuse : css속성이 호환되는 브라우저에 대한 정보
• fraction(fr) : 공간 비율을 의미하는 단위
• repeat(숫자, 단위) : 반복할 숫자와 단위를 지정하여 간단하게 그리드의 행과 열을 생성
• cell : 각각의 칸
• line : 아이템의 열과 열사이, 행과 행사이에 순서를 매김
• container > * {} : container 내에 있는 모든 자식요소를 정의

🌊하루를 마치며

css를 공부한지 오래됐는데 오랜만에 css를 마주하니 재밌었다. 프로젝트로 vanilla JS에 시달리다 만나서 더 반가웠던 것 같다. 학교에서 배운적이 있던 부분들도 있었지만 새롭게 배운 것들이 참 많았다. 새삼 내가 얼마나 css 공부를 하지 않았는지 느꼈던 하루였다. grid, flex의 기능에 대해선 알고 있었지만 자세히 몰라서 내가 원하는 대로 적용되는 것을 골라썼는데 제대로된 지식 기반이 없어서 적용이 안됐던 것 같다. 자세히 배우니 내가 알던 것 보다 더 디테일한 부분의 레이아웃까지 짤 수 있겠다는 생각이 들었다.
오늘은 다행히 강의가 밀리지 않았는데 CSS마저도 강의를 빨리 듣지 못했던 점이 아쉽다. 생각보다 기록해놔야 할 것들이 많았어서 시간을 뺐긴것 같다. 앞으로 계속 공부하면 나아질 것이라고 생각한댱 ㅎㅎ 내일은 다시 vanilla JS공부를 하고 프로젝트 수정을 꼮!!! 해야겠다~ 호ㅏ이띵😊