Portfolio

선정 이유

예전에 일을 할 때는 css를 잘 모르니 float, display: inline-block 등을 이용해 수직, 수평 정렬을 지저분(?)하게 구현함.

4주차 과제를 수행하면서 display: flex를 처음으로 사용함.

간단하게 수직, 수평 레이아웃을 만들 수 있어서 편리했음.

과거에 나는..

예전에 일을 할 때 회사의 CMS UI를 수정해야하는 일이 종종 있었다. block 요소를 수평 정렬할때 아래와 비슷하게 코드를 작성했었다.


<html>

<head>
  <title>test</title>
  <style>
    .clearfix {
      clear: both;
    }

    .box {
      float: left;
      color: white;
      width: 50px;
      height: 50px;
      border: solid 1px solid;
      margin: 5px;
    }

    .bg-red {
      background-color: red;
    }

    .bg-green {
      background-color: green;
    }

    .bg-blue {
      background-color: blue;
    }
  </style>
</head>

<body>
  <main>
    <div class="box bg-red">1</div>
    <div class="box bg-green">2</div>
    <div class="box bg-blue">3</div>
    <div class="clearfix"></div>
    <div class="box bg-red">4</div>
    <div class="box bg-green">5</div>
    <div class="box bg-blue">6</div>
    <div class="clearfix"></div>
  </main>
</body>

</html>

위 코드의 문제점

다음에 올 요소가 float 영향을 받지 않기 위해 clearfix 라는 className을 갖는 요소가 필요하다.

마크업 구조가 한 눈에 들어오지 않는다.

사이드바 구현

문서들을 위와 같이 렌더링 하고 싶었다. 조건은 두가지 정도였다.

화면에 보이는 것 처럼 4개 요소가 수평 정렬되어야 함.

타이틀 부분은 남는 영역의 전체를 차지해야함.

table 태그를 사용해볼까..?

list 관련 태그가 조금더 시맨틱한 태그라고 생각됨.

하위 문서마다 margin-left 값이 늘어나야하는데 table 태그는 적절하지 않아보임.

display: flex

찾아보니 쉽게 정렬할 수 있는 display:flex 속성이 있다는 걸 알게됨.


.item {
	display: flex;
  /* 교차축 중앙 위치 */
  align-items: center;
  /* 요소를 양 끝에 두어 제일 긴 간격을 둠 */
  justify-content: space-between;
}

.item .title {
  width: 100%;
}

.item .button-group {
	margin-left: auto;
  width: 35px;
  /* width 100% 인 .title 때문에 요소가 줄어들지 않도록 */
  flext-shrink: 0;
}


<div class="item">
  <div class="title">
    <span class="icon"></span>title
  </div>
    <div class="button-group">
      <span class="icon"></span>
      <span class="icon"></span>
   </div>
</div>