2024.08.06 (Day 8) - HTML/CSS [Flexbox] — Seop

Flexbox 입문
Flexbox 가용 공간의 다양한 활용
Flexbox의 주요 속성 알아보기
flex-grow, flex-shrink, flex-basis
Flex Item의 크기가 결정되는 원리 이해하기
Flexbox로 만드는 사이드바 레이아웃 만들기

실무코드 = 이상적인 코드 = 나의 맥락 안에서 최대한 가지고있는 자원을 이용한 최적의 이상적인 코드

실무 코드 vs 이상적인 코드
실무 코드: 현재 상황 내에서 이용 가능한 자원을 최대한 활용하여 개발된 코드.
- 맥락: 특정 상황과 제약 조건을 고려했을 때 가장 효과적인 해결책.
- 효율성: 맥락을 제거하면 비효율적인 코드로 보임.
- 초점: 이상적인 코드보다는 문제 해결에 중점을 둠.

이상적인 코드: 일반적으로 권장되는 표준안.
- 효율성: 효율적이고 유지 보수하기 쉽게 설계됨.
- 초점: 제약 조건이 있는 실제 상황에서는 항상 최선의 해결책이 아닐 수 있음을 인지해야 함.

정리
* 아이디어에 집중: 베스트 프랙티스에 얽매이기보다는 창의적으로 문제를 해결하는 것에 집중.
어떤 아이디어로 문제 해결을 하였는가!
* 맥락의 중요성: 가장 효과적인 해결책은 상황에 따라 달라질 수 있음을 이해.
* 자원 활용: 원하는 결과를 달성하기 위해 이용 가능한 자원(같은 결과를 만들어내는 다양한 기법)을 최대한 활용.

실무 코드는 특정 제약 조건에서 발생할 수 있는 유연성과 창의성이 필요함을 인식함으로써 문제 해결에 있어 보다 전문성있는 접근을 할 수 있게 됩니다.

F r o g

블록레벨의 요소의 특징을 다시 보자면

저 빈 공간은 가용공간(사용 가능 공간)이다. 즉 블록레벨 요소는 한줄을 차지한다.

개구리들이있는 playground 클래스에 display를 flax를 주어보면

      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 0 auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;
        display: flex;
      }

부모에 dispaly:flex를 주었다 해서 flex container 라고 부르고 자식은 flex items 라고 보면 된다

하나의 개구리가 가용공간이 있는 오른쪽 끝으로 이동하고싶을땐

    <div class="playground">
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog last"><img src="images/frog.png"></div>
    </div>

   .frog.last{
        background-color: orangered;
        margin-left: auto;
        
      }

개구리를 왼쪽 중앙 오른쪽 배치하고싶을때는

    <div class="playground">
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
    </div>

      .frog:nth-child(2){
        margin: auto;
      }

세마리 전부 중앙에 정렬 하고싶을때

      .frog:nth-child(1){
        margin-left: auto;
      }

      .frog:nth-child(3){
        margin-right: auto;
      }

위 모든 작업은 display:flex로 적용된 상태에서 가용공간을 활용 하였다.

하지만, 7마리로 늘렸을때 마지막 끝에있는 개구리는 가용공간을 넘어간다

부모(playground) 관점에서 바꿀수 있다. 오른쪽 끝 개구리를 부모의 가용공간 내로 들어가게하려면

    <div class="playground">
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
      <div class="frog"><img src="images/frog.png"></div>
    </div>

    .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 0 auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;
        display: flex;
        
        
        justify-content: flex-end; /*추가*/
      }

가로기준 정렬 관점으로 보고 justify-content: flex-end, center , flex-first 등 적용 할수 있다.

부모(playground)에게 높이 500px을 주었을때 블록레벨 요소는 가로 기준으로 잡혀있고

부모의 자식(frog)간에 관계로 레이아웃을 하는 것이기 때문에 늘어날 수밖에없다.

부모의 높이를 지우고 마찬가지로 자식(frog)에게도 높이를 주면

똑같이 늘어난다.

align-items을 사용하면 되는데 교차 축(cross-axis)의 정렬 방법을 설정한다.

align-items: stretch은 부모(playground)의 교차 축을 채우기 위해 늘림

