이미지 출처
블록 레벨 요소(Block-lever Elements)
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다.
블록 요소는 하나의 박스라고 생각하면 됩니다.
블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록요소도 일부 포함할 수 있다.
기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width,height,margin,padding
등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다.
width 값을 따로 설정하지 않아도, 블록요소는 기본적으로 최대 너비로 설정됩니다.
블럭 요소 : <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>
예시를 들어보자면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
.block {
background-color: #0c67f9;
}
.block2 {
background-color: #09ef27;
width: 500px;
}
.block3 {
background-color: #dd077c;
height: 150px;
}
</style>
</head>
<body>
<div class="block">김도현은</div>
<div class="block2">두명이다.</div>
<div class="block3">정말 놀랍다!</div>
</body>
</html>이대로 출력해보면
이렇게 배경색깔이 들어간 블록이 한줄을 끝까지 차지하게 되며
width, height 값도 잘 적용된 모습입니다.
인라인 요소(Inline Element)
인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다.
인라인 요소는 텍스트라고 생각하면 됩니다.
인라인 요소는 항상 블록 요소 안에 있으며 인라인 요소 안에 다른 인라인 요소가 포함될 수 있습니다.
기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다.
그래서 임의로 width, hegith 로 변형을 줄 수가 없습니다.
인라인 요소는 내부에 블럭요소를 포함할 수 없습니다.
인라인 요소 : <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>
이것도 예시를 들어보면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
.inline {
background-color: #fa1f1f;
}
.inline2 {
background-color: #ff9c23;
}
.inline3 {
background-color: #f3fa1f;
}
.inline4 {
background-color: #66ff1f;
}
.inline5 {
background-color: #2e1ffa;
}
</style>
</head>
<body>
<span class="inline">김</span>
<span class="inline2">김도</span>
<span class="inline3">김도현</span>
<span class="inline4">도현</span>
<span class="inline5">김도</span>
</body>
</html>출력해보면,
한줄에 가로로 정렬이 잘 되어 나오는 모습입니다.
블록 구조와 인라인 구조 차이점을 알아봤습니다!