[HTML] 기본개념 Block, Inline

HootJem

Aug 28, 2024

Contents

시작하기 전 설치할 것 → Live Server 2. 블록(Block) 요소란?2. Inline

시작하기 전 설치할 것 → Live Server

HTML 파일을 작성하기 전에, 코드의 변화를 실시간으로 확인할 수 있는 Live Server 확장 프로그램을 설치해야 합니다. Live Server를 설치한 후, 오른쪽 하단에 나타나는 "Go Live" 버튼을 클릭하면 작성한 HTML 페이지를 브라우저에서 실시간으로 볼 수 있습니다.

2. 블록(Block) 요소란?

블록 요소는 웹 페이지에서 한 줄을 전체적으로 차지하는 요소입니다.

블록은 페이지의 한줄을 모두 차지하고, 다음 태그가 오면 자동으로 아래에 위치하게 됩니다.

2. Inline

inline 요소는 자신의 공간(크기) 만큼만 자리를 차지하여 다음 태그가 오면 옆에 붙게 됩니다.

2.1 인라인 요소를 블록 요소로 변경하기

img 태그 역시 inline 속성인데 이런 속성을 가진 태그중 2개만 선택하여 block 속성을 주고싶다면 class 를 주어 스타일을 설정할 수 있습니다.


<body>
    <style>
        .img_block {
                display: block;
               
            }
        
    </style>
    <h4> img 태그 </h4>
    <img class="img_block" src="https://picsum.photos/id/237/200/300">
    <img class="img_block" src="https://picsum.photos/id/238/200/300">
    <img src="https://picsum.photos/id/239/200/300">
    <img src="https://picsum.photos/id/231/200/300">
</body>

설정하고 싶은 태그만 img_block 클래스를 적용하여 스타일을 설정하자 블록요소 처럼 한 줄을 모두 차지하도록 변경된 것을 볼 수 있습니다.


<style>
        div {
            border: 1px solid black;
            display: inline;
        }
            span {
            border: 1px solid black;
            display: block;
        }
</style>

이처럼 HTML 태그는 기본적으로 기본적으로 가진 속성이 있지만

CSS 설정을 통해 속성을 변경할 수 있습니다.

Contents

시작하기 전 설치할 것 → Live Server 2. 블록(Block) 요소란?2. Inline

<body> <style> .img_block { display: block; } </style> <h4> img 태그 </h4> <img class="img_block" src="https://picsum.photos/id/237/200/300"> <img class="img_block" src="https://picsum.photos/id/238/200/300"> <img src="https://picsum.photos/id/239/200/300"> <img src="https://picsum.photos/id/231/200/300"> </body>

<style> div { border: 1px solid black; display: inline; } span { border: 1px solid black; display: block; } </style>