“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
코딩 공부를 할때 인라인 구조와 블록 구조를 몰라 위치나 크기값을 지정할때 자신이 원하는 대로 적용이 되지 않아 당황하는 경우가 종종 있습니다.
인라인과 블록구조를 공부하고 이러한 문제를 해결해 봅시다
- 블록 레벨요소(Block-level Elements)
- 인라인요소(inline Elements)
- 블록 레벨요소(Block-level Elements)와 인라인요소(inline Elements)의 차이점
- 블록 레벨요소(Block-level Elements)와 인라인요소(inline Elements)의 변환
🤨블록 레벨 요소(Block-level Elements)
블록레벨 요소는 자신이 필요로하는 영역보다 더 많은 요소를 차지합니다.
- 사용가능한 최대의 가로너비를 사용하며 이러한 특성때문에 수직으로 적용될 수 밖에 없습니다.(width : 100%)
- 크기값을 가질수 있지만 수직으로 적용됩니다.
- 상하좌우의 마진와 패딩값을 가질수 있습니다.
- 위에 이러한 요소로인해 레이아웃 작업에 적합합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1, p, div {
border: 1px solid #ff5b5b;
}
</style>
</head>
<body>
<h1>블록레벨 요소입니다</h1>
<p>블록레벨 요소입니다</p>
<div>블록레벨 요소입니다</div>
</body>
</html>
| 태그명 | 태그의 의미 |
| <h1> </h1> ~ <h6> </h6> | 제목을 정의 하는 태그 |
| <p></p> | 단락을 정의 하는 태그 |
| <address></address> | 연락처 정보를 정의 하는 태그 |
| <ol></ol> | 비순서 목록을 정의 하는 태그 <li>태그만 자식요소로 가지는 태그 |
| <ul></ul> | 비순서 목록을 정의 하는 태그 <li>태그만 자식요소로 가지는 태그 |
| <li></li> | 항목을 정의 하는 태그(블록레벨요소를 자식으로 포함가능) |
| <table></table> | 표를 정의 하는 태그 |
| <div></div> | 요소들을 그룹으로 정의하는 태그 |
| <nav><nav> | 목차를 정의해주는 태그(블록레벨요소를 자식으로 포함가능) |
| ... | |
🤔인라인 요소 (inlin Elements)
인라인 요소는 자신이 필요로하는 영역만을 사용합니다.
- 자신의 컨텐츠 너비만큼만 사용합니다.
- 수평으로 적용됩니다.
- 자신의 컨텐츠 너비만을 사용하므로 크기값을 가질수 없습니다.
- 좌우 마진과 상하좌우의 패딩도 가능하지만 상하 마진은 불가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a, span, strong {
border: 1px solid #ff5b5b;
}
</style>
</head>
<body>
<a href="#">인라인레벨 요소입니다</a>
<span>인라인레벨 요소입니다</span>
<strong>인라인레벨 요소입니다 </strong>
</body>
</html>
| 태그명 | 태그의 의미 |
| <a></a> | 링크를 정의 하는 태그 |
| <img> | 이미지를 삽입할때 사용하는 태그 |
| <textarea></textarea> | 여러줄의 텍스트 입력 상자 |
| <span></span> | 인라인 요소들을 그룹으로 정의 하는 태그 |
| <strong></strong> | 중요한 텍스트를 정의 하기위해 굵은체로 표시되는 태그 |
| ... | |
😮블록 레벨 요소(Block-level Elements) 와 인라인 요소 (inlin Elements)의 관계
블록 레벨 요소와 인라인 요소는 서로 부모자식으로 포함이 가능하지 못하는 경우들이 있습니다.
| 블록 레벨요소 | vs | 인라인 레벨 요소 |
|
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<a href="#">가능한 구조입니다.(블록 -> 인라인)</a>
</div>
<span>
<h1>불가능한 구조입니다.(인라인 -> 블록)<br>유효성검사에서 문법 에러가 발생</h1>
</span>
<span>
<a href="#">가능한 구조입니다.(인라인 -> 인라인)</a>
</span>
<nav>
<ul>
<li>가능한 구조입니다.(블록 -> 블록)</li>
</ul>
</nav>
</body>
</html>
코드를 실행해보면 구동이 되는 모습이지만 유효성검사에서 에러가 난 모습을 볼 수있습니다.
그러므로 인라인 요소와 블록레벨요소를 함께 사용할 경우에 주의 할 필요가 있습니다.
코드 유효성 검사 : https://validator.w3.org/
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
🤗블록 레벨 요소(Block-level Elements) 와 인라인 요소 (inlin Elements)의 변환
블록레벨 요소의 태그를 사용할 경우 인라인의 특성인 한줄에 택스트와 함께 사용하고자 한다면 아무리 크기를 줄이더라도 소용이없습니다 그것을 css에서 변경하여 사용할 수있습니다.
블록레벨 요소와 인라인 요소는 적절하게 변환하며 사용할 수있으며 그것은 display라는 속성의 값으로 변환할 수 있습니다.
😎인라인을 블록으로 블록은 인라인으로
| 속성 | 의미 |
|
display: block;
|
인라인을 블록으로
|
|
display: inline;
|
블록을 인라인으로
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
strong {
border: 1px solid #61ff5b;
display: block;
}
div {
border: 1px solid #ff5bf1;
display: inline;
}
</style>
</head>
<body>
<strong>인라인을 블록으로</strong>
<div>블록을 인라인으로</div>
</body>
</html>
😎인라인의 특성과 블록레벨 요소의 특징 함께
| 속성 | 의미 |
|
display: inline-block;
|
인라인처럼 한줄에 텍스트와 사용되지만 블록처럼 자신만의 크기를 가질수 있다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid #ff5bf1;
width: 100px; height: 50px;
}
.inline-block {
display: inline-block;
}
</style>
</head>
<body>
<div class="inline-block">aaaa</div>
<div class="inline-block">bbbb</div>
<div class="inline-block">cccc</div>
<!-- 인라인과 블록의 특성을 섞음 -->
</body>
</html>
😍마치며
블록레벨 요소와 인라인 요소의 태그들은 위에 나와있는 것보다 많습니다. 태그를 사용하실때 태그들이 블록레벨 요소인지 인라인 요소인지 확인하고 적절하게 사용하세요!
블록과 인라인의 차이점이 이해되신다면 서로를 변경하고 부모자식으로 주는 것에 대해 꼭 공부하셔서 오류가 나 당황하지 않도록 저희 열심히 공부해요! :)