block과 inline - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • block과 inline
    learn
    Practice
    learn
    13 위치 정렬
    block과 inline

    여러분은 이제까지 폰트, 텍스트 정렬 등 컨텐츠를 꾸미는 CSS에 대해 공부했습니다. CSS는 이렇게 컨텐츠의 내용을 꾸밀 뿐만 아니라 컨텐츠의 위치를 적절히 배치하는 역할 또한 수행합니다. 앞으로 남은 시간동안 컨텐츠들을 배치하는 CSS 프로퍼티에 대해 알아보고자 합니다.

    가장 처음 살펴볼 프로퍼티는 display입니다. display는 요소가 보여지는 방식을 지정하는 프로퍼티입니다. display에 대해 알아보기 전에 아래의 예시를 먼저 살펴봅시다.

    예시에서 h1, div, p, article, li 부분의 배경색을 pink로, span, a, strong 부분은 skyblue로 지정했습니다. 코드를 실행해보면 배경색만 지정했음에도 출력되는 형태가 다음과 같이 각각 다른 것을 확인할 수 있습니다.


    이는 각각의 HTML 태그가 다른 display 프로퍼티 값을 기본 스타일로 가지고 있기 때문입니다. HTML 요소들은 display 속성의 기본 값으로 block 혹은 inline을 가지고 있습니다. 이 두 프로퍼티 값에 대해 자세히 알아봅시다.


    display:block과 display:inline


    display:block을 가지고 있는 요소는 항상 새로운 줄에서 시작하며, 따로 너비를 지정하지 않아도 width:100%을 기본 값으로 갖습니다. divh1~h6pheaderfootersection 등이 이에 해당합니다. 

    display:inline을 가지고 있는 inline 요소는 block과 달리 새로운 줄에서 시작하지 않으며 필요한 만큼의 너비만 가집니다. 즉, 요소의 컨텐츠 크기 만큼만 너비를 가진다는 말과 동일합니다. spanaimg 등이 이에 해당하죠.

    아직 이 둘 사이 정확히 어떤 차이가 있는지 혼란스러운 것이 사실입니다. 다시 아까의 예제를 아래와 같이 순서만 바꿔 작성해 봅시다.

    처음에 실행했던 결과와 조금 달라진 점을 발견하셨나요? block에 해당하는 요소의 경우 그대로 유지됐지만, inline에 해당하는 요소는 한 줄에 차례대로 출력되었습니다. 


    block이란 단어는 '덩어리' 또는 '막다'라는 뜻을 가지고 있습니다. display:block에서도 이러한 뜻으로 사용됩니다. h1div 등 block 값을 기본으로 가지는 요소들을 보면 옆에 다른 요소들이 올 수 없도록 혼자 한 줄을 차지하며 '막고' 있습니다. 아래와 같이 두 요소가 한 줄에 함께 놓일 수 있음에도 불구하고 요소의 크기에 상관 없이 그 어느 요소도 한 줄에 함께 배치될 수 없는 것이죠.

    display:block의 경우 요소 컨텐츠의 width100% 값을 가지고 있습니다. 하지만, 크기를 직접 지정하면 자동으로 남은 길이를 margin으로 채워 옆으로 다른 요소가 오는 것을 막는 겁니다.

    아래 예제를 작성하여 실행하고 개발자 도구를 통해 display:blockmargin이 적용되는지 확인해 봅시다. 

    inline'일렬로 늘어선'이란 뜻을 가지고 있습니다. display: inline 역시 이러한 뜻으로 사용됩니다. strongspana 태그가 한 줄에 놓여 있는 것을 확인해 보세요.

    inline의 경우 요소의 컨텐츠 크기에 한정된 크기를 가지며, 부모의 너비 안에서 한 줄에 들어갈 수 있는 만큼 일렬로 배치됩니다. 아래의 예제를 한 번 실행해 봅시다.

    단어의 뜻만으로도 두 차이에 대한 감이 어느 정도 잡히셨겠지만 각각의 목적, 즉 쓰임을 정확히 알고 있어야 수강을 끝난 이후에도 자유롭게 응용하실 수 있을 겁니다. 아래의 예시를 한 번 실행해 봅시다. 

    block은 전체 문단과 같이 큰 맥락을 가질 때 사용하는 반면, inline은 그 안에 들어가는 단어, 링크, 이미지 등에 쓰입니다.

    blockinline은 서로 쓰임이 다르기 때문에 가질 수 있는 프로퍼티도 다릅니다. block의 경우 width, height, margin, padding을 모두 사용할 수 있지만, inline은 width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없습니다. 아래의 예제를 작성한 뒤 실행해 봅시다.

    block의 경우 widthheightmarginpadding이 모두 적용되었지만,  inline의 경우 widthheightmargin-topmargin-bottom 프로퍼티가 적용되지 않음을 확인할 수 있습니다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)