CSS

CSS-in-JS CSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말한다. 👍 장점 지역 스코프 스타일 일반 CSS를 작성할 때는 실수로 의도한 것보다 더 광범위하게 스타일을 적용하기 쉽다. 하지만 CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결한다. 코로케이션 일반 CSS를 이용할 경우 모든 리액트 컴포넌트가 src/components 에 있는 동안 .css 파일을 src/styles 디렉토리에 넣을 수 있다. 이런 경우 앱이 커짐에 따라 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려워진다. 사용되지 않는 스타일을 쉽게 구분할 수 없어서 CSS에 사용하지 않는 코드가 표시되는 경우가 많아진다. ..

Position position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다. position 속성은 자주 사용하지만 그만큼 실수하기 쉬운 부분이니 꼼꼼히 살펴보자. 요소의 위치를 정하는 left, right, top, bottom 속성 position 속성보다 먼저 알아두어야할 속성이 있다. 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 하는데, 이때 사용하는 속성이 left, right, top, bottom이다. position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다. 속성 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정해준다. r..

캐스캐이딩(Cascading)이란? CSS의 정식 명칭은 Cascading Style Sheets. 캐스캐이딩은 '위에서부터 아래로 떨어지는' 이란 의미를 지닌 단어이다. 맨앞에 캐스캐이딩이란 단어가 들어가는 만큼 CSS에서는 이 원리가 가장 중요하게 적용된다. 웹 요소는 하나 이상의 스타일에 영향을 받을 수 있기 때문에 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. CSS에서 우선순위에 따라 계단식으로 스타일이 적용된다는 의미를 캐스캐이딩이라고 하는데, 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이니 잊지말자. 스타일이 충돌하지 않게 하는 방법으로 다음 2가지 방법이 있다. 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 ..