Chemical Journey

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

See the Pen 3D animation(동전뒤집기) by Cheol-bae Lee (@cheolship) on CodePen. 요점. 1. position: absolute 는 단지 float과 같은 역할을 한다는 점. 2. 뒷면을 가려주는 backface-visibility: hidden; 속성 3. 원근감을 주는 perspective 속성 4. 'Y축을 기준'으로 회전 시켜주는 transform: rotateY(deg); 속성 + position:absolute로 좌우(또는 상하) 가운데 정렬을 할 때 left right 각각 0으로 시작점을 잡아주고 margin: auto를 줘야한다. 이때 정렬하는 요소는 width 값이 지정돼있어야한다.

최근에 인강을 통해 html, css, javascript를 공부하면서 시간을 잡아먹는 부분이 단순 오타 혹은 레이아웃 잡는 것과 같이 아주 기초적인 부분일 때가 많음을 느낀다. 모든 분야에서 기본기는 굉장히 중요한 법, 이번 기회에 float, flex, grid를 활용한 레이아웃 잡는 법을 총 정리하고 넘어가려 한다. See the Pen layout1-기본형 by Cheol-bae Lee (@cheolship) on CodePen. x1 mobile (max-width: 480px) .. tablet (max-width: 768px) x0.5 Laptop (max-width: 1300px) x0.25 desktop 우선 첫번째로는 예전 방식인 float을 활용해 레이아웃을 잡아보겠다. 구닥다리 방법..