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

깃허브 Repository에 첫 개인 프로젝트를 업로드하고 유지, 관리는 어떤 식으로 해야 하는지 의문이 생겼다. 1차적인 생각으로 터미널에서 바로 업데이트하면 편하겠다는 생각을 했고 구글링을 했다. 실제로 현업 개발자분들도 많이 사용하는 방법인지? 쉽게 찾을 수 있었다. https://curryyou.tistory.com/427 [Github] 터미널에서 GitHub Repository 연동 사용 방법: git remote, push 요즘은 IDE 자체에서 Git 을 사용할 수 있도록 지원해주는 경우가 많다. 하지만 개인적으로는 터미널에서 git을 사용하면 개발환경과 무관하게 모든 곳에서 공통적으로 사용할 수 있어서 가급적 curryyou.tistory.com '커리유'님이 작성하신 글을 참고하였고 ..

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을 활용해 레이아웃을 잡아보겠다. 구닥다리 방법..

본격적인 웹 프론트엔드 개발 TIL(Today I Learned)을 블로그에 기록하기 전에 블로그 카테고리나 스킨 같이 초기 설정을 해주어야 할 부분들이 심심치 않았다. 한번에 모든 설정을 건드리기에는 아직 티스토리 플랫폼에 대한 이해도가 부족해서 힘들겠다는 생각을 했다. 카테고리를 만들고 나서 당장 먼저 눈에 보인 브라우저의 최상단, 블로그의 간판이 되어 줄 '파비콘'부터 적용해보고 싶었다. 1. 디자인툴로 파비콘 제작하기 우선, 티스토리 블로그에 적용할 파비콘을 만들어보았다. 각자 편한 디자인 툴을 이용하면 되는데 나는 어도비 일러스트레이터 2022를 활용해서 192 x 192 px의 PNG 파일(or JPG)을 제작했다. 아주 기본 도형으로만 구성된. 어도비는 2년 가까이 구독 중이지만 사용 빈도가..