[CSS] CSS 필수 개념을 알아보자 :)

프론트엔드 공부를 하면서  CSS 실력도 너무 중요하다는 생각을 늘 하고 있었다.

지금은 프론트엔드 멘토를 통해서 많이 만들어보고, 다양한 속성들에 대해 이해 해보려고 노력하고 있다. 

 

그리고 기다리던, 빔캠프 6월 과정이 오픈해서 이번에 신청했다!

CSS를 잘하는 지인이 정말 좋은 강의라고 강력 추천해서 신청했는데, 아직 한 달 정도 남았지만 너무 기대가 된다.

 

** 빔캠프에 대한 자세한 내용은 사이트를 참조하시길 **

https://veamcamp.com/

 

 

빔캠프가 본격적으로 시작되기 전, CSS에 대한 기본 개념에 대해 공부를 한 후 가려고 한다.

(강사님께서 메일로 예습해오면 좋을 개념들을 리스트업 해주셨음)

1. Cascade의 의미 & Selector Specificity
2. Position
3. CSS Box-model & Inline elements, Block-level elements
4. Negative Margins
5. Margin Collapsing
6. Flexbox

 

Cascade의 의미 & Selector Specificity

https://codingaring.tistory.com/entry/Week1-CSS-Cascading

CSS Cascading

코드잇 위클리 페이퍼의 주제로 나왔었던 내용인지라, 이 부분에 대해서는 이전 글을 읽고 다시 한 번 리마인드 한다는 느낌으로 넘어가도록 하겠다.

 

Position

MDN Position

시맨틱 태그에 대해서 알아볼 때, 포지션에 대해서도 간단하게 포스팅을 했던 기억이 난다.

사실 포지션에 대한 내용은 공식문서인 MDN 사이트에서도 친절하게 잘 정리 해놓아서, 공식문서를 읽어보는 것도 좋다고 생각한다. 

 

2024.03.14 - [🗂️ 개발 이모저모] - Sementic Tag & Position

Sementic Tag & Position

 

CSS Box-model & Inline / Block Element

이 부분은 생각보다 다룰 내용이 많아서, 따로 포스팅 해서 링크를 걸어두려고 한다.

✅ 자세한 내용은 아래의 포스팅으로 -! :)

 

2024.05.29 - [🗂️ 개발 이모저모] - [CSS] Box Model

 

Negative Margins

네거티브 마진이란, 마진값에 음수를 줘서 요소의 위치를 끌어당기는 것을 말한다.

말로 하면 잘 이해가 되지 않으니, 눈으로 한 번 보자

네거티브 마진을 주기 전

위의 이미지는 네거티브 마진을 주지 않은 상태이다.

이때, 원형이 겹쳐지는 UI로 바꿔줌과 동시에 옆에 있는 텍스트가 그에 맞게 끌어당겨지길 원한다.

그럴 때 사용할 수 있는 것이 바로 네거티브 마진이다.

.circle {
	margin-left : -15px;
}

위와 같이, 네거티브 마진을 주고 싶은 곳에 음수로 값을 넣어주면 아래와 같이 겹쳐지게 만들 수 있다.

네거티브 마진 적용

이렇게 겹쳐질 때, 가장 위에 파란색 원이 올라간 이유는 html 태그 상의 순서가 파란색이 가장 마지막이기 때문이다.

<main>
    <div class="circle yellow"></div>
    <div class="circle green"></div>
    <div class="circle red"></div>
    <div class="circle blue"></div>
    <p class="negative">네거티브 마진</p>
  </main>

만약 맨 앞의 요소가 가장 앞에 나오길 원한다면, main에 flex를 줘서 z-index를 설정할 수 있게 해준 후, z-index를 원하는 순서대로 지정해주면 된다.

 

Margin Collapsing

MDN Margin Collapsing

 

Margin Collapsing을 직역하면 여백 상쇄 정복인데, 간단히 설명하면 여러 요소에 준 여백 값이 겹치면서 서로 상쇄되는 현상을 의미한다.

 

