반응형 HTML20 멋쟁이사자처럼 프론트엔드 부트캠프 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. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 14 (반응형 웹, 논리 속성 및 논리 값, 플렉시블 레이아웃) 목차반응형 웹논리 속성 및 논리 값플렉시블 레이아웃오늘 하루를 돌아보며 학습 목표 → 과정 → 결과 → 느낀 점 → 향후 계획반응형 웹방응형 웹은 유연하게 설계하는 서비스다. 2000년대를 기점으로 모바일 기기가 등장하면서 기술 플랫폼의 패러다임이 변화를 맞이했다. 데스크탑 중심 서비스가 모바일 중심 서비스로 이동하면서 기업들이 별도로 모바일 환경에 최적화된 대응을 시작한다. 그러나 모바일 디바이스의 크기가 다양해지면서 N Screen 환경을 고려하는 것이 필요해졌다. 고정형 레이아웃을 사용했던 서비스가 각 환경에 대응하기에는 개발 및 유지보수, 비용 관점에 대한 고민이 발생한다. 이때 반응형 웹이 필요해졌다. 콘텐츠는 물과 같아야 한다는 말이 있다. 컵에 담든, 주전자에 담든, 유리병에 담든 모양은 .. 2025. 5. 12. 이전 1 2 3 4 다음 반응형
