display: inline-block; display: block; display: inline; 이것들에 대해 알아보기 전에 먼저 간단한 예제를 보자. 안녕하세요 저는 친절한 소나무입니다 출력 결과 안녕하세요 저는 친절한 소나무입니다 태그 뒤에 줄바꿈이 일어나고 태그 뒤에는 줄바꿈이 일어나지 않는 것이 보일 것입니다. 왜 이런 현상이 발생할까요? 두 태그에 border값을 주면 확인할 수 있습니다. display: block; 태그는 block 요소입니다. block요소는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. block이니까 기다란 블럭이라고 생각하면 외우기 쉽겠죠? p 태그, h 태그#, li 태그 를 한번 떠올려 보세요! 보통 ..