프로젝트 시작전에 항상 적용시키는 CSS reset코드이다. Andybell의 것을 약간 변형시켰다. * { margin: 0; padding: 0; font: inherit; color: inherit; } *, :after, :before { box-sizing: border-box; flex-shrink: 0; } :root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: break-word; -moz-tab-size: 4; tab-size: 4; overflow-x: hidden;..
CSS
"CSS만으로 매우 간단하게" 특정 숫자가 입력되었을 때, 숫자가 증가하고 감소하는 count component를 구현해보고자 한다. 완성 결과는 아래와 같을 것이다. 숫자 변화 하는 효과 (Count up, Count down) 구현 이번 포스트의 주요사항은 CSS의 conuter의 사용법이지만, 이를 조금 더 편리하게 사용하기 위해 나는 vue3를 이용하기로 했다. vue를 이용하지 않는 방법에 대해서도 마지막에 간단히 정리하고자 하니 잘 따라 와주면 좋겠다. 만약 JS변수를 바로 CSS에서 사용하는 방법에 대해 모른다면 이전 포스트를 참고하자. 1. 숫자 변하는 효과 - html, js 우선, Count라는 컴포넌트를 아래와 같이 만들었다. 매우 간단한 컴포넌트지만, 만들 때 범용성을 위해 고려한 ..
* { margin: 0; padding: 0; font: inherit; color: inherit; } *, :after, :before { box-sizing: border-box; flex-shrink: 0; } :root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: break-word; -moz-tab-size: 4; tab-size: 4; } html, body { height: 100%; } img, picture, video, canvas, svg { display: b..
여러 형제 요소가 있을 때, 각 요소의 순서에 따라 다르게 스타일링을 먹이고 싶을 때가 있었습니다. 이럴 때 사용하면 좋은, SCSS에서 제공하는 함수에 대해 간단히 정리해보고자 합니다. 먼저 HTML 코드는 아래와 같습니다.(NextJS 프레임워크를 사용했습니다.) wrapper 안에 총 3개의 div 요소가 존재하게 됩니다. const Home: NextPage = () => { const aniArray: number[] = [1, 2, 3] return ( {aniArray.map((el) => { return })} ) } 이제 어떻게 함수를 선언하고, 이 함수를 어떻게 실행 시키는지 알아봅시다. 먼저 @를 이용해서 함수를 선언합니다. 아래 코드에서 $ 표시는 SCSS에서 변수를 선언할 때 사용..
CSS를 이용하여 반응형으로 정사각형을 어떻게 만들 수 있을지 알아보자. 그리고, margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 알아보자. 해결책 [ 원리 ] 우선, 반응형 정사각형을 만들 때 먼저 알아야 하는 것은 margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 이다. 결론부터 얘기하자면 margin이나 padding의 % 값은 부모 태그의 넓이를 기준으로 삼게 된다. 이때 조금 주의해야 하는 점은, 좌우 margin, padding 뿐만 아니라 위아래 margin, padding 역시 상위 요소의 넓이를 기준으로 삼는 다는 것이다. [ 방법 - 1 ] 정사각형 컴포넌트 height를 0으로 두고, width를..
아래 사진 AAAA hash값 처럼 표시되는 글자가 넘칠 때, 넘치는 부분을 '...' 표시로 생략하고 싶을 때가 있다. 어떻게 할 수 있는지 알아보자. 목표 나의 목표는 아래 사진의 AAAA hash 칼럼에서 한 줄을 넘어가는 text들은 모두 '...'으로 표시 하는 것이다. Solution 아래 CSS 코드를 이용해 한 줄만 출력하고, 넘치는 부분은 '...' 으로 깔끔하게 표현 할 수 있다. .hash__wrapper { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 위의 코드의 뜻을 쉽게 말하면, Text가 넘치든 말든 한줄로 표현하고(white-space: nowrap), 만약 넘친다면 숨기는데(overflow: hidde..
