꿈꾸는 개발자의 블로그

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

인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동영상으로 화면 전체를 채운 예시이다~! 동영상으로 화면 전체 채우기 부모에 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..

next.js에서 이미지를 불러오기 위해서는 대신에 모듈을 쓰는 것이 좋다! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 화살표 움직임에는 애니메이션 속성을 통해 다양하게 표현할 수 있다. animation 속성 속성 의미 animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정 animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 animation-timing-function - linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 애니메이션 진행 속도, 또는 가속 방식을 지정 ..

선택자(Selector) 종류 가장 기본이 되는 선택자만 정리해보았다. 이 외에도 속성 선택자, 가상 선택자 등이 있다. 선택자 종류 표현 예시 전체 선택자 * { } * { width: 100px; } Tag 선택자 tag { } div { width: 100px; } Class 선택자 .class { } .box { width: 100px; } ID 선택자 #id { } #name { width: 100px; } 복합 선택자 하위 (공백) div p { width: 100px; } 자식 > (꺽쇠) div > p { width: 100px; } 인접 형제 + (더하기) div + p { width: 100px; } 일반 형제 ~ (물결) div ~ p { width: 100px; } 복합 선택자 사용..

border에 0이나 none을 주게 되면 테두리를 없앨 수 있다. 전체 코드 input, button { border: none; } 결과 화면