css display 속성으로 박스의 유형 제어하기1 - display : block 속성으로 블록 박스 제어하기
네 안녕하세요, 저번 포스팅 까지는 css가 제공하는 기본적인 기능에 대하여 알아보았습니다.
이번 포스팅부터는 css가 제공해주는 고급 기능들에 대하여 알아보겠습니다.
그중에서 가장 먼저 배울 것은 바로 배치를 하는 방법입니다.
우리가 css를 쓰는 가장 큰 이유가 바로 배치 때문인데요,
이 배치가 잘 되어있어야 웹 페이지가 깔끔해 보이고 미관상 예뻐 보입니다.
그래서 이번 시간에는 그 방법들에 대하여 알아보도록 하겠습니다.
그럼 지금부터 같이 보시죠.
1. display 프로퍼티
display 프로퍼티는 html에서 제공을 해주는 기본적인 박스의 유형을 무시하고 우리가 직접 박스의 유형을 정하도록 해주는 프로퍼티입니다.
그리고 그러한 유형은 총 3가지입니다.
- display : block; = 블록 박스
- display : inline; = 인라인 박스
- display : inline-box; = 인라인 블록 박스
이렇게 사용이 가능하며, 이 중에서 이번 포스팅에서는 display : block 프로퍼티에 대하여 알아보도록 하겠습니다.
1 - 1. display : block
이 속성이 스타일로 지정이 되면 너비(width)와 높이(height) 값을 주어
태그가 출력이 되는 박스의 크기를 변경을 할 수 있습니다.
그리고 이 속성은 한 줄을 독점적으로 차지를 하기 때문에 다른 태그들의 배치로 인한 영향을 받지 않습니다.
사용 예시는 이렇습니다.
<!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>block</title>
<style>
div {
border : 1px solid yellowgreen;
}
span {
display : block;
background : powderblue;
border : 1px dotted orangered ;
width : 100px; height : 40px;
}
</style>
</head>
<body>
<h3><span>를 display:block으로</h3>
<hr>
<div><span>block span</span>과<span>block span</span>입니다.
</div>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
그럼 이제 결과 화면이 어떻게 나오는지 한 번 보실까요?
이렇게 한 줄을 혼자서 차지를 하게 됩니다.
그래서 글자들이 전부 자동으로 개행이 되어서 밑으로 나오는 것을 볼 수가 있습니다.
이런 방법은 보통 무언가를 강조를 하는데,
그게 메인 키워드이거나 머리말 등일 때 이런 식으로 쓸 수 있습니다.
여기까지 블록 박스를 제어해보았습니다.
다음 포스팅에서는 인라인 박스를 제어헤보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css display 속성으로 박스의 유형 제어하기 3 - display : inline-block 속성으로 인라인 블록 박스 제어하기 (0) | 2023.04.03 |
|---|---|
| css display 속성으로 박스의 유형 제어하기 2 - display : inline 속성으로 인라인 박스 제어하기 (0) | 2023.04.03 |
| css cursor 프로퍼티로 마우스 커서 제어하기 (0) | 2023.04.03 |
| css box-shadow 속성 이용하여 박스에 그림자 넣기 (0) | 2023.04.03 |
| css text-shadow 속성 이용하여 텍스트에 그림자 넣기 (0) | 2023.04.03 |
댓글