Programming/CSS (17) 썸네일형 리스트형 [CSS] Styled-components + 터치 스크롤 구현하기 여러 장의 카드를 가로로 놓고, 터치 스크롤 형식으로 자유롭게 좌우로 움직이고 싶었다! 좌우로 움직이는 터치 스크롤 구현하기 1. 스크롤 영역 내 내용을 줄 바꿈 하지 않고 표시하기 위해서 white-space: nowrap; 2. 스크롤 영역 벗어나는 부분 가리기 위해서 overflow-x: auto; 3. 스크롤 영역 내 들어갈 아이템 카드에 display: inline-block; 전체 코드 import React from "react"; import styled from "styled-components"; const CardScroll = () => { return ( ) } export default ScrollCard; const CardView = styled.div` width: 100%.. [CSS] 선형 그라데이션 효과 넣기 (색깔 밑줄 긋기) 특정 글자에 강조하고 싶은 경우에 사용하면 좋을 것 같다. 나는 아래에서 위로, 하늘색에서 하얀색으로 4:6 비율로 효과를 주었다. 전체 코드 background: linear-gradient(to top, skyblue 40%, white 60%); 결과 화면 참고 사이트 더보기 https://www.codingfactory.net/10838 [CSS] Position : relative, absolute 위치 설정하기 CSS를 만질 때, position은 가장 기본이지만 헷갈리는 부분인 것 같다. 그래서 그 중에서도 많이 사용되는 relative, absolute를 정리해보았다. Position 속성 속성 의미 static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stickey 스크롤 영역 기준으로 배치 위의 position 속성으로 기준을 잡고, 그 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다. Relative vs Absolute 한 눈에 보기 좋은 참고 이미지가 있어서 가져와보았다. 위치 뿐만 아니라, 다른 요소에도 영향을 줄 수 있는 부분을 참고하면 좋을 것 같다. .. [CSS] Styled-components + 동영상으로 화면 전체 채우기 인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동영상으로 화면 전체를 채운 예시이다~! 동영상으로 화면 전체 채우기 부모에 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.. [CSS] Next.js Image + 화면 아래 가리키는 화살표 애니메이션 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) 애니메이션 진행 속도, 또는 가속 방식을 지정 .. [CSS] 선택자(Selector) 종류와 사용 방법 선택자(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; } 복합 선택자 사용.. [CSS] input, button 테두리 없애기 border에 0이나 none을 주게 되면 테두리를 없앨 수 있다. 전체 코드 input, button { border: none; } 결과 화면 [CSS] 점점 확장되어 나타나는 애니메이션 구현하기 저번에 이어서 통통 튀는 로고를 클릭 했을 때, 랜덤하게 보드게임을 추천해주고 싶었다. 이 때 보여지는 보드게임 카드가 점점 확장되어 나타날 수 있도록 구현하였다! recommend라는 useState 변수를 만들어 로고 클릭 시 값이 바뀌고, 그에 따라 CSS className도 변경되는 방식이다. 점점 확장되어 나타나는 애니메이션 구현하기 scale : 0에서 1로 변경 transition: all 0.5s 전체 코드 boardgame.js setRecommend(!recommend)} > { recommend ? : } boardgame.css .boardgame-recommend { width: 30%; height: 100px; margin: 50px auto; scale: 0; transiti.. 이전 1 2 3 다음
