CSS 레이아웃(2)

📌학습 내용

📖 z-index

• z 축의 높이에 영향을 미침
• z 축이 존재하는 relative, absolute, fixed position에서만 사용 가능
• 레이어가 겹칠 때 속성값이 높은 쪽이 앞으로 나타나게 됨

      .z-one {
          width: 200px;
          height: 200px;
          background-color: yellow;
      }

      .z-two {
          width: 200px;
          height: 200px;
          background-color: blue;
      }

      .z-one {
          position: absolute;
      }

      .z-two {
          position: absolute;
      }

🔎 첫 번째 형제 요소가 3차원, 두 번째 형제 요소도 3차원이라 레이어 겹침 발생하여 파란색만 보임

      .z-one {
          z-index: 10;
      }

🔎 첫 번째 형제 요소에게 z-index 값을 주어 앞으로 나타남

• 순수 3차원에서의 적용
—첫 형제에게만 absolute를 적용하면 레이어 겹침
—그 다음 형제에게만 absolute를 적용하면 레이어 안 겹침

• 큰 섹션을 만들 때는 레이어 겹침 현상을 피하기 위해서 2차원을 주로 사용함

📖 float와 clear

💡 float
• 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용
• 원래는 웹페이지에서 어떻게 이미지를 텍스트와 함께 배치할 것인가에 대한 속성

참고) float 속성
https://poiemaweb.com/css3-float

💡 clear
• float를 사용하면 따라오는 기능
• float를 해제함: float를 마지막으로 사용한 태그 다음 태그에 clear를 적용

      header {
          width: 100%;
          height: 100px;
          background-color: yellow;
      }

      .left{
          width: 100px;
          height: 200px;
          background-color: pink;
      }

      .center{
          width: 300px;
          height: 200px;
          background-color: blue;
      }

      .right {
          width: 100px;
          height: 200px;
          background-color: green;
      }

      footer {
          width: 100%;
          height: 100px;
          background-color: black;
      }

🔎 공간을 생성하는 태그는 기본적으로 모두 block요소이므로 y축으로 정렬됨

      .left{
          float: left;
      }
      .center{
          float: left;
      }
      .right {
          float: right;
      }

      footer {
          clear: both
      }

💡 적용 주의점(1)
브라우저 폭이 너무 좁아지면 레이어가 틀어지게 되므로,

• float 사용 영역의 부모의 크기가 float 영역 사이즈와 같거나 큰 값으로 고정된 영역에 사용해야 함
• 또는 드물게 float를 가변값으로 설정

📎HTML

      <header></header>

      <section></section>
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>

      </section>
      <footer></footer>

📎CSS 적용

      section {
          width: 1400px;
          height: 200px;
          background-color: orange;
      }

🔎 크기가 고정값으로 정해진 section 영역 안에서 float 되게 해줌

💡 적용 주의(2)
float 속성이 적용된 영역은 3차원이기 때문에 부모의 높이값에 영향을 주지 않음

💡 적용 주의(3)
static 또는 relative와 사용하며 순수 3차원인 absolute와 fixed 포지션엔 사용할 수 없음

💡 float 실무 팁 (1)
float: ;과 clear: both;를 사용했음을 html 코드에서 쉽게 알아볼 수 있도록 관례적으로 .clearfix 클래스를 사용해줌

📎HTML

        <div class="left-2"></div>
        <div class="right-2"></div>

        <div class="clearfix"></div>
        <!-- html만 보고도 left-2와 right-2에 float가 적용되었음을 알 수 있음 -->

        <footer></footer>

📎CSS

      .left-2 {
          float: left;

          width: 100px;
          height: 150px;
          background-color: yellow;
      }
      .right-2 {
          float: right;

          width: 100px;
          height: 150px;
          background-color: blue;
      }
      footer {
          width: 100%;
          height: 100px;
          background-color: black;
      }
      .clearfix {
          clear: both;
      }

💡 float 실무 팁 (2) overflow
공간을 벗어나는 텍스트의 처리 방법

• 공간을 벗어나는 텍스트를 가릴 때

      .over-box {
          overflow: hidden;

• 공간을 벗어나는 텍스트에 스크롤을 생성할 때

      .over-box {
          overflow-y: scroll;

💡 overflow와 float
float 속성을 띤 자식 요소는 부모 요소의 높이값에 영향을 주지 않지만 부모 영역에 overflow: hidden;을 적용하면 자식의 높이값을 인식할 수 있음

설명
https://simssons.tistory.com/26

📖 flex

• flex 속성이 적용된 부모의 자식 요소들은 공간 내에 왼쪽부터 수평으로 정렬됨
• float보다 제약사항이 적어 보다 수월하게 배치 작업이 가능함

작성 팁
클래스를 두 개 지정하여 하나는 공통적인 속성을 부여, 하나는 개별적인 속성 부여

📎HTML

        <div class="container">
            <div class="item one"></div>
            <div class="item two"></div>
            <div class="item three"></div>
        </div>

📎CSS

      .item {
          width: 200px;
          height: 300px;
      }
      .one {
          background-color: yellow;
      }
      .two {
          background-color: blue; 
      }
      .three {
          background-color: orange;
      }

💡flex-direction:
flex의 정렬 순서를 바꿀 수 있음

row(x축), column(y축), row-reverse(오른쪽부터), column-reverse(y축 역순)

🔎 제일 기본값인 row의 배치

🔎 column-reverse 적용

💡flex-wrap:
부모의 영역 크기 보다 정렬된 자식 요소들의 크기가 더 클 때
• flex-wrap: wrap; 영역에 맞춰 자식 요소들의 정렬이 흩어짐
• flex-wrap: nowrap; 영역에 맞춰 자식 요소들의 크기를 리사이징함

💡flex-flow:
flex-direction과 flex-wrap을 동시에 입력할 때 사용함

	{flex-flow: row wrap;}

💡flex 정렬
• justify-content: 수평 정렬 모양 변경
flex-start, flex-end, center, space-between, space-around 등

• align-items: 수직 정렬 모양 변경
flex-start, flex-end, center, baseline 등

다양한 flex 속성값의 경우의 수를 시각화
https://flexbox.help/

📖 중앙 정렬

실무에서 가장 많이 쓰이는 정렬 구조

• margin 상하값 좌우값

      .center-1 {
          width: 300px;
          height: 300px;
          background-color: yellow;

          margin: 0 auto; 
      }

• relative left: 자신의 왼쪽 면을 기준으로 50%를 이동하므로 width의 절반만큼 당겨줌
—공간의 크기가 변하면 margin-left를 일일이 수정해줘야 하는 게 단점

      .center-2 {
          position: relative;
          left: 50%; 
          margin-left: -150px;

          width: 300px;
          height: 300px;
          background-color: blue;
      }

참고) Centering in CSS
https://css-tricks.com/centering-css-complete-guide/

📌어려운 점

솔직히 레이아웃 개념 다 어렵다 😂

📌해결 방법

부모 영역에 overflow: hidden; 적용할 때 float 속성을 잡아주는 이유가 잘 감이 안 와서 개인적으로 설명이 가장 잘 이해된 블로그를 첨부해뒀다.

📌느낀 점

개발일지를 꼼꼼히 써둬야 나중에 보고 복습이 가능할 것 같은데 그러다 보니 작성에 좀 부담을 느낀다. 장기적으로 꾸준히 쓰는 습관을 기르려면 너무 자세히 담아두려고 힘 쓰지 않아야 할 것 같긴 하다.