[EST] 240618 CSS-05

Z-index

- position이 static외의 값을 가진 박스에 대해서 z축의 위치를 지정

- 값이 클수록 제일 위로 배치

- 부모가 z-index를 높여 자식 앞으로 나올 수 X

- 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있음

- 유지보수를 위해 100단위로 작업 권장

---

float

- float : 떠가다, 뜨다

- 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌측/우측에 배치되게 함

  ◽ left : 왼쪽으로

  ◽ right : 오른쪽으로

  ◽ none : 기본값

- float 해제

  ◽ clear

 

주의사항

자식 요소들이 모두 float속성을 가지게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의

해결방법

- 부모에게 높이 값 지정

- overflow:hidden

.container{
	overflow:hidden;
}

 

- clear-flx 방법

  ◽ 부모의 가상 요소 ::after를 사용하는 방법

.container::after{
  content:'';
  display:block;
  clear:left;
}

---

flex

flex-container

- display: flex

- flex가 적용된 부모요소를 flex-container / 자식 요소를 flex-item이라고 부름

- 1차원적 레이아웃을 위해 주로 사용됨

 

flex-direction

- 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정

- row : 기본값 / 왼쪽 → 오른쪽 (주축 : 행방향)

- column : 위 → 아래 (주축 : 열방향)

- row-reverse : 오른쪽 → 왼쪽

- column-reverse : 아래 → 위

 

justify-content

- 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정 가능

  ◽ flex-start : 아이템들을 시작점으로 정렬

  ◽ flex-end : 아이템들을 마지막점으로 정렬

  ◽ center : 아이템들을 가운데로 정렬

  ◽ space-between : 아이템들의 사이(betweent)에 균일한 간격 생성

  ◽ space-around : 아이템들의 둘레(around)에 균일한 간격 생성

  ◽ space-evenly : 아이템들의 사이와 양 끝에 일정한 간격 생성

 

flex속성을 이용한 실습

<style>
      p {
        margin: 0;
      }

      .wrap {
        background: #ddd;
        width: 350px;
        height: 300px;
      }

      .box {
        width: 50px;
        height: 50px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
      }

      .blue {
        background: royalblue;
      }

      .pink {
        background: salmon;
      }

      .yellow {
        background: gold;
      }

      .wrap,
      .wrap > div {
        display: flex;
        justify-content: space-between;
      }

      .left-side {
        flex-direction: column;
      }

      .center {
        flex-direction: column;
      }

      .right-side {
        flex-direction: column-reverse;
      }
    </style>

 <div class="wrap">
      <div class="left-side">
        <p class="box blue new">A</p>
        <p class="box pink">B</p>
        <p class="box yellow">C</p>
      </div>
      <div class="center">
        <p class="box blue">D</p>
        <p class="box yellow">E</p>
      </div>
      <div class="right-side">
        <p class="box blue">F</p>
        <p class="box pink">G</p>
        <p class="box yellow">H</p>
      </div>
    </div>

 

align-items / align-content

- align-items : 교차 축을 기준으로 정렬

- align-content : 컨테이너의 교차 축의 아이템이 여러 줄일 때 사용 가능

  ◽ flex-wrap: wrap인 상태에서 사용해야 함

 

align을 이용한 실습

.wrap {
            background: #ddd;
            width: 200px;
            height: 200px;
          }

          .box {
            width: 50px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            background: royalblue;
          }
          .wrap {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
          }

 <div class="wrap">
          <div class="box">A</div>
        </div>

 

gap

- 아이템 사이의 간격을 설정할 때 사용할 수 있는 속성

gap: 10px;

 

flex-wrap

- 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정

flex-wrap : nowrap;

 

flex-wrap: wrap;

 

flex-wrap: wrap-reverse;

 

flex-flow

- flex-direction flex-wrap 단축속성

flex-flow: row wrap;

 

flex-flow: row-reverse nowrap;

 

flex-flow: column wrap-reverse;

 

flex-flow: column wrap;

 

---

flex-item에 사용하는 속성

flex-basis

- flex-item의 초기 크기를 설정

- width, height와 다른 점

  ◽ 축의 방향에 따라 달라짐

  ◽ 내부 콘텐츠에 따라 유연한 크기를 가짐

- auto 기본값

- flex-basis값이 적용되어 있다면 row일 경우 width값이 무시, column일 경우 height값이 무시

 

flex-grow

- 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정보를 지정

- 형제 요소인 아이템들이 모두 같은 flex-grow값을 가질 경우

  ◽ 내부에서 동일한 공간을 할당받음

- 값 = 0일 경우, 늘어나지 않음

- flex-grow: 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받음

- flex-grow: 2 → 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 여백 공간을 할당받음

 

---

[실습] 카드 UI 만들기

@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "Pretendard-Regular";
}
.card-ui {
  width: 288px;
  border-radius: 8px;
  box-shadow: 2px 2px 8px 8px #0000001a;
}
.card-ui img {
  aspect-ratio: 288/196;
  width: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}
.text-group {
  padding: 24px 16px 16px;
}

.card-ui h2 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-ui .content {
  color: #5a6a72;
  font-size: 12px;
  line-height: 19.2px;
  margin: 16px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-ui .read {
  color: #29363d;
  font-size: 14px;
  line-height: 16.8px;
  text-decoration-color: #29363d;
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="card-ui.css" />
    <title>카드 UI</title>
  </head>
  <body>
    <article class="card-ui">
      <a href="#">
        <img src="./living.jfif" alt="ui사진" />
        <div class="text-group">
            <h2>그것을 피가 청춘을 것이다</h2>
            <p class="content">
            청춘의 하였으며, 이것은 몸이 때문이다. 사는가 고동을 용기가 충분히
            청춘 것이다. 얼마나 반짝이는 소담스...운 열락의 아름다우냐? 가지에
            같지 청춘의 옷을 목숨을 피어나기 오직 군영과 칼이다. 거친 끓는 예가
            뿐이다. 방지하는 꽃이 청춘을 생명을 이것이다. 인간의 거선의 피고,
            모래뿐일 작고 우리 평화스러운 있는가?
            </p>
            <p class="read">Read</p>
        </div>
    </article>
  </body>
</html>