Tag: CSS

[CSS] 반응형으로 정사각형 만들기

결론: after요소에 padding-bottom을 100% 넣어주면 된다.
내부에 다양한 크기에 컨텐츠가 있다면, position: absolute인 width, height 100%인 div로 감싸준다.

<div class="note">
    <div class="inner">
        <div class="title">{noteData.title}</div>
    </div>
</div>

.note {
  border: 1px solid red;
  &amp;:after { /* after로 반응형 정사각형 만들기 */
    content: &quot;&quot;;
    display: block;
    padding-bottom: 100%;
  }
  .inner { /* 내부에 컨텐츠가 있을 때 추가 */
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Refer

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

[CSS] div에 의도하지 않은 여백이 들어가 있을 때

Problem

btn-container라는 div에 btn-group 3개 div를 넣었더니 그 3개 div 사이에 틈이 생겼다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-14-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-2-09-25

Solution

  1. whitespace를 주석처리
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
`
  1. 걍 다 붙여버리기.
    django에 {% spaceless %}태그 써도 됨.
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
  1. 잔망스런 엔터
<!-- 1 -->
<div>

text
<div>

text
<div>

text
<div>

text
<div>text</div>
<!-- 2 -->
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
  1. 부모 폰트사이즈 0, 자식에서 다시 키우기
#parent {
font-size: 0;
}

#child {
font-size: 16px;
}
  1. parent를 display: flex 설정하기
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}

Refer

http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038875#19038875
(아웃사이더님이 알려주심 감사합니다)