본문 바로가기
반응형

멋쟁이사자처럼후기65

멋쟁이사자처럼 프론트엔드 부트캠프 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.
멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 15 (플렉시블 레이아웃, 폼 스타일링) 목차display: contents; (플렉시블 레이아웃)상태 디자인(폼 스타일링)새로 배운 것들오늘 하루를 돌아보며 display: contents; (플렉시블 레이아웃) 위 코드를 아래 코드처럼 수정하게 된다면 중간에 들어간 li 요소 때문에 레이아웃이 깨지게 된다. 이때 li 요소의 display 값을 contents로 지정하면 li 요소를 컨테이닝 블록이 아닌 컨텐츠로 변경해서 ul 요소가 그 안에 있는 div 요소를 직계 자식 요소로 인식한다. 마크업을 변경하게 되더라도 중간에 끼게 되는 컨테이너를 무시할 수 있게 하는 유용한 속성 값이다.컨테이너가 아니게 되어서 background나 border 같은 속성은 적용되지 않겠지만, font-color나 font-style과 같은.. 2025. 5. 13.
반응형

티스토리툴바