블록의 상단 및 하단 여백이 각 각의 여백 중 가장 큰 크기의 여백으로 결합(붕괴)되는 것을 의미하고, 모든 상황에서 이러한 마진 상쇄가 일어나는 것은 아니다.

• floating된 요소
• absolutely positioned 된 요소
• display가 flex 또는 grid로 설정된 경우

위의 경우에는 여백이 상쇄되지 않는다.

 

그렇다면 정확히 어떤 경우에 이러한 마진 상쇄가 일어나는 것일까?

1. 형제 요소가 인접한 경우 
2. 부모 자식을 구분하는 내용이 존재하지 않을 때
   1. 부모와 자식에 각각 여백을 가지고 있는 경우, 그 여백을 구분하는 border, padding 등이 없는 경우 해당 여백이 상쇄된다.
3. 빈 블록
   1. 블록의 상단 여백과 하단 여백을 구분할 테두리, 패딩, 인라인 콘텐츠, 높이(및 최소 높이)가 없으면 여백이 상쇄된다.

이러한 margin collapse의 개념을 알고 있어야, 내가 의도하지 않은 대로 CSS가 적용되었을 때 빠르게 수정할 수 있을 것이다.

 

Flexbox

MDN Flexbox

Flexbox는 행과 열 형태로 요소들을 배치하는 레이아웃 메서드이다. 

Flexbox  이전에 요소들을 배치하기 위해서는 floats와 positioning을 이용했지만, 이는 한계가 있었다.

• 콘텐츠 블록을 상위 콘텐츠 블록의 수직 중앙에 배치하기
• 사용 가능한 너비/높이의 크기와 상관없이 컨테이너의 모든 하위 항목이 사용 가능한 너비/높이의 같은 크기를 차지하도록 하기
• 여러 열에 놓인 콘텐츠 요소의 크기가 달라도 동일한 높이를 가지도록 하기

위와 같은 레이아웃은 기존의 방법으로 구현하기 어려웠기 때문에 새롭게 Flexbox 가 새롭게 등장했다.

 

사용 방법

요소가 세 개인 section 태그에 display : flex  속성을 넣어보았다.

 

section 태그 내부의 요소들이 가로(오른쪽) 방향으로 쌓인 것을 볼 수 있는데, 이는 flex-direction(쌓이는 방향)의 기본값이 row이기 때문이다.

flex-direction 속성값을 바꾸면 배치축을 바꿀 수 있는데 그 속성값의 종류는 아래와 같다.

지금은 보기 좋게 justify-content 및 align-items 속성을 이용하여 수직, 수평 정렬을 설정해준 것이다.

 

수직, 수평 정렬하기

Flex의 속성 중에는 justify-content와 align-items 라는 속성이 있다. 이는 각 각 수평, 수직 정렬인데 flex-direction이 row 이냐 column 이냐에 따라서 그 역할은 변화한다.

• justify-content => 요소가 쌓이는 방향의 정렬을 정의
• align-items => 요소가 쌓이는 방향의 수직 방향의 정렬을 정의

예를 들어 flex-direction이 기본값인 row로 되어 있다면, justify-content는 수평 방향의 정렬을 정의하고 align-items는 수직 방향의 정렬을 정의하는 것이다.

 

이 속성에서 줄 수 있는 값은 대표적으로 아래처럼 세 가지로 나누어 살펴볼 수 있다.

• start / end / center : text-align 속성의 값과 비슷한 역할
• flex-start / flex-end : Flexbox의 시작점, 끝나는 지점에 배치할 것
• space-between / space-around : 사용할 수 있는 공간에 가득 차도록 (요소의 너비가 지정되어 있으면 여백을 자동으로 동일하게 배치해 줌)

이 속성들에 대해서 코드로 익히고 싶다면 Froggy game 을 해보며 속성들에 대한 동작들을 익혀보는 것도 좋을 것 같다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy