[css] 반응형 태그 표시 (태그가 잘리지 않게 표시)

반응형 웹을 만들면 이미지의 크기가 웹의 크기에 따라 달라지는 경우가 생긴다.

이때 이미지 크기에 따라 태그의 개수를 다르게 표시할 수 있는 방법이다. 

그러니까 이미지의 가로 크기만큼 태그가 잘리지 않는 선에서 최대한으로 보일 수 있는 방법이다. 

 

 

.....나도 설명하면서 뭔말인지 모르겠다.

그래서 미흡한 설명을 한눈에 확인할 수 있도록 codepen으로 준비해봤다.

아래의 코드펜 창을 통해 바로 확인할 수 있다.

 

 

추가로 설명하자면

box 아래에 태그를 감싸는 tags라는 클래스의 div가 존재하고, 이 안에는 태그 100개가 들어가 있다.

그 아래에는 박스의 넓이를 조절할 수 있는 range type의 input이 존재한다.

 

 

See the Pen How to hide tags by bbungbbun (@bbungbbun) on CodePen.

 

 

 

 

여기서 가장 중요한 부분은 이곳이다.

 

    .tags {
      display: flex;
      flex-wrap: wrap; // 가로길이를 넘어가는 태그들은 아래로 떨어짐
      height: 44px;
      overflow: hidden; // 아래로 떨어진 태그들은 숨겨짐
      border: 3px solid #fff;
      margin: 30px;
      padding: 4px 8px;
      width: 500px;
      box-sizing: border-box;
    }

 

 

여러줄의 태그를 보이고 싶을 때

-> 여러줄의 태그가 보일 수 있도록 height 값을 늘려주면 된다.