반응형 css15 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 23-30 (UI 프로젝트 회고) 목차1일 차2일 차3일 차4일 차5일 차6일 차7일 차가장 기억에 남는 일 1일 차UI 프로젝트는 컴포넌트화하는 것에 익숙해지는 것이 목표였다. 다양한 시안을 제공해 주셨고, 다양한 컴포넌트를 만들고, 시간이 남는다면 컴포넌트를 모아서 페이지를 만들 수 있다고 하셨다. 우리 조는 웹디스코드를 클론한 페이지를 만들어 보기로 했다. DM 탭에서 친구 목록을 클릭하면 친구와의 채팅이 보이듯이 각자 소개를 보여주고, 채널 탭에서는 각자 만든 부분을 설명하는 채팅이 보이도록 꾸며봤다. 라디오 버튼을 사용해서 화면 전환이 되도록 해보자고 하고 프로젝트를 시작했다. 나는 맨 왼쪽에 있는 탭을 만들기로 했다. 잘 한 것라디오 버튼을 지난 번 로그인 과제에서 '로그인 유지' 체크박스를 만들었던 것처럼 해봤다. labe.. 2025. 6. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 21 (TailwindCSS Vite 환경 구성 및 기초) 목차@layer 규칙TailwindCSS Vitepublic 폴더와 src 폴더의 차이Tailwind 핵심 개념(Core Concepts)상태 디자인테마 변수오늘 하루를 돌아보며 @layer 규칙@layer at-rule은 캐스케이드 레이어를 선언할 때 사용한다. 여러 캐스케이드 레이어가 있을 경우에는 우선순위를 정의할 때도 사용할 수 있다.레이어 이름을 선언한 후, 레이어의 스타일을 정의할 수 있다./* 레이어 선언 */@layer module, state;/* state 레이어 스타일링 */@layer state { .alert { background-color: brown; } p { border: medium solid limegreen; }}/* module 레이어 스.. 2025. 5. 21. 멋쟁이사자처럼 프론트엔드 부트캠프 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. 이전 1 2 3 다음 반응형
