Front-end/css (2) 썸네일형 리스트형 [CSS] CSS의 Position 속성에 대해서 알아보자 ! Position 속성 ? 요소를 원하는 곳으로 배치 시킬때 사용하는 속성이며 top, bottom, left, right와 함께 사용됩니다. Position의 속성 5가지 static: 다른 속성을 지정해주지 않을때 기본값, HTML문서상 있어야 하는 원래위치에 배치되며, 이동시킬수없습니다. relative: 원래 있던 위치를 기준으로 상대적으로 배치를 합니다. absolute: 부모요소를 기준으로 위치를 지정해 줄 수 있습니다. fixed: 스크롤과 상관없이 항상 문서 좌측상단을 기준으로 좌표를 고정합니다. inherit: 부모 태그의 속성값을 상속받습니다. static position에 다른 속성을 부여하지 않으면 기본으로 설정되는 값입니다. 위에 말했듯이 있어야 하는 원래 위치에 배치가 되고 top.. CSS in JS CSS in JS는 말그대로 자바스크립트 코드안에서 css코드도 같이 작성하는 방식입니다. 이번에 웹사이트 하나를 만들며 공부하는 과정에서 CSS in JS 를 알게되어 공부를 하며 적용시켜보려 합니다. CSS in JS 라이브러리중 가장 많이 쓰는 것은 바로 styled-components가 있습니다. Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 그렇다면 왜 이것을 사용하는가 ? 장점에는 자바스크립트 와 css 사이에 상수와 함수를 공유할수 있으며 CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성, Styled Components는 스타일링을 위한 코드 사용량이 줄어들고 CSS 문법에 친화적이라고 합니다. 일반적으로 사용하는 css 코드와 sty.. 이전 1 다음
