html 기본 강좌에서 각각의 태그의 의미와 함께 기본사이즈를 확인하면서 display 속성을 모두 확인했었습니다.
html 기본 강좌의 [웹 프로그래밍/HTML 기본강좌] - 블럭과 인라인을 한번 더 참고하시면 좋을듯 싶습니다.
이번 강좌에서는 블럭과 인라인의 확장 강좌라고 보시면 될 것 같습니다.
| 속성 값 | 설명 |
|---|---|
| block | 부모요소의 가로 크기(width)를 상속 받으며 세로 크기는 내용의 크기를 반환 - 박스의 크기와 여백 조정이 가능 |
| inline | 요소 안 내용의 가로, 세로 크기를 자동으로 설정. - 박스의 크기와 여백 조정이 불가능 |
| inline-block | 요소 안 내용의 가로, 세로 크기를 자동으로 설정. - 박스의 크기와 여백 조정이 가능 |
| none | 안보이게 감춤 |
확인을 위해 이번에는 css속성중 width 속성을 사용했습니다. width는 요소의 가로 크기를 설정하는 속성입니다.
@charset "utf-8";
/* CSS Document */
body{ width: 380px;}
h2{ display: none; }
span { width: 50%; background-color: yellow;}
.box-inlineblock{ 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>display 속성</title>
<link rel="stylesheet" type="text/css" href="display.css">
</head>
<body>
<h1>이문열 삼국지</h1>
<h2>책 소개</h2>
<h3>젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</h3>
<p>1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운<span>『이문열 삼국지』</span>가 출간 30여 년 만에 새롭게 출간된다.<br>나관중 판본을 기본으로 하여 <span class="box-inlineblock">우리 시대 대표 작가인 이문열의 글맛으로</span> 살려낸 『이문열 삼국지』는 오랫동안 최고의 고전으로 사랑받아왔다.</p>
</body>
</html>
css 4번 줄에서 body의 가로 크기를 380px롤 지정했습니다.
css 5번 줄에서 h2요소는 display을 none으로 지정해서 html 소스상에서는 "책 소개"라는 요소가 있으나 화면에서는 감추어 버렸습니다.
css 6번 줄에서 span 요소는 가로크기 width를 50% 배경색을 노란색으로 설정했습니다.
css 7번 줄에서 box-inlineblock 클래스는 display를 inline-block으로 설정했습니다.
span 태그의 display 기본 속성은 html 기본강좌에서 알아 보았듯이 inline입니다. 그러므로 위처럼 강제로 width 값을 정해도 첫번째 span처럼 사이즈가 적용되지 않습니다.
반면 같은 span 요소라도 두번째 span 처럼 box-inlineblock 클래스를 추가하여 display 속성을 inline-block으로 변경하면 width 값이 적용되어 부모요소인 p의 크기의 50% = 190px 이 적용됩니다.
혹시나 "display:none으로 왜 감추지 라고 생각하실 수 있습니다. 감출거 뭐하로 만드나.."라고 생각하실 수 있습니다.
웹문서를 제작하다보면 의외로 요소를 감춰야 하는 사항이 종종 등장합니다. 가령 모바일과 pc에 모두 최적화된 웹문서를 만들 경우 모바일 화면이 작다보니 굳이 필요없는 이미지는 감추는게 좋습니다. 하지만 pc에서는 화면이 넓기 때문에 이미지가 없으면 너무 허전해 보이거나 눈이 띄지 않을 수도 있습니다. 이런 경우는 모바일과 pc의 css를 분리하고 모바일의 css에서는 감추는 경우는 아주 흔한 일입니다.
'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글
| CSS 선택자 네번째 (그룹 선택자) (1) | 2022.12.09 |
|---|---|
| CSS 선택자 세번째 (결합자) (0) | 2022.12.08 |
| CSS 선택자 두번째 (class 다중 적용) (0) | 2022.12.07 |
| CSS 선택자 첫번째 (기본 선택자와 우선순위) (0) | 2022.12.04 |
| CSS 적용 방식 (0) | 2022.12.01 |