Chemical Journey

back front :root { background: #000; } .card { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; transition: 0.5s } .card:hover { transform: perspective(1000px) rotateY(180deg); } .card-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; border-radius: 10px; backface-visibility: hidden; } .card-front-face { background: blue; } ...

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

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..

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 로 구성..

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인가? 썸네일 이미지 같은 경우는 보통 서버 데이터베이스에서..

Container 속성 display: flex; flex-direction flex-direction: row; flex-direction: column; flex-wrap flex-wrap: nowrap; (*default) flex-wrap: wrap; flex-wrap: wrap-reverse; flex-flow flex-direction + flex-wrap 의 축약형 flex-flow: row wrap; Item 메인축(flex-direction의 방향) 정렬 흔히, justify-content는 가로축 정렬, align-items는 세로축 정렬이라고 착각할 수 있는데 이는 flex-direction이 default값(=row)일 때가 많아 일반화된 것이다. flex-direction: col..

‘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 {})의 사이즈만 변경해주면 전체 사이즈가 수정되기 때문에..