본문 바로가기
반응형

부트캠프65

멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 20 (쌓임 맥락(stacking context), Subgrid, 컨테이너 쿼리, 테일윈드, git stash) 목차쌓임 맥락(stacking context)Subgrid그리드 레이아웃(line name)컨테이너 쿼리Tailwind CSS 인트로Git stash오늘 하루를 돌아보며 쌓임 맥락(stacking context)쌓임 맥락(stacking context)은 HTML 요소들이 화면 위에 어떤 순서로 겹쳐서 표시되는지를 결정하는 3차원적인 개념이다. 요소가 3차원에서 쌓이는 기준 틀이라고 볼 수 있다. z-index는 같은 쌓임 맥락 안에서 쌓이는 순서를 지정한다. 새 쌓임 맥락을 생성하는 조건은 다음과 같다.position이 relative, absolute, fixed, sticky이면서 z-index가 auto가 아닌 값translate 속성으로 이동하거나 margin 값을 음수로 가져서 요소가 서로 겹.. 2025. 5. 20.
멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 19 (다크 모드 & 라이트 모드, img-set() 함수, 실습) 목차다크 모드 & 라이트 모드img-set() 함수실습하며 배운 것(output, object-fit, object-position, backdrop-filter)오늘 하루를 돌아보며 다크 모드 & 라이트 모드미디어 쿼리를 사용해서 다크 모드와 라이트 모드를 지정하여 스타일을 변경할 수 있다. prefers-color-scheme 값으로 dark 또는 light를 할당하여 스타일을 지정한다.@emdia (prefers-color-scheme: dark) { background: #121212; color: #fff;} 최근에 등장한 light-dark() 함수를 사용할 수도 있다. 함수는 :root에 color-scheme: light dark;를 선언해야 사용할 수 있다.앞에는 라이트 모드 값을, .. 2025. 5. 19.
멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 18 (키프레임 애니메이션, Transform, CSS 마스크, 멀티 컬럼 레이아웃) 목차CSS 키프레임 애니메이션TransformCSS 마스크멀티 컬럼 레이아웃오늘 하루를 돌아보며 CSS 키프레임 애니메이션애니메이션 효과를 줄 수 있는 2가지 방법 중 하나로, @keyframes at-rule을 선언하여 animation 관련 속성을 사용하며, 특정 시점의 키프레임을 지정할 수 있다. @keyframes 규칙@keyframes at-rule은 animation 속성에 적용할 키프레임을 생성하기 위한 규칙이다. 키프레임이란, 애니메이션을 구현할 때 기준이 되는 특정 시점으로, 각 키프레임 사이의 애니메이션은 자동으로 구현된다./* @keyframes 형식 */@keyframes 애니메이션 이름 { from { css속성: 값; } [percentage]{ css속성: 값;.. 2025. 5. 16.
멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 17 (그리드 레이아웃, CSS 애니메이션) 목차그리드 컨테이너그리드 아이템 - 라인 기반 배치그리드 아이템 - Name 기반 배치그리드 정렬CSS 애니메이션(Transition)오늘 하루를 돌아보며 그리드 컨테이너display 속성 값을 grid나 inline-grid로 지정하면 해당 요소가 그리드 컨테이너가 된다. grid로 지정하면 컨테이너가 블록 요소로 처리되고, inline-grid로 지정하면 인라인 요소로 처리된다. grid-template-rows / grid-template-columns그리드 템플릿을 행 또는 열 방향으로 짤 수 있는 속성이다. 속성 값으로는 트랙 크기를 지정하고, 공백으로 구분한다. 값의 개수에 따라 행 또는 열의 개수가 된다. 첫 번째 값이 첫 번째 행/열의 트랙 크기다.속성 값은 고정 사이즈, % 단위 모두 .. 2025. 5. 15.
멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 16 (폼 스타일링, 그리드 레이아웃, git reset) 목차폼 스타일링(과제 리뷰)그리드 레이아웃git reset오늘 하루를 돌아보며 폼 스타일링(과제 리뷰)체크 박스체크 박스의 모양을 svg 파일로 바꾸고 싶을 때 svg나 img로 마크업하거나 배경 이미지로 지정할 수 있다.img 요소를 사용하려면 자바스크립트를 사용하여 상태(unchecked/checked)에 따라 src로 접근해서 이미지를 바꿔야 한다. 추천하지 않는 방법이다.svg로 마크업하면, 상태에 따라 fill 값을 조절할 수 있다.배경 이미지로 마크업하면 label의 배경 이미지로 지정하고, 상태에 따라 배경 이미지를 변경할 수 있다. accent-color 속성을 사용하면 체크 박스 모양의 색상을 지정할 수 있다. text-indent는 첫 줄 들여쓰기를 지정하는 속성이다. block일 때만.. 2025. 5. 14.
반응형

티스토리툴바