HTML 여러 행이 한 줄에 안 나오고 밑으로 빠져나올때 해결법

www.w3schools.com/css/tryit.asp?filename=trycss_template1_float

Tryit Editor v3.6

위 예제를 똑같이 따라해보는데 3개의 column들이 한 row안에 일정한 간격으로 나오지 못하고 한 column이 밑으로 빠져나오는걸 계속 해결하려다가 안됬는데 간단하게 아래 코드만 <style> 태그 안에 넣어주면 해결이 되는 문제였다. 

* {
          box-sizing: border-box;
        }

 

제가 설명을 드리자면, HTML CSS size는 텍스트(또는 contents) 사이즈를 기준으로 사이즈를 조절하는건 아시죠? 

모든 column의 width:33.33%이렇게 주면 3개의 column이 한 row에 들어갈 수 있을거라 생각하지만 저희가 빠뜨린게 있습니다.

바로 테두리 사이즈이죠.

이렇게 되면 테두리의 사이즈를 고려하지 못해서 한개의 column이 밑으로 빠지게 되는것이죠!

이걸 해결하기 위해 모든 태그에 (* 사용) 테두리 사이즈, 즉 border-box까지 포함한 사이즈를 기준으로 box-sizing을 한다는 뜻으로, 

아래와 같은 코드를 추가합니당.

* {
          box-sizing: border-box;
        }

 

이에 대한 설명은 생활코딩에서 잘 설명하고 있습니당!!

opentutorials.org/course/2418/13405

box-sizing - 생활코딩