flex-start로 값을 적용해주면 왼쪽기준으로 자식요소를 시작점으로 정렬

flex-end(end)은 자식요소를 끝점으로 정렬

center는 자식요소를 중앙으로 정렬

      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 0 auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;
        display: flex;

        height: 500px; 
        justify-content: center;
        align-items: flex-start; /*추가*/
      }

그렇다면 부모의 가용공간 내로 , 자식이 밖으로 나가지 않게하려면

flex-wrap:wrap; 사용한다. 부모가 자식을 감싼다 라고 보면된다.

      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 0 auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;
        display: flex;

        height: 500px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap; /*추가*/
      }

See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

frog 작업 내용에서 처음 상태로 돌아가면

      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 200px auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;

        display: flex;
      }

display:flex하면 사이즈가 작아지는데 컨텐츠의 크기만큼 작아지는 특징을 볼 수있다.

flex-basis는 flex item의 내부 콘텐츠 너비 만큼 계산하며 부모너비와 상관없다.

flex-basis:auto는 아이템의 내부 컨텐츠만큼 자동 계산한다

      .frog {
        border: 6px solid green;
        border-radius: 10px;
        background-color: mediumseagreen;
        color: lime;
        font-size: 40px;

        flex-basis: auto ; /*내부 콘텐츠 너비 만큼 계산*/
      }

가용공간을 각각의 텍스트에 사이즈만큼 잡는 개념을 보자면

      .frog {
        border: 6px solid green;
        border-radius: 10px;
        background-color: mediumseagreen;
        color: lime;
        font-size: 40px;

        flex-basis: auto ; /*내부 콘텐츠 너비 만큼 계산*/
        flex-grow: 1;
      }

유연한 레이아웃을 가능하게 하는 가장 중요한 속성중 하나가 "flex-grow" 이다.

"flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어난다.

flex-grow는 초기값이 0이고 1로 지정하면 너비 값을 설정한게 아님에도 불구하고 가득 채워졌다.

만약 컨텐츠 양의 크기 만큼 상관 없이 너비를 일정하게 하려면

내부 콘텐츠 너비만큼 계산하는 basis의 값을 auto가 아닌 0으로 지정하면 된다.

    <div class="playground">
      <div class="frog">FrogFrogFrog</div>
      <div class="frog">Frog</div>
      <div class="frog">Frog</div>
    </div>

      .frog {
        border: 6px solid green;
        border-radius: 10px;
        background-color: mediumseagreen;
        color: lime;
        font-size: 40px;

        flex-basis: 0 ; 
        flex-grow: 1;
      }

또한 flex-grow 처럼 flex-shrink도 flex-basis 속성으로 정한 플렉스박스 아이템의 기본 너비를

자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 한다.

초기값은 flex-shrink: 1 이다

예를들에 기본값 1일때 basis 200px라고 가정하면 1:1비율로 나뉘어지는것

      body {
        background-color: brown;
      }
      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 200px auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;

        display: flex;
      }
      .frog {
        border: 6px solid green;
        border-radius: 10px;
        background-color: mediumseagreen;
        color: lime;
        font-size: 40px;

        flex-basis: 200px;
        flex-shrink: 1;
      }

이미지 frog를 더 추가하게되면 줄어드는게 맞는데 줄어들지않고 이미지가 빠져나온다.

    <div class="playground">
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
    </div>

왜냐하면 더이상 내부의 이미지보다 더 작아질수 없기때문에 결국 튀어나오는 것이다.

한마디로 basis 기준으로 shrink로 요소를 수축시키냐 grow로 늘리느냐를 지정하는것

    <div class="playground">
      <div class="frog hater"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog son"><img src="./images/frog-disco.png" alt=""></div>
      <div class="frog son"><img src="./images/frog-disco.png" alt=""></div>
    </div>

      body {
        background-color: brown;
      }
      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 200px auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;

        display: flex;
      }
      .frog {
        border: 6px solid green;
        border-radius: 10px;
        background-color: mediumseagreen;
        color: lime;
        font-size: 40px;

        flex-basis: 200px;
        flex-shrink: 1;
      }

