혼자 적어보는 노트

flex box css를 처음 접했을 때 div의 레이아웃 구조를 잡을 때 float를 자주 사용하곤 했다. 사실 float는 이미지 및 box요소를 텍스트와 함께 배치할 때 자연스럽게 어우러 질 수 있도록 만들어진 속성이였지만 box를 정렬할 때 별다른 대안이 없어서 어쩔수 없이 사용하긴 했다. 이후에 flex box가 생기고 나서 좀 더 편하게 레이아웃을 구성할 수 있게 되었다. flexbox는 레이아웃을 유연하게 짤 수 있는 박스 모델이다 반응형 레이아웃을 만들기에도 적합하며 코드를 유지보수하기도 편하다. flex를 이용한 정렬의 중요 키워드는 주축(main axis)와 교차축(cross axis)이다. flexbox의 속성들 [flex contianer 속성] :display: flex;를 한 대..

다양한 브라우저의 크기에서 px단위를 사용할 경우 고정크기로 적용되기 때문에 반응형 웹을 만들 때 불편함이 있다. 언뜻 보긴 했지만 적용은 망설였던, px보다는 조금 더 유연한 가변 단위인 em, rem을 알아보자. em, rem은 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다. 폰트사이즈를 16px로 지정했을 경우 1em, 1rem은 16px로 변환된다. 그러면 언제 em을 쓰고 언제 rem을 쓰는가? - rem의 픽셀 단위 변환 기준 rem은 페이지 최상위인 root요소인 html요소의 폰트 사이즈가 기준이 된다. html에 설정한 폰트크기가 16px이면 10rem은 160px가 된다. - em의 픽셀 단위 변환 기준 em은 지정한 요소의 폰트 사이즈를 기준으로 한다. 예를들어 div에..

화면 전체 기준으로 가운데 정렬을 하는 일이 종종 있다. 보통 fixed를 사용한 가운데 정렬은 .popup{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 위와 같이 설정을 하여 처리를 했었었다. 기본적인 부분에서는 문제가 되지 않지만 animation과 함께 사용 시 뜻하지 않는 대로 움직일 때가 있다. 찾아보니 { position: fixed; margin: 0 auto; left: 0; right: 0; } 이런식으로 가운데 정렬을 하는 방법도 있다 [문제상황] 팝업내용 scale이 변경될때 위치가 애매하게 적용되고, 점프되어서 원래 위치로 돌아가는 현상이 발생한다. transform의 translate이 변경된..

CSS를 이용하여 비율에 맞게 이미지를 조정해 본 적이 있을 것이다. 보통 background-image로 받아서 size를 조정하거나 자체 이미지를 수정했었던 기억이 있는데 CSS3 object-fit 속성을 이용하여 좀 더 편하게 수정을 할 수 있다는 것을 알게되었다. 이미지 뿐만 아니라 각각의 다양한 크기를 가진 object들(, , , 등)을 비율에 맞게 재 설정하는데에 유용하다. *IE에서는 지원이 되지 않음 object-fit의 사용 img{ width: 200px; height: 200px; object-fit: fill; } object-fit: none; object의 원본사이즈로 가운데 정렬을 해준다. object-fit: fill; 지정된 너비와 높이에 따라 이미지가 확대,축소 되어 ..

vimeo영상을 종종 삽입할 때가 있는데 iframe으로 감싸져있어서 컨트롤하기가 어려운 부분이 있다. 또한 고정된 width와 height를 사용하기에는 반응형 웹에서는 적합하지가 않다. CSS를 이용하여 반응형으로 컨트롤 하는 법을 알아보자. 코드를 복사해 오면 width값과 height값이 포함되어 있는데 이것을 지워준다. 그리고 iframe을 감싸는 div를 만들어준다. 그리고 CSS를 아래와 같이 설정한다. #vimeoWrap{ position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; margin: 0; } #vimeoWra..

https://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com 위 사이트에서 원하는 컬러의 그라데이션을 커스텀 하거나 presets에서 골라서 css를 복사한 후 붙여넣기