어리둥절 분석가 그리고 개발자

:is 를 통해서 여러개에 동일한 명령어를 지정할 수 있다. 순서대로 등장하기 위해서 animation-delay값에 조금씩 차이를 주었다. 사실 10개 정도라서 그냥 하드코딩했는데, 만약 수십개 이상이라면 for문을 사용해서 스타일링할 수 있는 것인지, 거기까지는 시도해보지 않아서 모르겠다 ^^; 부디 그럴 일이 없기를. animation-fill-mode는 애니메이션이 수행된 다음에 어떻게 변화하는 지를 나타내는 것인데, 이번 경우에는 등장한 이후에 다시 사라지지 않는 것이 요건이었기 때문에 "both" 혹은 "forwards" 값으로 설정하였다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode const styled from..

화살표 아이콘을 누르면 블랙 반투명 레이어가 밑에서 천천히 올라온다 화살표 아이콘을 다시 누르면 반대로 천천히 내려간다 const Container = styled.div` position: relative; display: flex; flex-direction: column; `; const TextContainer = styled.div` position: absolute; top: 66px; left: 31px; `; const ArrowButton = styled.div` position: absolute; top: 178px; left: 29px; cursor: pointer; `; const Layer = styled.div` position: absolute; bottom: 0px; back..

텍스트가 지정된 너비보다 길때 말줄임표(...)을 쓰고 싶을 때가 있다. 이 때 핵심이 되는 CSS는 text-overflow, overflow, white-space를 아래처럼 지정해주는 것이다. 주의할 것은 width가 별도의 값을 가지고 있어야 한다. 만약 별도의 값을 지정해주기 어렵다면 아래처럼 -webkit-fill-available을 사용하는 것도 좋다. import * as React from "react"; import styled from "@emotion/styled"; const TableCell = styled.div` display: block; width: -webkit-fill-available; padding-left: 20px; text-overflow: ellipsis; ..

✔️ 요소 다음에 꾸밈요소 추가하기 가끔씩 특정 요소 다음에 무조건 밑줄이 나오는 등 분리요소 등을 매번 추가하고 싶을 때가 있다. ::after와 ::before를 통해 요소(태그) 앞뒤로 꾸밈 요소를 추가할 수 있다. footer-text라는 className을 가진 요소의 마지막 뒤에는 항상 gray 색상의 bar가 등장한다 .footer-text { position: relative; display: inline-block; margin-right: 17px; margin-bottom: 4px; text-decoration: none; font-size: 14px; line-height: 20px; &::after { content: ''; display: block; position: absol..

✔️ 인접형제 선택자란? 인접형제 선택자란 CSS 선택자(Selector) 중에서 같은 부모 아래에 있는 태그 두개가 인접해서 나타날 때 두번째 태그를 선택하기 위한 CSS 선택자이다. 즉, E + F 라고 하면 E 다음에 바로 나오는 F 요소를 의미한다 더 자세한 CSS 선택자(Selector)에 대한 글은 아래에! CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우 www.nextree.co.kr ✔️ SCSS에서 & SCSS에서 &은 무조건 위의 부모 요소를 의미한다 ✔️ & + & .a-file { ove..