[CSS] CSS심화_레이아웃

❗❗  데브코스 26일차 (09.06)

 

6주차가 시작됐다. 약간의 일정 변경으로 인해,
오늘 하루는 CSS 심화 과정을 다루게 됐다.

 

평소 CSS에 관심이 없어서 항상 디자인 프레임워크만 사용해서 CSS 레이아웃에 관해 공부해야지
마음만 먹다가 결국엔 이번 과정을 통해 학습하게 됐다.
왜 나는 항상 프레임워크나 편한 것에 의존하면서 개발했는지

Vanilla JS에 이어 오늘 또 반성하게 됐다....

CSS 레이아웃 방법에는 크게 Float, Position, Flex, Grid가 존재한다.
각각의 특징과 사용법을 간단히 다루어 보자.

 

✏️ Float

float는 "띄운다"라는 의미가 있고, 정렬을 위해 사용되는 속성이다.

가장 흔하게 사용하는 경우가 사진과 텍스트를 함께 나열할 때 사용된다.

[float 속성 값]

• none - 기본값
• left - 요소를 왼쪽에 배치
• right - 요소를 오른쪽에 배치
• clear - float 속성 제거

 

div 태그는 display : block이기 때문에 수평정렬 및 레이아웃 구상 시에

float 속성 값을 이용해서 표시해준다.

 

가정 : 하나의 container에 4개의 요소가 있다.

3개 div 태그는 수평 정렬이 필요하고, 마지막 div 태그는 자유롭게 block 단위 표시가 필요하다.

예시 그림

<style>
    .container{
        border : 4px solid;
    }

    .container .item.four{
    width : 150px;
    height : 150px;
    background-color : orange;
    }

    .container .item {
    width : 100px;
    height : 100px;
    background-color : royalblue;
    border-radius : 10px;
    font-size : 40px;
    margin : 10px;
    }

    .float {
    float : left;
    }

    .clearfix::after{
    clear : both;
    }
</style>
    
    <div class="container">
      <div class="clearfix">
        <div class="item float">1</div> 
        <div class="item float">2</div>
        <div class="item float">3</div>
      </div>
      <div class="item four">4</div>
    </div>

설명 : container로 감싼 4개의 item에서 3개의 item에는 float : letf값을 지정해주고

마지막 item에는 float 속성값을 지우고 원하는 디자인으로 구상하면 된다.

 

여기서 중요한 키워드는 foat 속성 지우기!

float 속성을 이용하지 않을 요소를 사용하려면 꼭  이전에 사용하던 float 속성을 없애줘야지

요구한 대로 화면에 나타나게 된다.

 

float 속성을 지우는 방법

1. <div class="item four" style="clear: both;">4</div>

2 .clearfix::after{
    clear : both;
    }

첫 번째 방법은 해당 요소에서 직접 float 속성을 지우고 사용하면 된다.

하지만 레이아웃이 변경되거나 하면 해당 코드도 변경해야 하는 경우가 생긴다.

 

그래서 두 번째 방법으로 정렬이 필요한 3개의 item 요소를 하나의 div로 묶어준다.

그 후, ::after (선택한 요소의 맨 마지막에 자식요소를 생성해줌)을 이용하여 

생성된 마지막 가상 요소에 clear를 지정해주면 해결된다.

 

✏️Position

position 속성은 문서상에 요소를 배치하는 방법을 지정한다.

가장 흔하게 부모 컴포넌트 기준으로 자식 컴포넌트 위치를 표현할 때 사용한다.

 

[position 속성 값]

• static
• relative
• absolute
• fixed
• sticky

 

가정 : 부모 컴포넌트의 제일 오른쪽 하단에 자식 컴포넌트를 배치시켜야한다.

(card design안에서 div요소를 사용한다고 할 때)

예시 그림

