[HTML] Block-level 요소 , Inline 요소

4369 단어 멋쟁이사자처럼htmlhtml 

<body>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <span>hello world</span>
    <span>hello world</span>
    <span>hello world</span>
</body>
<style>
	p {
  		background-color: red;
    }
    span {
        background-color: green;
    }
</style>

Block-level 요소

한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소이다.
따라서 블록 요소를 사용하면 라인이 바뀐다. 블록 요소는 블록 요소와 인라인 요소를 모두 포함할 수 있다.

  • 대표적인 블록 요소 : <section>, <article>, <header>, <nav>, <div>, h1~h6, p

Inline 요소

자신의 컨텐츠 크기 만큼 영역을 가지는 요소이다.
따라서 줄 바뀜 없이 옆으로 나열되고 텍스트 정렬의 영향을 받는다. 인라인 요소들은 인라인 요소만 중첩이 가능하다.

width, height 값을 줘도 적용되지 않기 때문에
넓이와 높이를 주고 싶어! display:block
inline 속성은 유지하고 싶어! display:inline-block

  • 대표적인 인라인 요소 : a, span, strong

Inline-block 요소

  • 대표적인 인라인블록 요소 : button, img, input


출처: 위니브

GitHub - Deactivate Directory
마크다운(Markdown) 작성법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage