목차
쌓임 맥락(stacking context)
쌓임 맥락(stacking context)은 HTML 요소들이 화면 위에 어떤 순서로 겹쳐서 표시되는지를 결정하는 3차원적인 개념이다. 요소가 3차원에서 쌓이는 기준 틀이라고 볼 수 있다.
z-index는 같은 쌓임 맥락 안에서 쌓이는 순서를 지정한다.
새 쌓임 맥락을 생성하는 조건은 다음과 같다.
- position이 relative, absolute, fixed, sticky이면서 z-index가 auto가 아닌 값
- translate 속성으로 이동하거나 margin 값을 음수로 가져서 요소가 서로 겹칠 때
- opacity < 1, filter, transform, will-change 등 효과가 적용된 경우 등
자세한 내용은 mdn 홈페이지 참고.
쌓임 맥락 - CSS: Cascading Style Sheets | MDN
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는
developer.mozilla.org
isolation 속성을 부모 요소에 사용하여 속성 값을 isolate으로 지정하면 새로운 쌓임 맥락을 생성할 수 있다. 그러면 각 요소에 전부 z-index를 주지 않아도, 컨테이너 안에 쌓임 맥락을 생성해서 하나의 요소에만 z-index를 지정해도 된다.
위에 겹친 요소 때문에 아래에 있는 인터랙티브 요소를 클릭할 수 없을 때 pointer-events: none;을 지정하면 클릭할 수 있다.
Subgrid
서브그리드는 그리드 컨테이너의 그리드 아이템(자식 요소)이 부모의 그리드 트랙(행/열)을 그대로 상속해서 정렬되도록 만드는 기능이다. 즉, 중첩된 그리드 컨테이너도 부모 그리드의 선(grid lines)을 공유한다.
<div class="grid">
<div class="item">
<div class="subitem"></div>
</div>
</div>.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
}
.item {
display: grid;
grid-column: 2 / 7;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
.subitem {
grid-column: 3 / 6;
grid-row: 1 / 3;
}
subgrid는 display: grid가 설정된 요소의 grid-template-columns 또는 grid-template-rows 속성에 지정한다. 그러면 subitem이 조부모를 기준으로 배치된다.
동작하는 원리는 다르지만, flex의 display:contents와 비슷하게 보일 수는 있다.
word-break 속성을 사용하면 단어를 분리하는 방식을 지정할 수 있다. keep-all 값을 지정하면 단어 단위로 줄바꿈된다.
그리드 레이아웃(line name)
라인 번호로 배치하는 방법과 이름을 지정해서 배치하는 방법을 배웠었다. 이번에는 라인에 이름을 부여해서 배치하는 방법을 살펴보자.
grid-template-columns 또는 grid-template-rows 속성 값으로 길이 앞에 [] 기호로 묶어서 이름을 할당하여 라인 이름을 부여할 수 있다. 이름 뒤에는 -start 또는 -end를 붙여서 구간을 지정한다.
.grid-container {
display: grid;
grid-template-columns: [name1-start] 1fr [name2-start] 2fr [name2-end] 1fr [name1-end] 1fr;
.grid-item1 {
grid-column: name1-start / name2-end;
}
/* name2 영역 전체 차지 */
.grid-item2 {
grid-column: name2;
}
}
컨테이너 쿼리
컨테이너 쿼리는 요소(컨테이너)의 크기에 따라 자식 요소의 스타일을 조절할 수 있게 해주는 CSS 기능이다. 즉, 브라우저 뷰포트가 아니라 부모 요소의 너비나 높이 등을 기준으로 반응형 스타일을 만들 수 있다. 작은 컴포넌트 단위에서 더 유연하고 재사용 가능한 반응형 UI를 만들 수 있게 된다.
컨테이너를 정의하는 방법은 아래와 같다.
.container {
container-type: inline-size; /* 너비만 기준으로 쿼리 적용 */
container-name: card; /* 선택적 이름 */
}
그러면 컨테이너 쿼리를 아래와 같이 정의했을 때, .item 요소는 .container의 너비가 400px 이상일 때만 스타일이 적용된다.
@container (min-width: 400px) {
.item {
font-size: 2rem;
}
}
Tailwind CSS 인트로
테일윈드(Tailwind)는 순풍(뒤에서 부는 바람)이라는 뜻으로, Bootstrap 같은 프리 빌트인(Pre Built-In) 컴포넌트 방식과 달리 유틸리티 기반(Utility-first) 개발 방식을 제공한다. 완제품 형태가 아닌, 필요한 부품을 조립하는 방식으로 커스터마이징할 수 있다.
클래스를 조립하는 것만으로 스타일링을 변경할 수 있다. Tailwind CLI를 사용하면 npm으로 tailwindcss 패키지를 설치하고 나서 패키지를 실행시켜야 사용한 유틸리티 코드를 빌드해준다.
Tailwind는 사용한 유틸리티 코드만 빌드한다.
Git stash
git stash 명령어는 Git에서 변경된 파일을 임시로 보관하고 나중에 다시 적용할 수 있는 기능이다. 주로 아직 커밋하지 않은 변경 사항이 있지만, 다른 브랜치로 이동하거나 다른 작업을 하려고 할 때 사용한다.
변경된 파일이 아직 working directory에 있을 때 커밋하지 않고 다른 브랜치로 이동하게 되면, 수정 사항이 이동한 브랜치에 반영되고, 이전 브랜치에서 수정 사항은 사라진다. 변경된 파일이 있을 때는 무조건 커밋을 한 후에 브랜치를 이동해야 한다. 하지만 커밋하지 않고 이동하려면 git stash 명령어를 사용하면 된다.
# 임시로 숨겨놓은 변경 사항의 목록을 조회한다.
git stash list
# 임시로 숨겨놓은 변경 사항의 내용을 조회한다.
git stash show
# 임시로 숨겨놓은 변경 사항을 다시 가져온다.
# (숨겨놓은 변경 사항은 아직 유지된다.)
git stash apply
# 임시로 숨겨놓은 이력을 삭제한다.
git stash drop
# 임시로 숨겨놓은 변경 사항을 가져오면서 이력을 삭제한다.
git stash pop
오늘 하루를 돌아보며
오늘 HTML과 CSS는 끝났다! 사실 아직 몇 가지 배우지 않은 것들도 있긴 하지만 일단은 끝났다! 그리고 Tailwind를 배우기 시작했다. 오늘은 테일윈드 소개와 환경 구성만 했지만, 내일부터는 본격적으로 테일윈드를 다뤄보고, 배울 예정이다. 그러면서 @layer 규칙도 배운다고 한다. 살짝 맛만 봤지만 테일윈드를 잘 다루게 되면 스타일링을 할 때 편리할 것 같다. 클래스가 많아져서 좀 정신없어 보일 수는 있겠지만...ㅎ 이것도 써봐야 어떤지 알 수 있을 것 같다.
마지막 조금 남은 시간에 git stash도 살펴봤다. 이제 git에서 하나만 남았다! 하나씩 배워가는 게 즐겁고 신기하다. 처음에는 익숙하지 않아서 어색하고 어려워 보이던 것들이 이제는 익숙해져서 금방금방 이해된다. 새로운 것을 배운다는 게 이렇게 즐거운 일이었다니... 스스로 조금 대견하다.
