css 트릭1 (정사각형)

 일단 이걸 css 트릭이라고 부르긴 하지만, 뭐 거창할 거 없이 팁정도의 내용이다. 일반적으로 기본서에는 잘 나오지 않는 내용을 다룰 예정이다.

 정사각형 만들기

 정사각형 만들기가 뭐 그리어렵다고, 글을 작성하는가? 라고 말할 수 있다. 당연하게도 맞는 말이다.

<div style="width: 200px; height: 200px; background: green">
  200*200
</div>

 당연하게도 위처럼 하면 200*200의 정사각형이 된다.

 만들어야 할 정사각형의 크기를 안다면 위처럼 지정 해줄 수 있다. 하지만, 부모 너비에 비례하는 정사각형을 만들려고 해보자. 예를 들어 부모의 너비의 10%하는 정사각형 말이다.

<div style="width: 10%; height: 10%; background: green">
  200*200
</div>

간단하게 작성해보았다. 하지만, 우리가 원했던 정사각형의 모양은 아니다.

아쉽게도 위의 코드는 부모(컨테이닝 블록)의 너비 10%, 높이 길이 10%이기 때문에 너비에 해당하는 정사각형을 이루기에는 어렵다.

 비율지정

 우리는 길이를 넣을 수 있는 속성의 값에 백분률도 넣기도 한다. 그런데 그 백분률이 무엇에 대한 백분률인지는 문서를 확인해보지 않으면 알 수 없다. 그래도 추정 할 수 있는 것은 width은 부모의 width를 height는 부모의 height를 따라가겠지 정도이다.

 아래는 어떤 속성이 부모의 width, height따라 가는지에 대한 표이다.

 부모의 width : width, left, right, padding, margin 

 부모의 heigh : height, top, bottom

 자 위의 설명 대로면, padding이나 margin의 경우 padding-top, margin-top등 높이에 영향을 주는 속성임에도 불구하고 width의 값을 따라가는 것을 볼수있다.

부모의 너비를 따라가는 정사각형

 위에서 설명한 내용을 가지 진짜 부모의 너비를 따라가는 정사각형을 만들어 보자.

<div style="width: 10%; padding-top: 10%; background: green; height: 0">
  10%*10%
</div>

일단 height를 사용 하는 대신에 padding-top이 부모의 너비 비율을 따라가는 속성을 사용 하여 정사각형을 만들었다. 하지만 저 10%*10%가 녹색 정사각형 안에 들어가 있지 않는 것은 불편해 보인다.

 문자열을 정사각형에 넣기

 위의 정사각형에는 height가 없으므로 엘리먼트의 밖에 "10%*10%"라는 문자열이 오버플로우 해버렸다. 

<div style="width: 10%; padding-top: 10%; background: green;
           height: 0; position: relative;">
  <div style="position: absolute;
              top: 0; right: 0; bottom: 0; left: 0;">
    10%*10%
  </div>
</div>

 오버플로우 하지 않도록 정사각형의 자식으로 absolute position을 갖는 div를 생성하고, 녹색 정사각형의 위치의 영향을 받을 수 있도록 녹색 정사각형에는 relative 값으로 position을 설정하였다.

 position: absolute 속성의 경우 기본값으 html기준으로 top, right, bottom, left속성을 설정 해 주지만, 가까운 조상중 fixed, absolute, relative, sticky position을 갖는 엘리먼트가 있다면, 해당 엘리먼트 기준으로 값을설정하게 된다.