Web
2 posts
[Web] CSS - position

position 정의 CSS  속성은 문서 상에 요소를 배치하는 방법을 지정한다. 속성 값 static 기본 값. 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. relative 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left 값에 따라 offset을 적용한다. offset은 다른 요소에는 영향을 주지 않아 레이아웃에서 요소가 차지하는 공간은 static과 같다. z-index 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다. absolute 요소를 일반적인 문서 흐름에서 제거하고, 레이아웃에 공간도 배정하지 않는다. 가장 가까운 static이 아닌 다른 포지션 값을 가진 부모를 기준으로 상대적으로 배치한다. 상위 요소 중 static이 없을 시 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, l…

July 18, 2023
Web
[Web] CSS - SCSS

SCSS 정의 란 CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. 사용 중괄호와 세미콜론을 모두 사용한다. 특징 변수(Variable) 할당 자주 사용하는 속상 값을 변수로 지정하여 재사용할 수 있다. 중첩(Nesting) 구문 중첩 구문을 사용해 가독성을 높일 수 있다. 모듈화(Modularity) 를 사용하여 파일을 모듈화 할 수 있다. 믹스인(Mixins) 함수처럼 default parameter를 지정할 수 있고, parameter를 받아 속성을 부여할 수 있다. 확장 / 상속 (Extend / Inheritance) 를 사용하여 scss 속성 집합을 상속 받을 수 있다. 연산자(Operators) div, random, max, min, sin, cos 등 여러 가지 수학적 기능을 사용할 수 있다. 장점 선택자를 중첩하여 반복되는 부모 요소 사용 감소 …

July 18, 2023
Web