반응형 전체 글50 멋쟁이사자처럼 프론트엔드 부트캠프 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. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 13 (미디어 쿼리, 반응형 웹, 컴포넌트 스타일링) 목차meta 요소미디어 쿼리반응형 웹컴포넌트 스타일링오늘 하루를 돌아보며 meta 요소meta는 문서를 설명하는 데이터인 메타 데이터를 담는 요소다. 에서 charset 속성은 웹 페이지의 문자 인코딩을 지정한다.UTF-8은 유니코드(Unicode)를 위한 가변 길이 문자 인코딩 방식이다. 전 세계의 거의 모든 문자와 기호를 표현할 수 있다. 그래서 title 요소를 meta 요소보다 위에 선언하면 탭 제목이 깨질 수 있다. 에서 viewport는 브라우저에 보이는 영역이다. 뷰포트의 width를 기기 크기에 맞추고, initial-scale(초기 배율)을 1로 맞춘다는 뜻이다. initial-scale을 설정하는 것은 핀치 제스쳐(줌인 줌아웃)를 할 때 2배, 3배, 0.5배로 확대하거나 축소할 수 있.. 2025. 5. 9. 이전 1 ··· 4 5 6 7 8 9 10 다음 반응형
