2020년 02월 28일
CSS Box Model과 관련된 , , , 속성을 확인해 보겠습니다. box-sizing 속성은 기본적인 CSS box model을 대체하기 위해 사용하는 속성입니다. box model은 요소의 너비와 높이를 계산하는 데에 사용되며, 기본적으로…
css size matter CSS에서 텍스트의 크기, 박스의 크기 등을 지정하기 위한 사이즈는 , , 등의 단위를 이용합니다. 조금씩 헷갈리는 각각의 단위의 차이점과 사용법을 간단하게 확인해 보겠습니다. px 픽셀 (pixel, px)은 폰트와 …
css에서 웹문서의 레이아웃을 지정하고 수정하기 위한 중요한 속성인 position, display, float 속성에 대해 확인해 봅니다. position 엘리먼트에 CSS 속성으로 position을 지정하여 속성의 상대적, 절대적 위치를 지정할 …
2020년 02월 27일
LESS는 Sass와 더불어 많이 사용되는 CSS Pre Processor의 일종입니다. 최근에는 sass의 일종인 scss가 가장 폭넓게 사용되지만 여전히 레거시 코드에서는 꾸준히 사용되고 있습니다. http://lesscss.org/ 변수 기호…
SCSS 디렉티브는 으로 시작하는 명령문으로, 코드 내부의 분기, 반복, 믹스인 등의 제어에 사용되는 강력한 기능입니다. 조건분기 - @if…@else if…@else 리스트 반복 - @each 조건 반복 - @while 결과 스타일 정의 재사용 …
SCSS에서는 확장 스크립트를 통해 변수, 연산자, 함수등을 사용할 수 있습니다. SCSS의 확장 스크립트를 사용하면 css를 프로그래밍적으로 관리할 수 있습니다. 변수 scss 변수는 과 같이 로 시작하는 변수명을 사용해 정의할 수 있습니다. 폰…
Sass는 CSS preprocessor 의 하나로 현재 가장 폭넓게 사용되는 CSS Preprocessor입니다. Sass의 초창기 문법은 css와 판이합니다. css의 대괄호 와 세미콜론 을 사용하지 않아 문법적으로는 간소하지만 CSS에 익숙한…