<style>
.parent1{
  width: 250px;
  height: 150px;
  background-color: orange;
  position: relative;
}
.child{
  width: 100px;
  height: 100px;
  background-color: royalblue;
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>

<div class="parent1">
	<div class="child"></div>
</div>

 

부모 컴포넌트 기준으로, 하위 컴포넌트 위치를 지정할 때,

부모 컴포넌트에 position : static을 제외한 postion을 설정하여 부모의 기준을 지정해준다. (흔하게 relative 사용)

하위 컴포넌트에 position : absolute 값을 설정한다.

absoluter 특징으로 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.

부모 컴포넌트에 지정된 position 값이 없다면 화면의 viewport 기준으로 배치된다.

 

✏️ Flex

flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.

1차원 레이아웃 구조로 수평 정렬, 수직 정렬에 흔히 사용된다.

 

[flex container (부모 컴포넌트) 속성 값]

• flex-direction : 배치 방향 설정 (수평, 수직)
• flex-wrap : 줄 넘김 처리 설정
• justify-content : 메인축 방향 정렬
• align-items : 수직축 방향 정렬
• align-content : 여러 행 정렬

[flex items(자식 컴포넌트) 속성 값]

• flex-grow : 증가 너비 비율 설정 ex(1대2대1 과 같은 요소들만의 크기 비율)
• flex-shrink : 감소 너비 비율 설정
• flex-basis : 기본 너비 설정 기본값은 auto이다. auto가 아니고 직접 단위를 설정하면 width값은 무시가 된다.
• align-self : 부모에서 지정해준 정렬 방식(align-items) 을 무시하고 개별적으로 정렬이 가능
• order : item의 순서를 지정해주는 속성

flex에서 중요 옵션은 flex-wrap인 것 같다.

기본적으로 nowrap 값 때문에

item들이 상위 width 크기를 넘어서도 자동으로 크기가 줄어들면서 껴서 한 줄에 나타나게 됨

하지만 flex-wrap : wrap 값으로 설정하게 되면 상위요소의 크기를 넘어갈 시 자동으로 줄 바꿈 진행

<style>
  .container{
    width: 350px;
    height: 350px;
    border: 4px solid;
    display: flex;
  }
  .item{
    width: 100px;
    height: 100px;
    font-size: 40px;
    background-color: orange;
  }
</style>

<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
 </div>

위의 코드에서 보면 부모 컴포넌트는 350px, 자식 컴포넌트는 100px 이다.

근데 이미지를 보면 전부 한 줄로 정렬이 되어있다.

이는 위에서 언급한 flex-wrap : nowrap로 되어 있어서 그렇다.

상위 컴포넌트에 flex-wrap : wrap 한 줄만 추가해주면 된다.

 

 

제가 생각했을 때, 오 이건 짱이다 라고 생각한 Flex 사용법은 다음 이미지이다.

그 외에 Flex는 대부분의 레이아웃에서 사용되기 때문에 참고 사이트를 이용하여 상세히 학습하시길 추천한다.

부모 요소 기준으로 자식 요소는 가운데에 위치하게 된다.

레이아웃 정렬에서 흔히 사용하는 방식이다. 다음과 같이 부모 컴포넌트(오렌지 div를 감싸고 있는 곳)에 

다음의 속성값을 지정해주면 된다.

display: flex;
align-items: center;
justify-content: center;

 

✏️ Grid

grid 속성은 flex와 유사하지만 2차원 레이아웃 구조를 가진다.

그래프 처럼 행과 열로 표현이된다.

흔히 flex 대신 많이 사용된다.

 

[grid container (부모 컴포넌트) 속성 값]

• (명시적 행렬 선언)
  • grid-template-rows : 행의 개수만큼 크기 지정
  • grid-template-columns : 열의 개수만큼 크기 지정
• (묵시적 행렬 선언)
  • grid-auto-rows
  • grid-auto-columns
• giud-auto-flow : (row or column) (dense) : 빈 공간을 매워가면서 정렬시키는 옵션
• jusitify-content : item들을 행 축(x축) 기준으로 정렬
• align-content : item들을 열 축(y축) 기준으로 정렬
• grid-template-areas 속성 : 그리드 영역의 이름을 지정하고 위치를 잡는데 사용됨. 추상적인 레이아웃을 지정할 수 있슴
• grid-gap : 행축간의 간격, 열축간의 간격

 

[grid items(자식 컴포넌트) 속성 값]

• grid-row-start : 라인 번호 지정, span 옵션을 사용할 경우 확장된 크기로 사용가능
• grid-row-end
• grid-column-start
• grid-column-end
• justify-self : 부모container에 포함된 justify-items값을 무시하고 개별로 지정할 수 있다.
• align-self : 위와 동일
• order : item의 순서를 지정해주는 속성
• z-index : 쌓임 순서 지정

 

grid 또한 flex에서 언급한 컴포넌트 가운데 정렬이 가능하다.

<style>
.container{
  display: grid;
  grid-template-rows: repeat(3, 70px);
  grid-template-columns: repeat(3, 70px);
  align-content : center;
  justify-content : center;
}
<style>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

부모 컴포넌트에서 3x3 행렬을 지정해주고,

align-content : center;

justify-content : center; 

을 지정해주면 x축, y축으로 가운데 정렬 효과를 얻을 수 있다.

 

💡 느낀점

매번 레이아웃을 구성하거나 정렬이 필요할 때,

그때마다 검색을 통해 막 가져다 썼던 기억이 난다. 그래서 제대로 적용이 안 되는 문제가 종종 있었는데

이번 기회를 통해 여러 옵션 기능들에 대해 학습 할 수 있었다.

 

또한 위에 언급한 여러 정렬 중의 하나만 확실히 익혀 사용하려고 했었다.

하지만 필요한 순간마다 각각 다르게 사용되는 장점이 있는 것 같다.

 

📖 학습한 내용

• Float
• Position
• Flex Containers
• Flex Items
• Grid Containers
• Grid Items

CSS심화(2)

https://ghost4551.tistory.com/153

 

📃 참고 사이트

Flex 정리

https://studiomeal.com/archives/197

Grid 정리

https://studiomeal.com/archives/533