shrink 값을 1로지정하면 수축 비율이 1,1,1,1,1로 되어있다.

만약 flex-wrap:wrap을 쓴다면 shrink는 더이상 쓸모가 없다.

      .playground {
        border: 10px solid maroon;
        width: 980px;
        margin: 200px auto;
        border-radius: 20px;
        background-color: skyblue;
        padding: 20px;

        display: flex;
        flex-wrap: wrap;
      }

이러한 상태로 이제 요소들을 내부적으로 자유자재로 구성할 수 있다.

RESULT

See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

상관관계를 정리하자면

Flex Container

- justify-content main axis 기준에서 정렬

- align-items Cross axis 기준에서의 정렬

- flex-wrap 가용 공간이 없을때

- gap 사이간격 - row-gap, colum-gap

- flex-direction:row (아직안배움)

Flex Items

- flex-grow

- flex-shrink

- flex-basis

- min-width

Veamflex

레이아웃을 먼저 구성한다 +시각적,마진초기화,폰트

    <header class="header">header</header>
    <main class="contents">contents</main>
    <footer class="footer">footer</footer>

/* CSS reset */
body{
    margin: unset;
}
/*컴포넌트*/
.header {
    box-shadow: inset 0 0 20px red;
}

/* Typography */
:root {
  font-family: arial;
}

.contents{
    box-shadow: inset 0 0 20px blue;
}

.footer {
    box-shadow: inset 0 0 20px purple;
}

layout_wrapper 공통분모 적용 +시각적확인

<!DOCTYPE html>
<html>
  <head>
    <title>VEAMFLEX</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="header">
      <div class="l_wrapper">
        
      </div>
    </header>
    <main class="contents">
      <div class="l_wrapper">
        
      </div>
    </main>
    <footer class="footer">
      <div class="l_wrapper">
        
      </div>
    </footer>
  </body>
</html>

/*레이아웃*/
.l_wrapper{
    box-shadow: inset 0 0 20px black;   
}

width:auto에 의해 최대한으로 가득차려고 시도하지만

max-with를 사용하여 너비의 최대 크기1200px로 제한한다.

.l_wrapper{
    box-shadow: inset 0 0 20px black;
    width: auto;
    margin: 0 auto;
    max-width: 1200px;
}

로고 이미지와와 p 내용 추가

<header class="header">
      <div class="l_wrapper">
        <img class="logo" src="./images/logo.png" alt="">
        <p clss="desciption">Unlimited movies, TV shows, and more.</p>
        <img calss="anger" src="./images/anger.png" alt="">
      </div>
    </header>

    <main class="contents">
      <div class="l_wrapper">
        Contents
      </div>
    </main>

    <footer class="footer">
      <div class="l_wrapper">
        Footer
      </div>
    </footer>

시각화 하기위해 box-shadow

/* Components */
body {
  color: #999;
  background-color: #111;
}

.header{
  background-color: #666;
}

.logo {
  box-shadow: inset 0 0 4px red;
}

.desciption{
  box-shadow: inset 0 0 4px red;
}

.anger{
  box-shadow: inset 0 0 4px red;
}

.contents {
  background-color: #000;
}

이미지 및 p요소 초기화

/* Reset */
body p {
  margin: unset;
  padding: unset;
}

img{
  vertical-align: top;
}

l.wrapper로 flax 주지말고 감쌀만한 div를 하나 더만들어주고 적용해준다.

    <header class="header">
      <div class="l_wrapper">
        <div class="header-inside">
          <img class="logo" src="images/logo.png">
          <p class="description">Unlimited movies, TV shows, and more.</p>
          <img class="anger" src="images/anger.png">
        </div>
      </div>
    </header>

.header-inside{
  box-shadow: inset 0 0 4px blue;
  display: flex;
  align-items: center;
}

이제 각 컨텐츠 크기 조절한다.

.header-inside{
  box-shadow: inset 0 0 4px blue;
  display: flex;
  align-items: center;
  height: 180px;
}

.logo {
  box-shadow: inset 0 0 4px red;
  width: 200px;
  
}

.desciption{
  box-shadow: inset 0 0 4px red;
}

.anger{
  box-shadow: inset 0 0 4px red;
  width: 140px;
  margin-left: auto;
  margin-top: auto;
}

