[DAY-29] CSS 심화 (1)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
나는 이렇게 편한 emmet 문법을 왜 적극적으로 활용하지 못했는가.
강사님 따라하면서 정말 재밌게 코딩했습니다.

BEM 방법론을 찾아본 뒤, 저번에 로토님께서 왜 언더바 두개를 쓰셨는지 단번에 이해할 수 있었어요. 물론 해당 문법을 사용하신 것은 아니지만..
저는 className은 전부 header-title와 같은 케밥 케이스로만 작성해왔기에 흥미롭게 찾아봤습니다.
나중에 더 자세히 글을 작성해볼게요.

원래 CSS에 관심이 많았어서 복습하는 차원에서 강의를 수강했습니다.
그런데 제가 몰랐던 부분이 생각보다 많더라고요..!
열심히 강의 듣고 공부해서 SCSS 문법으로 스타일을 쭉쭉 작성해나갈 수 있는 개발자가 되고 싶습니다.

[1] CSS 문법

[1-1] emmet 문법

이 편한걸 저는 왜 다 몰랐을까요.

.classname과 #idname 입력 후 tab은 알고 있었지만, 오늘 레온님이 이외의 방법들을 사용해서 빠르게 요소들을 생성하시는 모습 보고 너무 놀랐습니다.

간단하게 정리해보도록 하겠습니다.

• 자식 : >
• 형제 : +
• 부모 : ^
• 그룹 : ()
• 여러개 : *
• 넘버링 : $
• id : #
• class : .
• 속성 : []
• 텍스트 : {}

익숙하지 않은 자식 요소 문법을 예시로 활용해보면 이런 식의 작성이 가능합니다.

또한 type도 지정해줄 수 있습니다.

예를 들어 input:radio (input:r)을 입력하고 tab을 누르면 <input type="radio" name="" id="">이 자동으로 생성됩니다.

자세한 정보는 하단의 emmet document에서 확인할 수 있습니다.

https://docs.emmet.io/cheat-sheet/

[1-2] BEM 방법론

CSS 구조 및 상태를 관리하기 위한 CSS 개발 방법론입니다.

쉽게 풀어쓰면 ‘CSS ClassName을 어떻게 지으면 좋을지’에 대한 내용입니다.

기본적으로 BEM은 id를 사용하지 않고 Class만을 사용하며,
어떻게 보이는가가 아닌, 어떤 목적인가에 따라 이름을 짓습니다.

예를 들어 에러 메세지를 띄우는 P 태그에는 .error라는 이름을 부여합니다.

BEM은 Block, Element, Modifier을 뜻하며, 각각 __와 –로 구분합니다.

예를 들어 이와 같은 class 이름이 있다고 생각해봅시다.

.header__navigation--navi-text {
  color: black;
}

그렇다면 header는 block, navigation은 element, navi-text는 modifier가 됩니다.

BEM 방법론은 나중에 조금 더 자세히 다뤄서 따로 글을 작성해 보도록 하겠습니다.

[2] CSS Float

CSS를 제대로 다뤄봤을 때, Flex, Grid로 된 예시가 이미 너무나도 많아진 시기였습니다.

따라서 Float 속성을 사실상 처음 다뤄 보았습니다.

Float는 정렬을 할 때 사용하지만, 사실상 지금은 많이 사용하지 않습니다.

Float Mdn 문서

[2-1] Float, Clear

Float 속성은 사용하고 나면, 헤제(Clear)를 해줘야 합니다.

하지만 html의 새로운 요소를 만들고, 해당 요소에 clear을 해주면 사실상 우리가 원하는 수평 정렬이 일어나지 않습니다.

따라서 ::after을 사용합니다.

.clearfix::after {
  content: "";
}

::after은 해당 부분(.clearfix)에 만들어지는 가상의 요소를 뜻합니다.

해당 가상 요소는 clearfix가 부여된 구역 마지막 부분에 추가되며, CSS 속성을 부여할 수 있습니다.

이때 ::after는 content와 함께 써 줘야 동작합니다.

<div class="container clearfix">
  <!-- item들을 감싸고 있는 요소에 해당 class 이름을 추가 -->
  <div class="item float">1</div>
  <div class="item float">2</div>
  <div class="item float">3</div>
</div>

[2-2] Float 속성의 배치

한 container 안에 float 속성이 부여된 item들과 그렇지 않은 item들이 있는 경우, 어떻게 배치될까요?

이런 식으로 겹쳐서 배치되는 모습을 확인할 수 있습니다.

레이아웃에 문제가 생기기 쉽죠.

따라서 Float을 사용하면서 주의할 점은, 새로운 요소를 만들고 사용하고 싶다면

Float item들이 있는 clearfix 구역에 형제 요소로 만들면 안된다는 것 입니다.

따라서 새로운 요소를 붙이고 싶다면 clearfix로 따로 div를 만들어 float item들을 한번씩 감싸줘야 합니다.

[2-3] float 배치 순서

왼쪽 정렬은 우리가 흔히 알다시피 왼쪽 → 오른쪽 방향으로 정렬이 이루어집니다.

그렇다면 오른쪽 정렬은 어떻게 일어날까요?

보시다시피 오른쪽 → 왼쪽 방향으로 정렬이 일어납니다.

왼쪽 정렬과 마찬가지로 왼쪽 → 오른쪽 방향으로 정렬시키기 위해서는 어떻게 해야할까요?

