전체 글 (11) 썸네일형 리스트형 [CSS] Aspect Ratio 속성으로 width height 비율 맞추기 1. Aspect Ratio란?Aspect Ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다.만약 요소의 너비를 100px로 지정하고, aspect-ratio: 3/1을 하면 높이는 33.333px이 된다.aspect-ratio: 3 / 1;aspect-ratio: 4;aspect-ratio: auto;aspect-ratio: auto 1 / 1;GicoMomg (Lux) 님의 블로그에서 퍼왔습니다. Color의 HEX값으로 투명도까지 색상에 투명도를 입힐때 RGB값은 rgba라는 속성으로 색상에 투명도를 입히가 편한데 HEX값은 #?????? 샵 뒤 여섯자리 뒤에 두자리를 더 붙여서 투명도를 정할수 있지만 투명도의 %마다 코드가 알파벳 숫자 조합으로 되어있어 직관적이지 못하다... 이곳에 들어가서 %별로 코드를 확인 가능하다. https://css-tricks.com/8-digit-hex-codes/ 8-Digit Hex Codes? | CSS-Tricks Weird right? 4-digit hex codes too. They are a way put alpha transparency information into the hex format for colors. You might be seeing it more all the css.. [jQuery] 페이지 스크롤 이벤 Example. $(window).scroll(function () { if ($(window).scrollTop() > 500) { // 현재 스크롤 양이 500보다 크다면 이곳을 실행. } else { // 현재 스크롤 양이 500보다 작다면 이곳을 실행 } }) a태그로 앵커기능 사용하기!(부드러운 스크롤) 예를들어 id="first를 사용하고 있는 element가 있을때 a태그의 herf="#first" 라고 넣고 해당 a태그 클릭시 id를 적용하고 있는곳으로 웹페이지가 자동 스크롤이 된다. 웹페이지 이동이 부드럽지 않고 딱딱 순간이동을 하는데 html { scroll-behavior: smooth; } 해당 코드를 CSS style에 적용해주면 부드러운 스크롤 이동이 가능해진다. select태그, input태그의 number타입 화살표 없애기 input 태그 number타입 /* input[number], select custom style */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* FireFox */ input[type="number"] { -moz-appearance: textfield; } select 태그 select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: non.. window.scrollY? . 네이버 페이지를 예로 들겠습니다. window.scrollY 는 빨간줄이 그어진 부분을 기준으로 페이지 전체 스크롤중에 어디에 위치하는지 숫자로 나타내주는 객체 입니다 조금 아래로 스크롤을 내리고 다시 객체를 호출 해보면 현재의 위치가 0에서 900으로 변한 것을 알 수 있습니다. 다음으로 알아볼 객체는 window.document.documentElement.clientHeight 입니다. 이미지의를 보면 위의 빨간줄(브라우저 최상단)과 아래의 빨간줄(브라우저 최하단) 사이의 총 거리가 window.document.documentElement.clientHeight 입니다. F12 개발자 모드에서 객체를 호출해 보면 919라는 값이 나오는데요 이 값은 페이지 스크롤 어느 부분에서 호출해도 919 고.. [React] React 프로젝트에 Drag and Drop 구현하기(react dnd) 2장 1장에서 이어집니다~ 빨간 밑줄친 부분을 추가하면 약간 뻣뻣하고 부자연스러웠던 애니메이션이 조금이나마 부드러워집니다. 다음으로 이부분을 이렇게 변경해주면 Drag를 하는 동안에 snapShot.isDragging이 true로 활성화 되면서 색깔이 진해지고 Drag를 해제하고 Drop이 되면 snapShot.isDraggi ng이 false로 돌아오면서 다시 연한색으로 돌아옵니다. div태그가 너무 많아서 아래있던 div의 클래스네임만 끌어와서 위의 div태그에 합쳤습니다~ 이미지에 잘못된 부분이 있는데 }flex items-center 이부분에서 }와 flex 사이에 스페이스바 한번 눌러서 공간을 주세요. 두개가 붙어있으면 css적용이 제대로 안됩니다~ Dragging을 한 이후에 바뀐 순서를 적용하게 .. [React] React 프로젝트에 Drag and Drop 구현하기(react dnd) 1장 터미널 창에 npm i react-beautiful-dnd 입력하여 모듈을 설치해 줍시다! 로 Drag and Drop을 하려는 곳을 감싸 줍니다. 로 감싸진 부분 안에서는 Drag and Drop이 가능합니다. 로 감싸진 부분은 Drag가 가능해 집니다. 위 이미지 처럼 DragDropContext, Droppable, Draggable import 해주시구요. 화면 안에 잘 안들어와서 글씨 크기를 많이 줄였습니다. ctrl + 마우스 휠을 굴려 확대해서 봐주세요^^;; 가장 먼저 이런식으로 감싸줍니다. 빨간 밑줄 친 부분 보고 잘 따라와 주세요. div태그 생성 해서 감싸 주고요, 이것도 역시 빨간 밑줄 참고해서 작성 바랍니다. React 18버전부터는 이러한 오류가 나온다고 합니다. 위 그림처럼 s.. 이전 1 2 다음