로고와 p요소 사이에 가로줄을 생성하는데 hr 태그를사용한다.

Horizontal Rule의 약자로, HTML에서 가로줄을 생성해주고, 문단을 구분하는데 사용한다.

하지만 p요소의 desciption클래스 가상요소를 생성하여 만들 수 있다.

.description::before{
  content: '';
  background-color: currentColor;
  height: 1px;
  width: 60px;
  margin: 0 30px 0 20px;
}

또한, description의 display속성을 flex 적용한 후 flex의 정렬 값인 align-items: center 을 지정한다.

.description{
  box-shadow: inset 0 0 4px red;
  display: flex;
  align-items: center;
  /*gap:20px*/  /*가상요소의 좌우마진을 적용하는방법과 gap 추가하는 방법이있다.*/ 
}

가상요소 before를 after로 바꿔서 차이점을 확인해보는 것도 좋다

■ 여기까지 정리

1. flex item들을 정렬하기 위해 새로운 부모 요소 추가 하였는가?
=> .l_wrapper는 공공재임으로 건드리지 않는다. .header .l_wrapper도 안됨. 단순하게 유지

2. 적절한 마크업을 추가하고 어떻게 공간을 차지 하고 있는지 시각적으로 확인 + 사용자 에이전트 스타일시트 초기화를 진행 하였는가?

3. 부모 요소에게 display: flex 적용 후 나타나는, align-items: stretch에 의해 처리된 결과가 인지/파악 가능한가?
flex container에게 고정 높이 부여 후, 하위 요소 flex items에게 적절한 margin auto로 정렬 마무리 할수 있는가?

4.가상요소를 사용하여 구분선 생성해보고 flex 적용 후 나타나는 결과를 확인했는가?

■ 내부 레이아웃 구성

레이아웃을 보면 위에서 배운 flex-container로 구성 된다고 볼수있다.

가변은 화면 사이즈가 변동 될때마다 자유자재로 변형 되는 반면 고정은 말 그대로 고정이다.

이 부분을 고려하여 클래스를 만들어준다.

.container{
  box-shadow: inset 0 0 4px gold;
}
.container-main{
  box-shadow: inset 0 0 4px dodgerblue;
}
.container-sidebar{
  box-shadow: inset 0 0 4px orangered;
}

   <main class="contents">
      <div class="l_wrapper">
        <div class="container">
          <div class="container-main">main</div>
          <div class="container-sideber">sidebar</div>
        </div>
      </div>
    </main>

컨테이너 클래스를 만들어서 내부 레이아웃 2개를 생성해준다.

컨테이너 클래스에 flex를 지정하고 내부 컨텐츠가 없으면 적용하기 힘들기때문에 최소높이를 지정해준다.

.container{
  box-shadow: inset 0 0 4px gold;
  display: flex;
  min-height: 848px;
}

gap을 사용하여 내부 레이아웃 사이간격을 늘려주고

사이드바를 메인의 영역으로 채워야하므로 basis 기준으로 grow와 shrink를 사용하기에 main 값에 grow 1을 해주기 전에 고정 레이아웃인 사이드바에 basis 크기 값을 지정해준다.??? 확실하게

.container{
  box-shadow: inset 0 0 4px gold;
  display: flex;
  min-height: 848px;
  gap: 24px;
}
.container-main{
  box-shadow: inset 0 0 4px dodgerblue;
  flex-grow: 1;
}
.container-sidebar{
  box-shadow: inset 0 0 4px orangered;
  flex-basis: 168px;
}

'BootCamp Review' 카테고리의 다른 글

2024.08.08 (Day 9) - HTML/CSS [Flexbox II] (0)	2024.08.18
2024.08.07 - Figma(특강) (0)	2024.08.18
2024.08.05 (Day 7) - HTML/CSS (0)	2024.08.18
2024.08.01~02 (Day 6) - HTML/CSS [bucketlist,citrus,pokemon,timeline] (0)	2024.08.17
2024.07.31~ (Day5) - HTML/CSS (0)	2024.08.09

F r o g

'BootCamp Review' 카테고리의 다른 글

티스토리툴바