2022/07/29

공부하고 기록하기·2022년 7월 29일

오늘 공부한 내용 ⌨️

Grid

그리드는 UI를 자유자재로 배치할 수 있는 강력한 속성이다. 따라서 자유롭게 배치하는 만큼 마크업의 논리적인 순서가 중요하다. 그리드는 가로와 세로 칸을 어떻게 나눌것인지 정하는 것 부터 시작한다.

그리드의 행과 열을 나눌 때는 grid-template-row, grid-template-column을 사용한다. 행과 열을 나눈 다음엔 각각의 그리드 아이템을 배치해주면 된다.

아이템의 배치는 grid-area 속성을 사용하면 되는데 이 속성은 행의 시작 번호, 열의 시작 번호, 행의 끝 번호, 열의 끝 번호 순으로 네 개의 숫자를 값으로 받는다.

참고로 자바스크립트는 인덱스를 0부터 시작하는 것과 달리 CSS에서는 1번부터 시작한다.

.outer {
	display: grid;
	grid-template-columns: 140px 1fr 120px;
}

.inner1 {
	grid-area: 1/1/4/2;
}

.inner2 {
	grid-area: 1/2/2/3;
}

그리드의 자식 요소인 그리드 아이템은 block 컨텐츠 요소가 된다.

예를 들어 display: grid인 요소의 그리드 아이템(자식 요소)으로 a 태그가 있다. a태그에 margin: auto를 주면 a태그의 자식 요소는 정중앙 정렬이 된다.

a태그의 기본 속성은 inline이지만 그리드 아이템이 됨으로써 block 요소가 되기 때문에 margin 값을 주는 것이 가능하다.

그리드 아이템에 flex 속성을 쓸 수 있다.

그리드 아이템은 flex의 개별 정렬이 가능한 속성인 align-self와 justify-self를 사용할 수 있다.

.outer {
	display: grid;
}

.inner {
	align-self: center;
	justify-self: center;
}

소문자로 마크업 된 텍스트를 대문자로 바꾸기

text-transform의 uppercase는 소문자로 마크업 된 텍스트를 대문자로 바꾸고 크기도 대문자 사이즈만큼 커진다.

반면에 font-varient의 small-caps는 소문자로 마크업 된 텍스트를 대문자로 바꾸지만 크기는 기존 소문자의 사이즈를 그대로 유지한다.

text-transform: uppercase;

font-varient: small-caps;

어려웠던 내용 🤯

기존에 작성된 페이지를 보고 어떻게 해야 semantic하게 마크업을 잘 짤 수 있을까 라는 고민을 계속 하고있다. 김데레사 선생님께 배웠던 내용 중 UI를 위한 마크업이 아닌, UI에 마크업을 맞추는 게 아닌, semantic한 논리적인 마크업을 짜고 그에 따른 UI는 거기에 맞추라는 말씀이 기억에 남는다. 그러다보니 마크업을 짜는데 시간이 많이 들기도 한다. 하지만 접근성을 준수해야 하는 이유에 충분히 설득력이 있고 거기에 충분히 공감하기 때문에 마크업을 짜는 데 있어서 길어지는 시간이 낭비라고 생각되지는 않는다.

아직은 마크업과 CSS 작성에 비효율적인 부분이 많다고 생각하고, reflow의 발생과 같은 성능 이슈 개선에 대해 생각해 볼 만큼의 여유는 없는 것 같다. 차근차근 배운대로 복습하고 꾸준히 시간과 열정을 갈아넣다 보면 언젠가는 한 단계 성장할 것이라 생각된다.