프론트엔드/CSS
[SCSS] SCSS 문법 정리
프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보겠습니다. (티스토리 코드 블록이 SCSS 언어를 제공하지 않아 코드 가독성이 떨어집니다.) Sass (Synthetically Awesome StyleSheets) Sass를 먼저 알아보는 이유는 SCSS가 Sass로부터 등장했기 때문입니다. Sass는 CSS 전처리기로써, 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공합니다. 다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있습니다. CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생..
[CSS] position 속성 (static, relative, absolute, fixed, sticky)
이전 게시글에서 display 속성에 대해 알아봤습니다. display는 요소가 차지할 영역에 관한 정보들을 가집니다. 오늘 다룰 position은 요소가 배치될 위치에 관한 정보들을 가집니다. 즉, position이 요소의 위치를 결정하고, display가 그 요소가 차지할 영역을 결정하는 것입니다. 1. static (default) position 속성을 별도로 지정하지 않는다면 기본값으로 static이 적용됩니다. static일 때 요소들은 일반적인 문서 흐름에 따라 화면에 배치됩니다. static에서는 좌표 값(top, bottom, left, right) 및 z-index 설정이 무시됩니다. 2. relative relative는 요소의 원래 위치(static일 때 위치)를 기준으로 좌표 값만..
[CSS] display 속성 (block, inline, inline-block)
display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다. 이 글을 통해 각 속성의 특징과 대표적인 태그 예시들을 알아봅니다. 또한 inline-block이 inline과 block의 어떤 특징을 갖고 있는지도 알아봅니다. 이를 토대로 요소들을 원하는 모습으로 배치할 수 있는 것을 목표로 합니다. 1. block 특징 항상 줄바꿈이 발생합니다. 가로폭(width)은 화면 전체를 차지합니다. → width: 100% width, height, margin, padding 속성을 지정할 수 있습니다. block 요소 안에는 inline 요소를 포함할 수 있습니다. 대표적인 block 요소 → , , , 2. inline 특징 줄바꿈 ..
[CSS] Flex (Flexbox)
Flex Flex는 Flexible Box라고 불릴 만큼 유연한 레이아웃을 표현할 수 있다. 또한 Grid와 더불어 대표적인 차세대 CSS 레이아웃으로 알려져 있다. Grid는 Flex보다 더 최신 문법이고 Flex 레이아웃이 대부분 Grid로도 구현할 수 있긴 하다. 그렇다고 Flex를 배울 필요가 없는 것은 아니다. 설계 목적이 다르기 때문이다. Flex: 1차원 레이아웃 Grid: 2차원 레이아웃 이러한 차이 때문에 Grid로는 구현이 어렵지만 Flex가 더 편리한 경우가 많이 존재한다. 만약 레이아웃을 만들 때 행, 열 중 하나만 다룬다면 Flex를, 둘 다 다룬다면 Grid를 고려해보자. (참고로 Safari에선 Flexbox가 동작하지 않는 이슈가 많다. 주의하자) 기본 구조 Flex 레이아웃..
[CSS] 선택자 종류 (CSS selectors)
CSS selectors 자주 쓰이는 CSS 선택자를 정리하고자 한다. 참고로 선택자의 한글 명칭은 사이트마다 다르니 영어 명칭에 친숙해지는 것을 추천한다. 1. Universal selector(전체 셀렉터) *는 페이지에 있는 전체 요소를 대상으로 한다. 하지만 *를 남용하는 것은 좋지 않다. 브라우저에 과부하를 줄 수 있기 때문이다. * { margin: 0; padding: 0; } *를 6.1 Descendant combinator처럼 사용할 수 있다. 예시는 .container의 자식 요소 전체를 의미한다. .container * { border: 1px solid black; } 2. Type selector(태그 셀렉터) 해당 태그명을 가지는 요소를 선택한다. p { color: blue;..
[CSS] 사용자 지정 CSS 속성 (custom properties)
사용자 지정 CSS 속성 (custom properties) CSS에 직접 변수를 만들어 사용할 수 있다. 장점 반복되는 CSS 값을 변수화 하면 일괄적으로 변경할 수 있다. 속성 값에 의미를 부여하기 때문에 코드를 이해하기 쉬워진다. 선언 변수명은 --로 시작하며 뒤에 어떠한 이름이든 올 수 있다. 대소문자를 구분한다. --bg-color와 --Bg-color는 서로 다른 속성으로 취급된다. 어느 곳에서나 사용할 수 있게 하려면 :root에 정의한다. 특정 선택자에 변수를 선언하면 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있다. :root { --main-bg-color: brown; } element { --bg-color: brown; --Bg-color: black; } 사용 ..