프론트 개발 블로그

SASS Function을 활용한 px -> rem 단위 변환 // px to rem $rem-base: 16px !default; // STRIP UNIT // 측정 단위를 제거하고 반환 @function strip-unit($num) { @return $num / ($num * 0 + 1); // 10 / 10 * 0 + 1 } // CONVERT TO REM @function convert-to-rem($value, $base-value: $rem-base) { $value: strip-unit($value) / strip-unit($base-value) * 1rem; @if($value == 0rem) { $value: 0; } @return $value; } // REM CALC // rem-c..

window.visualViewport window의 인터페이스의 visualViewport 읽기 전용 속성은 창의 시각적 뷰포트를 나타내는 visualViewport 객체를 반환한다. Chrome 61, Edge 79, Safari 48 이상 브라우저에서 호환 가능하다. * IE 는 No support // 예시 코드 function viewportResize() { const vh = window.visualViewport.height; const document = document.documentElement; document.style.setProperty('-vh', `${vh}px`); } https://developer.mozilla.org/en-US/docs/Web/API/Window/vi..

크롬, 사파리 브라우저 등에서 input 에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다. 해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다. input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #000 inset; } * input의 배경색처럼 보이지만 box-shadow로 변경해야 한다. 추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -text-fill-color 프로퍼티로 변경 가능하다. -webkit-text-fill-color

[번역] Apple 제품 페이지 스크롤 애니메이션 https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/ 기본 개념 빠르게 연속되는 이미지 시퀀스와 같은 애니메이션을 만드는 것. (플립북같은) 복잡한 WebGL 이나 고급 Javascript 라이브러리가 필요하지 않습니다. 각 프레임을 사용자의 스크롤 위치와 동기화하여 사용자가 페이지를 아래로(또는 위로) 스크롤 할 때 애니메이션을 재생할 수 있습니다. https://res.cloudinary.com/css-tricks/video/upload/v1588889054/flipbook_tisnxf.mp4 마크업과 스타일로 시작하기 HT..

요소 밖으로 넘치지 않게 줄 바꿈을 할 때 사용하는 word-wrap MDN 문서로 확인해보니 overflow-wrap 으로 사용하고, word-wrap 은 동의어가 되었다고 한다. https://developer.mozilla.org/ko/docs/Web/CSS/overflow-wrap overflow-wrap - CSS: Cascading Style Sheets | MDN overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다. developer.mozilla.org 일단 적어두고 테스트 하자

부정(negation) 가상 클래스로 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 표기법 입니다. 인수로 표시되지 않은 요소와 일치 합니다. 쉽게 말해서 div a 요소 중 .selctor 클래스가 들어간 요소만 제외한 나머지 a 요소에 일정한 스타일을 주고 싶을 때 사용한다. 예제 // 구문 :not(selector) { style properties } // 클래스 classy 를 제외한 모든 p 엘리먼트 요소 텍스트에 color 값을 red 로 선택 p:not(.classy) { color: red; } // body 자식 중 p 엘리먼트 요소가 아닌 엘리먼트들 color 값을 green 으로 설정 body :not(p) { color: green; } developer.mo..

it-news.pw/pxtovw/ PX to VW Calculator it-news.pw (PIXEL UNIT / VIEWPORT WIDTH) * 100 IE11 이하는 vw 단위 지원 안함

input 가상 클래스 ::after 로 디자인 된 체크박스 작업 시 IE에서 가상요소인 ::after 속성을 삭제하는 현상 1 2 3 4 5 6 .apply .agree .input__checkbox {float:left; width:0px; height:0px; margin:-1px; padding:0; border:0; clip:rect(0, 0, 0, 0);} .apply .agree .input__checkbox::after {display:block; content:''; cursor:pointer; display:inline-block; width:30px; height:30px; background:url('../../static/img/ico_agree.png') no-repeat; ba..

플렉스 컨테이너 자식을 어떤 방향으로 배치할 수 있고, 자식의 크기도 유연하게 표현할 수 있습니다. display: flex 부모 요소 컨테이너의 속성으로 지정하여, 자식 속성을 유연하게 만듭니다. .container { display: flex; background: gray; } flex-direction 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다. .container { display: flex; flex-direction: row; background: gray; } 기본값 row 상속 NO 애니메이션 NO 버전 CSS3 Javascript syntax: object.style.flexDirection='row' css syntax row | row-re..