반응형
css display 속성으로 박스의 유형 제어하기 2 - display : inline 속성으로 인라인 박스 제어하기
네 안녕하세요, 이번 포스팅에서는 인라인 박스를 제어하는 방법에 대하여 알아보도록 하겠습니다.
우리가 박스를 다룰 때 여러 개의 박스를 다뤘습니다.
그중에서 메인 박스 안에 있는 서브 박스에 해당하는 인라인 박스를 제어하는 방법에 대하여 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 인라인 박스 제어하기 : display : 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</title>
<style>
div div {
display : inline;
border : 2px dotted orangered ;
background : powderblue;
}
</style>
</head>
<body>
<h3><div>를 display:inline으로</h3>
<hr>
<div style="background : orange;">
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
</div>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
각각의 글들이 어떤 식으로 출력이 되는지 한 번 봅시다.
그럼 결과 화면을 보여드리겠습니다.
제가 일부러 화면을 줄였는데, 이런 식으로 글이 개행이 되지 않고,
이어져서 그냥 나오는 것을 확인할 수가 있습니다.
이 사례를 쓰는 경우가 없지는 않지만, 생각보다 많이 쓰지는 않습니다.
보통 웹 페이지든 문서든 작성을 할 때 개행을 많이 할 것이기 때문에 별로 효율이 좋지는 못합니다.
여기까지 인라인 블록을 제어하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 인라인 블록 박스를 제어하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css position : static 프로퍼티로 박스 정적 배치 하기 (0) | 2023.04.24 |
|---|---|
| css display 속성으로 박스의 유형 제어하기 3 - display : inline-block 속성으로 인라인 블록 박스 제어하기 (0) | 2023.04.03 |
| css display 속성으로 박스의 유형 제어하기1 - display : block 속성으로 블록 박스 제어하기 (0) | 2023.04.03 |
| css cursor 프로퍼티로 마우스 커서 제어하기 (0) | 2023.04.03 |
| css box-shadow 속성 이용하여 박스에 그림자 넣기 (0) | 2023.04.03 |
댓글