[The RED : 프론트엔드 Back to the Basics] 4. CSS

posinity·2023년 6월 19일

[패스트캠퍼스] The RED : 프론트엔드 Back to the Basics

목록 보기

4/11

CSS의 변화

크롬 브라우저에서 수집한 통계에서, 가장 많이 사용된 프로퍼티 목록을 볼 수 있음.
뭐부터 공부해야 할 지 모르겠다면 이거 보면서 우선 순위 확인해보는 것 추천
상위에 width, height, position, padding 등 레이아웃 관련된 게 많음.

가장 많이 사용되는 CSS 순위

레이아웃

box-sizing

box-sizing이라는 CSS 속성을 수정하면 일반적으로 생각하는 멘탈 모델, 그러니까 border 부분까지 크기에 포함할 수 있음. 값은 border-box로 설정
box-sizing을 따로 정하지 않으면 기본값이 content-box -> 너비와 높이를 설정하면 그건 컨텐츠 부분의 크기로 인식.
이 값을 수정해서 너비와 높이를 설정하면 border까지 포함한 크기로 인식.

CSS Box Model 예제: https://5yspm.csb.app/
[MDN] 박스 모델 설명: https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
[MDN] box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

FlexBox

row : 논리적인 값. 화면에서의 수평이 아님. 글쓰기 방향과 일치한다는 뜻
아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 쓰는 언어에서는 마치 한국어/영어 환경에서 reverse-row한 것과 같다는 뜻. 그리고 세로 쓰기를 하는언어에서는 flex-direction을 row라고 설정하면 수직 방향으로 아이템이 배치됨. 한국어/영어 환경에서 column이라는 값을 사용한 것과 같음.

flex item이 컨테이너의 너비를 다 채웠을 때는 어떻게 동작해야하는지 설정하는 flex-wrap이라는 값이 있음. 컨테이너의 너비를 넘겼을 때 다음 줄로 옮긴다...라고 설정했다면 다음 줄은 현재 메인 축에 수직하는 방향으로 정해짐.
flex-wrap 속성: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

order라는 속성을 적용하여 화면에 배치되는 순서를 임의로 설정할 수 있음.
order 속성: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Flexbox의 여러 속성을 단계별로 실제로 코딩하며 마치 게임처럼 배워볼 수 있는 사이트 : https://flexboxfroggy.com/#ko

Grid Layout

Flexbox도 충분히 괜찮았지만 Flexbox는 1차원적, 즉 한 축에 대해서만 동작한다는 단점이 있었음. 아까 보았던 성배 레이아웃을 만들려면 필연적으로 중첩이 필요함. 구성한다해도 각 줄은 다른 줄의 레이아웃에 영향을 받지 않고 독립적으로 동작해서 그리드 형태의 레이아웃 구성에는 적합하지 않음. 이를 위해 나타난 게 그리드 레이아웃.

논리적 프로퍼티와 값

중국어처럼 세로쓰기를 사용하는 언어에서는 inline과 block의 방향이 달라짐.

margin-left :10px 오른쪽에서 왼쪽인 방향은 의미가 없음

margin-inline-start : 오른쪽에서 왼쪽 방향의 글에서도 적용

다국어 서비스를 염두하고 있다면 꼭 알아둘것!

선택자

타입 선택자 : 타입은 간단히 HTML 태그 이름.
수도 엘리먼트 : 가상 엘리먼트라고 부르기도 하는데 HTML 문서 트리에는 존재하지 않지만, HTML 엘리먼트처럼 취급됨. 콜론이 두 개임에 주의. 다만, 표준이 변경되기 전부터 있던 ::after, ::before는 한 개만 써도 브라우저가 지원해줌.
속성 선택자 : HTML 태그의 여러 속성에 의해 정해짐.
수도 클래스 :is(), :not()처럼 일부 함수형도 존재.
속성 선택자는 이 외에도 특정 문자열로 시작하거나 끝나는 속성을 찾을 수도 있음.
수도 엘리먼트나 수도 클래스는 잘 살펴보면 유용한 게 의외로 많아서 알아두면 코딩양을 줄이는데 도움이 많이 됨. 양이 그렇게 많지 않으니까 링크한 MDN 문서에서 실험실 아이콘 붙은 거 빼고는 대충이라도 한 번씩 훑어보기를 바람. 한꺼번에 많이 보는 것보다는 자주 보는 걸 추천하는데 당장 써먹을 일 없는 걸 배워놔봐야 잊어먹을 수 있기 때문.
나중에 관련 기능이 필요할 때 "어? 이럴 때 쓸 수 있는 선택자가 있었던 거 같은데?" 정도만 기억나도 충분.
타입 선택자는 대소문자 구분 안하고, 속성은 할 수도 있고 안할 수도 있으므로 그냥 대소문자 구분한다고 생각하고 작성하는 게 편함. 어차피 JS도 대소문자 구분하는 언어.
링크
Selector Level 4: https://www.w3.org/TR/selectors-4
MDN Pseudo elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
MDN Pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

우선순위

하위 점수가 아무리 높아도 상위 점수를 못 이김(금은동 같은 개념)
유니버셜은 점수가 없음

인라인 스타일은 다른 선택자와 함께 사용될 수 없으므로 상징적으로 스타일시트에서 일반적으로 정의한 모든 규칙에 우선해서 적용되나, !important가 붙으면 모든 걸 다 무시한다.
important는 되도록 쓰지 않는게 좋다.

선택자 관리

BEM
Block, Element, Modifier 순으로 클래스 이름을 조합.
Block은 정보의 영역을 의미. 프로필, 로그인폼, 메뉴 등
Element는 블럭 내에서 특정 기능을 수행하는 컴포넌트. 프로필의 이름이나 사진. 로그인폼의 버튼 등. 앞에 언더스코어 두 개를 추가함.
Modifier는 블럭이나 엘리먼트의 다른 버전. 앞에 대시 두 개를 추가함. 프로필--친구 라거나 로그인폼의 버튼인데 disabled 된 것등.
규칙이 상대적으로 단순한 반면 길어진다는 단점이 있음.
예제로 이해하는 BEM(한국어): https://naradesign.github.io/bem-by-example.html
SMACSS
Scalable and Modular Architecture for CSS
SMACSS는 조금 더 규칙이 복잡한데 BEM에 비해 그리 널리 사용되는 것 같지는 않다.
SMACSS 온라인 매뉴얼(영어): http://smacss.com/book/