1분코딩 4

[CSS] Transform, Animation 그리고 reflow

Intro 웹에서 동적인 모션을 보여주는 방법은 JS를 통한 방법도 있지만 CSS를 통해서도 간단한 형태 변화나 애니메이션을 구현할 수 있다. Transform 속성을 통한 다양한 형태 변환과 위치 이동, transition과 animation 속성을 이용한 애니메이션의 구현을 알아본다. Transform 객체의 형태를 변환하는 속성. Reflow 과정이 생략되고 하드웨어 가속(GPU 사용)을 사용해서 성능 최적화에 적합하다는 이점이 있다. Reflow와 Repaint는 될 수 있으면 줄여서 브라우저 최적화를 해주는 편이 좋다. 💡 Reflow? 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스. 문서의 일부 또는 전체를 다시 렌더링하는 데 사용된다. 개발자는 항상 브라우저의 최적화를..

TIL/CSS 2022.10.11

[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] 썸네일과 텍스트 리스트 (이미지 처리 팁😼)

html의 img태그는 크기, 위치 조절이 번거롭다. 그래서 보통 중요도가 떨어지는 이미지의 경우에 한해서는 css background-image로 처리해주는데, 중요한 이미지까지 background-image 처리하면 웹접근성을 준수하지 못한다. 이런 경우에 이미지를 css background-image 속성으로 크기,위치 조절을 하면서 웹접근성을 위반하지 않는 트릭이 있다. Lorem ipsum dolor sit.. Lorem ipsum dolor sit.. Lorem ipsum dolor sit.. 우선, img를 담고 있는 figure 태그에 inline-style로 background-image를 불러온다. 💡 왜 inline-style인가? 썸네일 이미지 같은 경우는 보통 서버 데이터베이스에서..

TIL/CSS 2022.09.28