꿈꾸는 개발자의 블로그

overflow 내가 지정한 width, height 값에 대하여 그 하위 내용이 범위를 벗어날 때 사용하는 방법이다. overflow-x, overflow-y 를 사용하여 상하/좌우에 대하여 지정할 수도 있다. overflow 속성 속성 의미 visible 바깥으로 나오는 기본 값 hidden 안쪽 외 나머지는 잘림 scroll 스크롤을 만듬 auto 내용이 넘어가면 자동으로 스크롤을 만들어 줌 코드 예시 overflow: hidden;

이미지 파일을 가지고 있을 때, 이를 이용하여 배경으로 화면 전체를 채우는 방법이다. 전체 코드 background: url("/background.jpg"); background-size: cover;

이미지 파일로 배경을 꽉 채웠는데, 그 위에 텍스트를 화이트로 뿌리니 잘 보이지 않아서 한 방법이다! 배경색을 똑같이 설정하고 알파값만 주어 어둡게 하였는데, 이 때 사용한 그레디언트 방법 외에도 다양한 방법이 있어서 적어본다. 그레디언트 사용하기 1. 선형 그레이디언트 : 직선으로 진행하는 색상 무늬를 생성합니다. background: linear-gradient(blue, pink); 2. 방향 전환 : 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다. background: linear-gradient(to right, blue, pink); 3. 대각선 그래디언트 : 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다. background: linear-grad..

여러 장의 카드를 가로로 놓고, 터치 스크롤 형식으로 자유롭게 좌우로 움직이고 싶었다! 좌우로 움직이는 터치 스크롤 구현하기 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%..

특정 글자에 강조하고 싶은 경우에 사용하면 좋을 것 같다. 나는 아래에서 위로, 하늘색에서 하얀색으로 4:6 비율로 효과를 주었다. 전체 코드 background: linear-gradient(to top, skyblue 40%, white 60%); 결과 화면 참고 사이트 더보기 https://www.codingfactory.net/10838