꿈꾸는 개발자의 블로그

CSS를 만질 때, position은 가장 기본이지만 헷갈리는 부분인 것 같다. 그래서 그 중에서도 많이 사용되는 relative, absolute를 정리해보았다. Position 속성 속성 의미 static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stickey 스크롤 영역 기준으로 배치 위의 position 속성으로 기준을 잡고, 그 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다. Relative vs Absolute 한 눈에 보기 좋은 참고 이미지가 있어서 가져와보았다. 위치 뿐만 아니라, 다른 요소에도 영향을 줄 수 있는 부분을 참고하면 좋을 것 같다. ..

map() callback : 새로운 배열 요소를 생성하는 함수 반환값 : 새로운 배열 아래 코드 예시를 보면, map()을 통한 결과는 새로운 배열을 반환했기 때문에 result[0]의 자리를 바꾸어도 기존 array에는 영향을 주지 않는 것을 알 수 있다. 하지만, copy는 array의 메모리 주소를 복사하여 두 객체가 동일한 메모리 주소 값을 가지고 있기 때문에 결과적으로 copy[0]의 값을 바꾸면 array의 값에도 영향이 가는 것이다. let array = [1, 2, 3]; let result = array.map((num)=> num); result[0] = 40;// [1, 2, 3] let copy = array; copy[0] = 40;// [40, 2, 3] 내장 객체 이용하기 l..

내가 완료한 기능 대형폐기물 페이지 : json 파일 추가, select 박스로 데이터 받아와서 좌표 찍기 구현 로그인, 회원가입 페이지 : sessionStorage 토큰 활용, recoil 이용하여 상태값 저장 앞으로 남은 구현 목록 퀴즈 페이지 : 포인트 적립 및 하루 3번 도전 가능하게 구현 결과 화면

인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동영상으로 화면 전체를 채운 예시이다~! 동영상으로 화면 전체 채우기 부모에 width 100%, height 100vh 주기 자식에 position: absolute, top/left: 50%, transform: translate(-50%, -50%) 주기 태그에 object-fit: cover 주기 전체 코드 import React from "react"; import styled from "styled-components"; const Intro = () => { return ( ) } export default I..

동영상을 프로젝트 메인에 자동으로 재생하고 싶었는데, 마침 쉽고 간단하게 구현할 수 있는 방법이 있어서 공유한다! 만약 동영상으로 화면 전체를 채우고 싶다면! 참고! 2022.06.25 - [Programming/CSS] - [CSS] Styled-components + 동영상으로 화면 전체 채우기 [CSS] Styled-components + 동영상으로 화면 전체 채우기 인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동 aldrn29.tistory.com React 동영상 재생하기 public 폴더 하위에 동영상 파일 추가 (.mp4가 아닌 파일은 적용되지 않는걸까...