프론트 개발 블로그

https://web-development.space/tools/px-to-vw/ PX to VW | Responsive values Converter (Calculator) | Web Development Space Try to convert px to vw here! This online calculator can convert pixels (px) to variable widths (vw). Make your content ready for responsive use. Front-end developers will be happy! web-development.space percent = viewport size / 100 vw = px / percent 360 viewport 에서 18px 폰트 ..

mousewheel 이벤트를 통해 페이지 스크롤 시에 스무스하게 스크롤링 되는 것을 표현하고자 했다. TweenMax와 ScrollTopPlugin으로 y 값을 조정하는 것이었는데 이 코드가 계속 실행이 안되는 것이었다. 알고보니 css 속성 중에 html {scroll-behavior: smooth;} 를 넣은 것 때문에 자바스크립트가 제대로 동작하지 않았던 것이었다. scroll-behavior: smooth; scroll-behavior 속성은 사용자가 스크롤 가능한 상자 내의 링크를 클릭할 때(Ex. 상단으로 가기 버튼 등) 직선 점프 대신 스크롤 위치에 부드럽게 애니메이션을 적용할 지 여부를 지정하는 속성이다. 기본 값은 auto; 아마도 window.scrollTop을 사용하면서 내부에 있는 ..

크롬, 사파리 브라우저 등에서 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

요소 밖으로 넘치지 않게 줄 바꿈을 할 때 사용하는 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..

Frame By Frame 애니메이션 구현하기 1분 코딩님의 인터랙티브 웹 개발 제대로 시작하기 강의 참고 5100 X 300 사이즈의 스프라이트 이미지를 Frame By Frame 애니메이션으로 구현해야 되는 상황 TIP1. 가로, 세로 사이즈의 두배 사이즈의 이미지를 만든 다음에 CSS 상에서 절반으로 잘라서 사용하기 : 레티나 디스플레이와 같은 고해상도 디스플레이에서 px 직접도가 높은 고해상도로 표현됩니다. TIP2. animation-timing-function: steps() 속성을 사용하기 : 해당 속성을 지정해주지 않으면 -2550px 만큼 연속으로 흘러가는 애니메이션이 되는데, 해당 속성을 사용하면 steps 단계만큼 끊어지는 애니메이션을 구현할 수 있습니다. @keyframes spac..

플렉스 컨테이너 자식을 어떤 방향으로 배치할 수 있고, 자식의 크기도 유연하게 표현할 수 있습니다. 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..

CSS에서의 3D 공간의 표현은 우선 원근감을 부여해 화면에 3D 공간을 설정한 후 그 공간 안에서의 2D 요소를 어떻게 행동시킬 지 설정합니다. perspective 원근감을 표시할 수 있도록 Z 인덱스와 관찰자 사이의 거리를 지정하는 속성 Z 인덱스에 관찰자가 가까울 수록 3D 요소가 커짐 기본 값 none 상속 NO 애니메이션 Yes 버전 CSS3 Javascript Syntax object.style.perspective = '50px' Property Values none | length | initial | inherit perspective-origin 3D 위치의 소실점을 정의함 기본 값 50% 50% 상속 NO 애니메이션 Yes 버전 CSS3 Javascript Syntax object...