responsive 3

[CSS] Grid

Flex vs Grid 두 디스플레이 속성은 컨테이너 > 아이템으로 기본 형태는 같다. 하지만 Flex는 direction에 따라 행, 열 중 한 방향에서의 배열을 다루고 Grid는 행, 열의 배열을 동시에 다룬다는 점이 큰 차이이다. 그런 측면에선 Grid가 더 상위의 개념이라고 볼 수도 있을 것 같다. → 전체적인 페이지의 레이아웃은 Grid, 요소들은 Flex를 이용하면 효율적이다. Grid 속성 Container grid-template-columns : 폭너비 폭너비 폭너비; 폭에 사용할 수 있는 단위는 px, fr, auto grid-template-columns:1fr 1fr 1fr; grid-template-columns:200px 1fr; grid-template-columns:200px..

TIL/CSS 2022.10.05

[CSS] card-list 만들기 (flex)

Abstract 웹사이트 이용시 흔히 보게 되는 카드 형식의 리스트를 flex를 활용하여 만들어보았다. position과 float을 이용한 방법보다 비교적 최신의 방법인 flex를 활용해서 보다 간편하게 만들어보는 것이 주 목적이다. 짤막하게 마크업 구조 분석 각각의 카드는 card-item이라는 클래스를 준다 card-item의 집합은 card-list, 그리고 card-list를 한번 더 감싸는 card-list-container 썸네일과 이름, 날짜가 적힌 부분은 header.card-header, 이미지와 본문은 a.card-body card-header안에는 a.card-header-link card-header-link는 figure > img와, card-header-content 로 구성..

TIL/CSS 2022.10.04

[CSS] 유체 그리드(반응형) 페이지 개념

‘1분코딩’ 강의 기반 개념 정리 Abstract 데스크탑, 태블릿, 모바일 등 다양한 기기에 유동적으로 최적화 된 화면을 보여주기 위해 유체 그리드에 대한 개념을 학습한다. 주요개념 Font-size 단위: em, rem , vw, vh @media(breakpoint){} in CSS em, rem, vw, vh 왜 px 아닌 em, rem, vw, vh 단위를 써야하는가? (필요한 경우) 유지, 보수 측면에서 유리하다. 예를 들어 모든 사이즈 단위를 px로 설정하면 클라이언트의 요구 혹은 디자이너, 개발자의 필요에 의해 전체 사이즈를 일일이 수정해야하는 경우가 생길 수 있는데, rem 같은 상대단위를 쓰게 되면 html {} (= :root {})의 사이즈만 변경해주면 전체 사이즈가 수정되기 때문에..

TIL/CSS 2022.09.22