Tech/CSS 2

Position

포지션 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정 다섯 가지 Position값이 있습니다. static relative fixed absolute sticky 1. static 정적으로 배치되어 top, bottom, left, right속성의 영향을 받지 않습니다. 또한 position을 별도로 지정해주지 않아도 기본값으로 static이 적용됩니다. 2. relative 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 top, bottom, left, right 속성을 이용해서 위치할 수 있습니다. 3. fixed 화면을 스크롤 하더라도 요소의 위치를 top, bottom, left, right 속성을 이용하여 고정 할 수 있습니다. 4. absolute ..

Tech/CSS 2023.07.17

React in CSS

배경 React의 다양한 CSS 사용방법 다양한 방법 비교 default CSS 내 방법 CSS-in-CSS CSS Module SASS(SCSS) CSS-in-JS Style Jsx Style Component Utilty First Tailwind 결론 1. 배경 React 에서 CSS를 사용하는 방법은 막연하게 “다양하다"고만 생각하고 있었고, 저는 가장 단순하고 직관적인 JSX 내부에 CSS를 입력하는 방법으로 사용했습니다. 반복되는 CSS는 컴포넌트화 시켜서 사용하긴 했지만, 그 프로젝트용 단발성으로 사용하고 다른 페이지(프로젝트)에서는 거의 사용되지 않았습니다. 그럼에도 크게 문제가 되지 않았던 이유는 페이지가 복잡하지 않고, 디자인의 중요도가 높지 않았기 때문입니다. 각 도메인에서 CSS F..

Tech/CSS 2022.08.01