[css] 레이아웃 그리기

유지보수나, 운영팀에 있다 보면 코드를 보고 발 빠르게 대처해야 한다. 

그러기 위해선 자신이 주력으로 사용하는 프로그래밍 언어에 대해 이해가 있어야 리소스를 덜 낭비하고 쉽게 처리할 수 있다.

하나의 레이아웃으로 여러 코드를 이용하여 그려보면 css를 깊게 활용할 수 있고, 다양한 이슈 상황에 대처하는 연습이 된다고 생각한다.

 

 

point ) visual과 cont 사이엔 빈 공간

 

1. float:left;

웹사이트의 화면은 포토샵의 레이아웃처럼 겹겹이 올리는 방식으로 스타일을 사용하고 있어 float:left 같은 레이아웃을 강제적으로 바꿔주는 코드는 많이 사용하면 할수록 웹브라우저의 반응속도가 더디게 된다.

요즘은 float보다 폭넓게 활용할수 있는 코드가 많이 업데이트됐기 때문에 지양하고 있지만 아직 많이 사용하고 있어 활용해보았다.

 

See the Pen BapLLgP by JNoony (@jnoony) on CodePen.

.Tip)

float:left를 너무 많이 쓰다보면 부모객체를 잃어버릴때가 있다. 

이렇게 되면 margin이나 padding값이 이상하게 먹거나 안먹히고, 자식객체들이 조금씩 틀어져서 나가는 경우가 발생한다.

이럴경우 필요에 따라 높이값을 줘도 되지만, 권장하지 않는다.

요즘은 반응형으로 제작을 하게 되는데 디바이스가 바뀔때마다 높이값을 조정하는 사태가 벌어지는데 이는 유지보수 하는데 좋은 방법이 아니기 때문이다.

대부분  부모객체에 overflow:hidden을 사용하게 되면 원만히 해결된다.

 

 

2. display:flex;

See the Pen jOyMVRW by JNoony (@jnoony) on CodePen.

 

 

3. display:grid;