벌써 2주차 일정이 마무리되었습니다. 이번 주에 배운 것들을 정리하는 과정에서, 추가하거나 보완할 만한 부분을 따로 정리했습니다.
CSS: Float
float 속성
기본적으로 float는 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
띄운다는 것은 엄밀히 말하자면 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.
본래 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 주기 위해 만들어진 속성으로, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.
다음과 같은 네 가지 속성값이 존재합니다.
- inherit: 부모 요소에서 상속
- left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
- none: 요소를 부유시키지 않음
float 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.
Figma
Figma 소개
Figma는 스마트폰 애플리케이션이나 웹사이트 등을 디자인할 때 사용하는 UI 디자인 도구입니다.
다양한 직무의 사람들이 모인 협업에서, 빠르게 UI 디자인 아이디어를 공유하기 쉬워서 웹 UI를 구성할 때 널리 사용되는 툴입니다.
웹 어플리케이션을 만드는 과정에서, 피그마를 사용해 와어어프레임을 드로잉할 수 있고, 이를 토대로 프로토타이핑을 진행하게 됩니다.
Figma의 특징
피그마는 기본적으로 자동 저장과 버전 히스토리 추적을 지원합니다.
따라서 좀 더 안정적인 환경에서 UI 구성을 시도할 수 있으며, 버전 관리를 할 수 있기 때문에 협업을 더욱 효율적으로 진행할 수 있습니다.
또한 PC의 웹/앱과 모바일 앱을 모두 지원합니다. 다만, 모바일의 경우 PC 웹/앱에 대한 미러링을 위해 사용합니다.
또, 마치 React를 다루는 것처럼 컴포넌트 기반의 디자인이 가능합니다.
동일한 요소를 화면에 여러 번 걸쳐서 재사용하는 상황에서 피그마는 매우 효과적일 수 있다는 뜻입니다.
BEM Method
CSS를 작성할 때 클래스명은 언제나 골칫거리로 작용합니다. 중복되서는 안되지만, 그렇다고 너무 복잡하게 지으면 작성과 유지/보수가 힘들어집니다.
이를 해결하기 위해 등장한 방법론이 바로 BEM(Block Element Modifier)입니다.
BEM의 개념
BEM은 클래스명을 블럭, 요소(Element), 속성(Modifier)에 따라 구분하여 작성하는 방식입니다.
먼저 블럭은 재사용 가능한 기능적으로 독립적인 컴포넌트를 지칭합니다. 따라서 블럭에 해당하는 부분은 독립적으로 떼어다가 페이지의 다른 영역에 사용하는 것이 가능한 요소라고 볼 수 있습니다.
Element는 자신이 속한 블럭 내에서만 유효한 종속적인 기능/요소를 의미합니다. 따라서 블럭과 같이 독립적으로 떼어다 사용하는 것이 불가능한 요소들이 여기에 속할 것입니다.
마지막으로 Modifier는 블럭이나 element의 속성을 가리킵니다. 우리가 CSS에서 논하는 속성이 아니라, 해당 요소가 페이지 내에서 맡게 되는 기능, 목적 등이 여기에 속합니다.
아래 코드 블럭이 BEM 방법론의 예시입니다.
.main__article--contents {
color: blue;
}위 클래스명은, main에 해당하는 블럭 안에서, article을 담당하는 element 속 content 부분을 꾸며주기 위해 만들었다고 볼 수 있겠습니다.
코드 블럭에 보이는 것과 같이, 블럭과 element는 __로, element와 modifier는 --로 구분해줍니다.
BEM 방식의 장점
BEM은 이미 클래스명에 대략적인 HTML 문서의 구조를 담고 있습니다. 따라서 클래스명만 보고도 마크업 구조를 어느 정도 파악할 수 있습니다.
실제 CSS를 적용할 때에도, BEM 방식을 따른다면 문서의 어느 부분에 어떻게 스타일링이 적용될 지 추측하는 것이 더 쉬워집니다.
또한 모든 클래스명이 겹치지 않기 때문에, CSS 코드가 예상치 못한 영역에 영향을 끼치는 일을 최소화할 수 있고, SCSS를 다룰 때 중첩이 과도하게 필요하지 않습니다.
hsl 색상
CSS에서 색상을 다룰 때, 일반적으로 헥사코드나 RGB 색상표를 자주 사용합니다.
그러나 CSS에서는 색상을 사용할 수 있는 방식이 하나 더 있는데 바로 HSL 색상입니다.
hsl 색상은 "색상, 채도, 명도" 세 가지 지표를 조합하여 필요한 색상을 찾을 수 있도록 하는 체계입니다.
hsl 개념
hsl은 메서드와 같이, 다음과 같은 방식으로 작성하여 사용합니다.
.container {
color: hsl(hue, saturation, lightness);
}먼저 색상(hue)은 빨강, 초록과 같이 기준이 되는 색상을 말합니다.
모든 기준 색상들은 0에서부터 360까지 고유한 숫자 코드를 가지고 있으며, 해당 숫자 코드를 위 코드 블럭의 hue 부분에 작성합니다.
그 다음 인자인 채도(saturation)는 색상의 선명도를 결정하는 부분입니다. 채도가 높을 수록 색이 짙어지고, 낮을 수록 옅어집니다.
0%에서 100% 사이의 값을 집어넣을 수 있는데, 0%에 가까울 수록 색깔을 회색에 수렴하고, 100%에 가까울 수록 원색에 가까워집니다.
마지막 인자인 명도(lightness)는 색깔의 어둡고 밝음을 결정합니다.
채도와 마찬가지로 0%~100% 사이의 값을 입력합니다. 0%에 가까울 수록 검은색, 100%에 가까울 수록 흰색에 가까워집니다.
hsl 활용
hsl은 기준 색상(hue)를 지정하는 방식이므로, 이를 활용해 좀 더 효율적인 스타일링을 할 수 있습니다.
hue 부분을 실제 숫자의 코드를 입력하는 대신, 숫자 코드를 하나의 CSS 변수에 담아서 활용하면 다양한 색깔 변화를 아주 손쉽게 훑어볼 수 있습니다.
<style>
:root {
--my-color-1: 0;
}
.header {
background-color: hsl(var(--my-color-1), 50, 30);
}
.main {
background-color: hsl(var(--my-color-1), 80, 30);
}
</style>--my-color-1이라는 변수를 만들고 색상 코드를 0을 입력했습니다. (0은 hsl 기준으로 빨강에 해당합니다.)
이를 활용하여 header 클래스와 main 클래스의 배경색을 각각 지정해 주었습니다.
실제 웹 페이지를 구성할 때에는 예시처럼 하나의 기준색을 가지고 채도와 명도를 조절하여 비슷한 색감으로 통일하는 경우가 많기 때문에, hsl은 전체적인 웹 페이지의 색감을 구성하는데 효율적입니다.
뿐만 아니라, 현재 색상에 해당하는 hue가 변수에 담겨져 있기 때문에, 변수만 고치면 웹 페이지의 전체적인 테마를 유지하면서 색깔만 선별적으로 바꿀 수 있습니다.
예를 들어, 현재 기준이 되는 빨강(코드 0)을 파랑(코드 240)으로 바꾼다면, header와 main의 명도/채도는 유지되면서 기준색만 파랑이 될 것입니다.
