일단 이걸 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%"라는 문자열이 오버플로우 해버렸다.
오버플로우 하지 않도록 정사각형의 자식으로 absolute position을 갖는 div를 생성하고, 녹색 정사각형의 위치의 영향을 받을 수 있도록 녹색 정사각형에는 relative 값으로 position을 설정하였다.
<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>
댓글
댓글 쓰기