꿈꾸는 개발자의 블로그

홈페이지에 들어왔을 때, 메인을 차지하는 글씨가 왼쪽에서 오른쪽으로 서서히 나타나게 하고 싶었다. 그래서 사용한 방법이 animation! 처음 구현할 땐, 연습용 div가 나타났다가 사라지기도 하고, 생각처럼 간단하게 되지 않아서.. 다음을 위해 정리해보았다. 서서히 나타나는 애니메이션 구현하기 왼쪽에서 오른쪽으로 이동 : from left 10px > to left 50px 서서히 나타남 : opacity 0 > opacity 1 애니메이션 이름(animation-name) : anime 애니메이션 동작 시간(animation-duration) : 1.5s 애니메이션 동작 전후 설정(animation-fill-mode) : forwards (애니메이션이 끝난 후 그 지점에 그대로 있음) 애니메이션 시..

white-space 내가 지정한 width 값에 대하여 그 하위 텍스트의 공백과 개행 처리를 위해 사용하는 방법이다. white-space 속성 속성 의미 normal 연속된 공백과 줄바꿈을 공백으로 표시하고, 줄바꿈 함 nowrap 연속된 공백을 하나로 표시하고, 줄바꿈 하지 않음 pre 연속된 공백을 그대로 표시하고, 줄바꿈 하지 않음 pre-wrap 연속된 공백을 그대로 표시하고, 줄바꿈 함 pre-line 연속된 공백을 하나로 표시하고, 줄바꿈 함 코드 예시 white-space: pre-line; 전체 코드 Lorem ipsum dolor sit amet, consectetur adipisicing elit. .white-space { width: 200px; height: 200px; bac..

text-overflow 내가 지정한 width 값에 대하여 그 하위 텍스트가 범위를 벗어날 때 사용하는 방법이다. text-overflow 속성 속성 의미 clip 바깥으로 나오는 기본 값 ellipsis 내용이 넘어가면 ... 표시해줌 코드 예시 text-overflow: ellipsis; 전체 코드 Lorem ipsum dolor sit amet, consectetur adipisicing elit. .overflow { width: 200px; background-color: skyblue; white-space: nowrap;// 줄바꿈을 하지 않고 한 줄로 표시 text-overflow: ellipsis;// 레이아웃을 넘어갈 때 ... 표시 overflow: hidden;// 레이아웃을 넘어..

보통 div 태그로 묶여 있는 요소를 가로로 나란히 배치하기 위해서 display: flex를 이용해왔다. 하지만, 현재 개발중인 프로젝트는 버전이 맞지 않아서.. 사용할 수 없었다...ㅠㅠ 그래서 찾아본 결과, display: inline-block, float: left 등의 방법이 있었다. 하지만 float은 여백없이 정렬이 되어도 줄 바꿈 해제가 되지 않아서 배제하였다. 만약 줄 바꿈이 되어도 상관없다면 float을 사용하여 구현하는 것이 좋겠다! 블록 요소 가로로 정렬 및 줄 바꿈 해제하기 가로로 배치하고자 하는 요소에 display: inlin-block; 상위 요소에 white-space: nowrap; .container { white-space: nowrap; } .box { displa..

매번 적용할 때마다 margin-left인지 margin-right인지.., 속성 값은 또 0인지 auto인지.. 너무 헷갈려서 정리했다! 추가로 Styled-components를 사용하다보니, 하위 값에 대한 접근 방식도 정리해보았다. 마지막 요소만 오른쪽 정렬하기 1. 정렬될 요소들을 감싸는 Container 컴포넌트에 display: flex 지정하기 (width 값도 있어야 함) 2. 마지막 요소에만 style을 margin-left: auto 적용하기 Styled-components 내 하위요소에 접근하는 방법! 1. & > 하위요소 (아래 예시의 경우는 div) 2. :last-child { }, 혹은 :nth-child() { } 등 전체 코드 import styled from "styled..