정답은, float 정렬은 오른쪽으로 하되, 안에 있는 자식 요소들의 정렬을 left로 바꿔주면 됩니다.

[2-4] float과 block layout

mdn 문서를 읽어보면 float은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 display 값의 계산 값을 수정합니다라는 말이 있습니다.

해당 CSS가 부여된 div는 display가 inline이며, 가로와 세로 값이 최소값으로 조절됩니다.

div {
  width: 200px;
  height: 200px;
  border: 4px solid;
  display: inline;
}

하지만 해당 값이 부여된 div도, float 속성을 적용하면 자동으로 display가 block을 가지는 것을 알 수 있습니다.

[3] CSS Position

Position은 요소의 위치 특성을 정의합니다.

Position Mdn 문서

[3-1] absolute

부모 요소를 기준으로 정렬됩니다.

단 부모 요소의 position 값은 static을 제외한 relative, absolute, fixed, sticky를 가져야 합니다.

position이 absolute를 가지면, left, right, top, bottom을 지정할 수 있습니다.

[3-2] fixed

fixed는 어떤 부모 요소가 있다고 하더라도 viewport를 기준으로 배치됩니다.

하지만 부모 요소의 transform, perspective, filter 속성에 영향을 받아 fixed의 기준 요소가 변경되는 문제가 있습니다.

position과 fixed는 자동으로 해당 요소의 display가 block으로 바뀌는 성질이 있습니다.

[4] CSS Flex

Flex는 하나의 차원을 사용하는 레이아웃 구조입니다.

따라서 수평, 또는 수직 정렬을 할 때 대부분 Flex 기술을 사용합니다.

[4-1] Flex container

Flex container은 flex가 적용될 item들의 부모 요소를 뜻합니다.

.container {
  border: 4px solid;
  display: flex;
}

[1] display

display의 값은 flex와 inline-flex가 있습니다.

• flex : 수직 정렬 / 가로 넓이가 viewport를 기준으로 최대로 확장
• inline-flex: 수평 정렬/ 가로 넓이가 하위 요소를 기준으로 최소로 축소

flex를 유지하며 block처럼 사용할 것 인지, flex를 유지하며 inline처럼 사용할 것인지의 차이입니다.

[2] flex-direction

flex의 방향에 따라 flex-direction을 선택할 수 있습니다.

• row: 행(줄) - default
• column : 열(칸)
• row-reverse: row와 반대 방향 (오른쪽 → 왼쪽)
• column-reverse: column과 반대 방향 (아래 → 위)

[3] flex-wrap

자식 요소들의 크기에 따른 줄바꿈에 대한 속성으로 flex-wrap을 선택할 수 있습니다.

• nowrap : 각각의 아이템을 감싸지 않고, 줄바꿈이 일어나지 않습니다.
• wrap : 각각의 아이템을 감싸 줄바꿈이 일어날 수 있습니다.
• wrap-reverse: 줄바꿈이 일어나는 방향이 반대가 됩니다.

[4] justify-content

주 축의 정렬 방법을 justify-content를 통해 선택할 수 있습니다.

정렬 방향은 동일하며, 컨테이너의 위치만 지정해줍니다.

• flex-start: 정렬된 하위 요소들이 정렬 시작 부분에 위치합니다.
• flex-end: 정렬된 하위 요소들이 정렬 끝 부분에 위치합니다.
• center : 정렬된 하위 요소들을 가운데에 위치시킵니다.
• space-between: 가장 첫번째 아이템을 주 축의 시작 부분에, 마지막 아이템을 주 축의 마지막 부분에, 나머지 요소들을 사이에 균등한 간격으로 배치해줍니다.
• space-around: 아이템의 양 옆에 균등하게 공간을 분배하여 배치합니다.

[5] align-items

아이템들의 컨테이너 안 교차축에서의 정렬을 만들어냅니다.

• stretch: 아이템의 특정 크기가 정해져 있지 않은 경우, 부모 요소에 꽉 맞게 자식 요소들이 늘어납니다.
• flex-start : 교차축에서의 시작 부분에 요소들이 위치합니다.
• flex-end: 교차축에서의 끝 부분에 요소들이 위치합니다.
• center: 교차축을 기준으로 가운데에 요소들이 위치합니다.
• baseline: 아이템에 들어있는 문자 기준선에 맞춰서 정렬이 됩니다.

[6] gab

컨테이너 안 하위 요소들 사이의 일정 간격을 만들어줍니다.

[4-2] Flex items

Flex item들은 display가 flex또는 inline flex를 통해 정렬된 하위 요소들을 뜻합니다.

[1] flex-grow

아이템들의 증가되는 비율을 입력합니다. (default: 0)

입력되는 비율에 따라 부모 요소 내 해당 아이템들의 크기가 정해집니다.

[2] flex-shrink

flex-shirink는 요소의 감소 너비 비율을 지정할 수 있습니다. (default: 1)

[3] flex-basis

요소의 기본 너비를 설정합니다.

• auto: 해당 요소에 입력되어있는 가로, 세로 너비나 자동적으로 늘어나고 줄어든 너비에 맞춥니다. (default)
• 특정 크기 입력: 더 이상 해당 요소의 width, height는 적용되지 않습니다.

해당 grow, shrink, basis를 flex 속성에 작성할 수 있습니다.

flex : grow shrink basis;

[4] align-self

align-items의 안에 있는 개별적인 아이템의 교차축 정렬을 만들어 줄 수 있습니다.

---

출처

프로그래머스