웹페이지의 구조는 여러개의 box의 구조로 적용된다.
웹페이지의 box구조는 CSS를 통해 적용이 가능하다. 그래서 box의 속성을 적용하는 방법을 소개해보겠다.
📝 block, inline
- block으로 적용된 태그는 옆에 다른 내용이 올수 없다.
- inline은 정해진 글자만큼만 공간을 차지하고 옆에 내용이 올 수 있다.
- 차이점은 아래의 표를 통해 확인해보자
🔊 block과 inline의 차이점
| block | inline |
|---|---|
| 높이, 넓이 있음 | 높이, 넓이 없음 |
| 배경색, 높이, 넓이 지정가능 | 글자가 없으면 배경색 적용 불가 |
| block 속성의 태그 옆에 새로운 태그 배치가능 | inline 속성 옆에 새로운 태그 배치 가능 |
📖 block과 inline의 구현 비교
- block 차지 공간 예시와 inline 차지 공간 예시를 비교해보자
- 아래의 사진을 통해 확인이 가능하다.
📝 block, inline 태그 구별
- 거의 대부분의 태그가 block 요소를 가지기 때문에 inline 요소를 알아두는 것이 효과적이다.
- inline 태그는 span, a, image등이 있다.
💾 block, inline 실습
- 위의 정리한 내용을 가지고 block, inline 실습을 해보았다.
- 아래의 코드와 예시를 확인해보자
- 하늘색 block 부분은 하늘색, 연두색 부분은 inline 영역
- 하늘색 block 부분은 옆에 내용이 올 수 없다.
- 연두색 inline 영역에는 옆에 내용을 추가할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>inline_block</title>
<style>
div {
height: 150px;
width: 150px;
background-color: skyblue;
}
span {
background-color: yellowgreen;
}
img {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<a href="google.com">link</a>
<address>hello</address>
<span>hello</span>
<span>hello</span>
<img src="레코드.png" />
<span>hello</span>
</body>
</html>
📢 block속성의 내용을 inline으로 적용
- CSS에 display 속성을 inline-block 옵션을 주면 block태그를 inline 속성을 가지게 만들 수 잇다.
- 해당 예시 코드를 확인해보자.
📖 HTML, CSS 코드 예시
<head> <style> h1 { background: gray; width: 60%; } p { background: rgba(255,84,104,0.3); width: 80%; height: 200px; } span { display: inline; background: yellow; width: 100px; height: 100px; } </style> </head> <body> <h1>Basic document flow</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p> </body>
준이의 취미저장소