컴퓨터 썸네일형 리스트형 CSS transition 문법 transition: property duration timing-function delay 트랜지션 효과를 보기 위해 반드시 입력해야 하는 값은 duration이다. 나머지는 입력하지 않아도 기본값이 적용된다. 1. property 변화될 프로퍼티를 지정한다. 기본값은 all 이다. 지정될 수 있는 값은 한정적인데, 아래와 같다. 하지만 주로 all을 사용한다. // Box model width height max-width max-height min-width min-height padding margin border-color border-width border-spacing // Background background-color background-position // 좌표 top left .. CSS transform transform: translate(30px, 50px); x방향으로 30px, y방향으로 50px 이동한다. transform: translateX(30px); x방향으로 30px 이동한다. transform: translateY(10px); y방향으로 10px 이동한다. translate() 를 리셋하려면 transform: none 을 지정한다. 요소를 가운데로 보내기 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); top, left 값과 translate 의 x, y 값이 부호만 다르고 크기는 같아야 한다. 약간 윗쪽으로 배치하려면 top을 30% 정도로 조정할 수 있다. 단, 그러면 translate의 x값도.. CSS position postion의 기본값은 static이다. 1. static 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 2. relative 기존 static 이었을 때의 위치를 기준으로 안쪽 방향으로 top, right, bottom, left 속성에 따라 위치가 이동한다. 3. absolute 조상중에 position: static 속성을 가지고 있지 않은 조상을 기준으로 위치가 이동한다. 즉, relavtive나 absolute나 fixed 속성을 가지고 있는 조상을 기준으로 한다. 만약 조상중에 그런 엘리먼트가 없다면 body엘리먼트가 기준이 된다. 참고로, absolute가 되면 div여도 width: 100%가 아니다. 4. fixed 스크롤에 따라 움직이지 않고 위치가 고정된다. div여도 width: 100.. CSS 모달 팝업 [HTML] [CSS] .background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; backdrop-filter: blur(4px); /* 숨기기 */ z-index: -1; opacity: 0; } .window { position: relative; width: 100%; height: 100%; } .popup { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); background-color: Red; box-shadow: 0 2px 7px rgb.. JavaScript charCodeAt() fromCharCode 문자와 아스키코드 변환 [문자 -> 아스키코드] console.log('hello'.charCodeAt(2)); 매개변수는 검색할 문자의 인덱스를 의미한다. 여기서는 'l'이다. [아스키코드->문자] console.log(String.fromCharCode(111)); 이전 1 ··· 32 33 34 35 36 37 38 ··· 88 다음