HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
프론트엔드 스쿨 교안(1기)
/
📝
HTML
/
📝
블록 레벨 요소와 인라인 요소
📝

블록 레벨 요소와 인라인 요소

1. 블록 레벨 요소2. 인라인 요소2.1 span3. 모든 inline 요소와 block요소4. inline요소와 block 요소 정리 blog
 

1. 블록 레벨 요소

블록요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소들을 말합니다. 일반적으로 블록요소를 사용하면 라인이 바뀝니다. 블록요소는 블록요소와 인라인요소를 모두 포함할 수 있습니다. 대표적인 블록 요소는 <article>, <header>, <nav>, <section>, <div>가 있습니다.
 

2. 인라인 요소

인라인 요소는 컨텐츠 자신의 크기 만큼 영역을 가지는 요소를 말합니다. 일반적으로 인라인 요소들은 인라인 요소만 중첩이 가능합니다. 인라인 요소의 정렬은 텍스트 정렬의 영향을 받습니다. 대표적인 인라인 요소로는 span, strong 등이 존재합니다.
 

2.1 span

<span>은 대표적인 inline요소로 내용 중 일부분에 속성을 부여하고 싶을 때 주로 사용됩니다.
<p> 레이아웃을 나눌 때 <span style="color:red;"> 설계가 </span> 가장 중요합니다. </p>
 
notion image
notion image

3. 모든 inline 요소와 block요소

블록 레벨 요소 - HTML: Hypertext Markup Language | MDN
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소 로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다. 브라우저 는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.
블록 레벨 요소 - HTML: Hypertext Markup Language | MDN
https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
블록 레벨 요소 - HTML: Hypertext Markup Language | MDN
인라인 요소 - HTML: Hypertext Markup Language | MDN
HTML( Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소 와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 이 글은 인라인 요소란 무엇인지와 블록 레벨 요소와의 차이점을 살펴봅니다. 인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다. 간단한 예제만으로 쉽게 설명할 수 있습니다.
인라인 요소 - HTML: Hypertext Markup Language | MDN
https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements
인라인 요소 - HTML: Hypertext Markup Language | MDN
 

4. inline요소와 block 요소 정리 blog

HTML - block요소 vs inline요소 ★★★★★ - (블럭요소 vs 인라인요소) 구별 차이점 비교
목차 블럭 (block) 요소 인라인 (inline) 요소 인라인블럭 (inline-block) 요소 예제: block 요소 vs. inline 요소 블럭 (block) 요소 요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소 1.width height 값 먹힘. 2. 블럭요소군 연락처 정보. 단락...
HTML - block요소 vs inline요소 ★★★★★ - (블럭요소 vs 인라인요소) 구별 차이점 비교
https://homzzang.com/b/html-103