전체 글

[CSS] Margin 과 Padding 의 차이점

Margin - Border 외부 크기 - Object 와 화면간의 여백 - 이 값을 조작하면 Object 가 주변 요소와 거리가 생긴다. Padding - Border 내부 크기 - Object 의 내부 여백 - 이 값을 조작하면 Object 의 내부 여백이 생겨 Border 가 뚱뚱해진다.

[CSS] Position 속성

Position 속성 Position 속성은 문서 안 요소들을 정하는 속성이다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다. static 아무 값도 넣지 않으면 되는 디폴트값으로, top, left, bottom, right 값을 전부 무시한다. relative 원래 있어야 하는 자리를 기준으로 위치를 지정한다. absolute relative 한 부모 요소를 찾아 위로 이동한다. 부모에 relative 가 없다면, 상단 위 0,0 기준으로 목표값이 정해지고 변경된다. Fixed 브라우저의 최상단에 고정. 마우스 스크롤을 따라 다니는 요소로, z-index 를 이용해 최상위 개체에 있는 것이 좋음. sticky 문서 요소 따라 배치되나, 가장 가까운 부모 el..

[CSS] SCSS 에 대하여

css : Cascading Style Sheets Sass : Syntactically Awesome Style Sheets SCSS : Sassy CSS Sass css 의 단점을 보완하기 위해 나온 확장 언어이자, 전처리기로 css 에 존재하지 않는 기능들을 가지고 css 를 다루는데 도움을 주는 툴이다. Sass 가 제공하는 기능은 다음과 같다 Variable(변수) : 자주 사용하는 색이나 폰트 등을 변수로 지정하여 재사용할 수 있음 Nesting(중첩) : 상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성가능. Modularity(모듈화) : @use를 사용하여 파일을 분할하고 모듈화 할 수 있음 Mixins(믹스인) : 함수처럼 defalut parameter를 지정할 수 있고, pa..