▣ 박스 모델(Box model)
※ 그림 자료 출처 : CSS 3D Box Model Hierarchy
위의 그림에서 볼 수 있듯이 CSS의 구성 요소들 대부분이 박스 구조이며, CSS의 속성 중 상당 부분이 박스 구조를 다루는 것과 관련이 있습니다. 그리고 박스의 유형은 블럭(Block), 인라인(Inline), 인라인-블럭(Inline-block)으로 나누어지며, 박스의 유형에 따라 브라우저에서 보이는 양상이 달라집니다.
박스 모델의 세부 구성 요소에는 외부 여백(Margin), 배경 색상(Background-color), 배경 이미지(Background-image), 테두리(Border), 내부 여백(Padding), 내용(Content) 등이 있습니다. 그 중에서 외부 여백, 테두리, 내부 여백, 내용의 4가지 구성 요소는 어떻게 제어하느냐에 따라 서로 영향을 주고, 특히 외부 여백과 내부 여백은 브라우저에서 보이지 않으므로 크롬 웹 브라우저의 개발자 도구를 이용하여 살펴보는 연습이 필요합니다.
▣ 크롬 웹 브라우저의 개발자 도구 이용
크롬 웹 브라우저에서 제공되는 개발자 도구를 이용하면 좀 더 편리하고 정확하게 CSS 구성 요소들을 제어할 수 있습니다. 크롬에서 개발자 도구를 열수 있는 몇 가지 방법을 살펴보고, 개발자 도구를 이용해 박스 모델과 CSS 요소들을 좀 더 세부적으로 들여다보겠습니다.
□ 이용 방법
위와 같이 브라우저 우측 상단 메뉴에서 '더 많은 도구(More Tools)' - '개발자 도구(Developer Tools)'를 선택하거나, 아래와 같이 브라우저에서 마우스 우측을 클릭하여 '검사하기(Inspect)'를 선택해도 개발자 도구를 열 수 있습니다.
또 다른 방법은 아래와 같이 브라우저 상단 메뉴에서 '보기(View)' - '개발자(Developer)' - '개발자 도구(Developer Tools)'를 선택하면 개발자 도구를 열 수 있습니다.
□ 박스 모델과 CSS 구성요소 확인
개발자 도구를 열었을 때 창의 위치 설정이 조금씩 다를 수 있지만, 공통적으로 'Elements' 탭을 선택하면 우측의 'Styles' 또는 'Computed' 탭을 열어서 박스 모델과 CSS 관련 속성들을 자세하게 들여다볼 수 있습니다.
개발자 도구 우측 하단의 박스 모델에서 각 구성요소인 외부 여백(Margin), 테두리(Border), 내부 여백(Padding) 그리고 내용(Content) 박스들을 색깔별로 파악할 수 있습니다. 가장 내부의 하늘색은 설명하는 텍스트가 없지만 내용(Content) 박스를 의미합니다.
특히 아래와 같이 브라우저의 현재 웹페이지에 원하는 내용이나 스타일을 즉시 적용시켜 본 코딩을 하기 전에 미리보기로 활용할 수 있습니다.
이렇게 개발자 도구에서 적용했던 스타일은 웹 페이지가 다시 로딩되면 사라지게 됩니다.
▣ 블럭(Block)과 인라인(Inline) 그리고 인라인-블럭(Inline-block)
학습을 시작하기 전에 HTML의 블럭 및 인라인 요소에 대하여 먼저 살펴보길 바랍니다.
[HTML] TIL5 : 블럭-레벨 및 인라인 요소의 특징 / 클래스 및 아이디 속성 활용
▣ Block-level & Inline Elements HTML을 구성하는 요소들(Elements) 즉 태그들은 크게 두 가지 종류로 구분됩니다. 하나는 블럭-레벨 요소이고 또 다른 하나는 인라인 요소입니다. 간단하게 설명하자면 브
charlie-lyc.tistory.com
□ 인라인 요소로 변환
블럭(Block) 요소를 CSS의 'display' 속성을 이용하여 인라인(Inline) 요소로 바꿀 수 있습니다. 대표적인 블럭 요소인 리스트 태그를 임의로 작성하여 아래와 같이 스타일을 적용해 보겠습니다.
<html>
<head>
<style>
/* To Inline box */
li {
display: inline;
}
</style>
</head>
<body>
<!-- Block box -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>
개발자 도구를 통해 살펴보면 하늘색의 내용(Content) 박스로만 구성된 <li> 태그를 확인할 수 있습니다. 특히 'Styles' 탭의 아래쪽에서 <li> 태그의 디스플레이 속성의 값이 'list-item'으로 설정된 것을 볼 수 있는데, 이는 'user agent' 즉 브라우저에서 지정한 일종의 초기값으로 파악할 수 있습니다.
위의 코드를 리스트 태그에 적용하면 아래와 같이 스타일링 되는데, 개발자 도구를 통해 살펴보면 <li> 태그의 디스플레이 속성의 값이 user agent가 정한 기존의 'list-item'이 아니라 사용자가 설정한 'inline'으로 바뀌었음을 확인할 수 있습니다.
브라우저에서도 여러 개의 <li> 태그들이 일렬로 배열되는 것을 볼 수 있습니다. 이와 같은 형식은 웹 페이지 상단의 '메뉴(Menu)'나 '네비게이션 바(Navigation Bar)' 를 스타일링할 때 주로 이용합니다.
□ 블럭 요소로 변환
또한 인라인(Inline) 요소를 CSS의 'display' 속성을 이용하여 블럭(Block) 요소로 바꿀 수도 있습니다. 대표적인 인라인 요소인 이미지 태그를 임의로 작성하여 아래와 같이 스타일을 적용해 보겠습니다.
<html>
<head>
<style>
/* To Block box */
img {
display: block;
}
</style>
</head>
<body>
<!-- Inline box -->
<img src="img/beach.jpg" alt="my-image">
</body>
</html>
개발자 도구를 통해 살펴보면 하늘색의 내용(Content) 박스로만 구성된 <img> 태그를 확인할 수 있고 'Computed' 탭의 아래쪽에서 디스플레이 속성의 값이 'inline'으로 설정되어 있는 것을 볼 수 있습니다.
위의 코드를 이미지 태그에 적용하면 아래와 같이 스타일링 되는데, 개발자 도구를 통해 살펴보면 <img> 태그의 디스플레이 속성의 값이 사용자가 설정한 'block'으로 바뀌었음을 확인할 수 있습니다. 그리고 추가적으로 '왼쪽 정렬'이 되어 있는 이미지를 '가운데 정렬'로 설정하기 위해서는 어떻게 해야 할까요?
개발자 도구를 열고 브라우저를 보면 이미지 오른쪽에 오렌지색 여백이 있는 것을 볼 수 있습니다. 또한 개발자 도구의 박스 모델에서 오렌지색은 외부 여백(Margin)을 의미하는데 좌우의 외부 여백 속성의 값이 설정되어 있지 않음('-')을 확인할 수 있습니다.
이를 바탕으로 아직 배우지 않았지만 'margin' 속성의 값을'auto'로 설정하고 다시 스타일을 적용해 보겠습니다. 이 때 'auto'는 마진의 값을 상하 또는 좌우로 반씩 균등하게 나누어 자동 적용하는 것을 의미합니다.
<style>
/* To Block box */
img {
display: block;
/* To Center */
margin: auto;
}
</style>
위의 코드를 이미지 태그에 적용하면 아래와 같이 스타일링되는데, 개발자 도구를 통해 살펴보면 기존에 없었던 마진 속성의 값이 좌우에 동일하게 설정되었음을 확인할 수 있습니다. 상하의 마진은 <img> 태그의 초기값으로 주어지지 않아 0인 것으로 파악할 수 있습니다.
□ 인라인-블럭 요소로 변환
이번에 실습할 내용을 간단하게 설명하자면 두 개의 단락을 좌우로 나란히 배열하는 것입니다. 일단 겉보기에 단락(선택자 div 또는 .paragraph)이 블럭 요소이므로 앞서 설명했던 방식에 따라 디스플레이 속성의 값을 'inline'로 적용해 보겠습니다. 참고로 좌우 배열을 위해 'width' 속성의 값은 50% 미만으로 설정하였습니다.
<style>
/* To Inline-block box */
.paragraph {
width: 49.5%;
display: inline;
}
</style>
위의 코드를 아래와 같이 적용하고 개발자 도구를 통해 살펴보면 기존의 디스플레이 속성이 'block'이였는데 사용자 설정에 의해 'inline'으로 바뀌었음을 확인할 수 있습니다. 그런데 브라우저에서 단락의 배치는 이전과 변함이 없습니다. 무슨 이유 때문일까요? 힌트는 단락(선택자 div 또는 .paragraph)과 단락 내의 <h3> 또는 <p> 태그와 관련이 있습니다.
단락(선택자 div 또는 .paragraph)의 디스플레이 속성의 값은 분명히 'inline'이지만, 그 구성 요소인 <h3> 또는 <p> 태그 각각의 디스플레이 속성의 값이 'block'인 것을 개발자 도구를 통해 아래와 같이 확인할 수 있습니다. 즉 내부는 여전히 블럭 상태인데 외부가 인라인 상태인 것은 잘못된 설정입니다.
이렇게 블럭 요소이지만 인라인 요소처럼 이용하고자 할 때 설정하는 디스플레이 속성의 값이 'inline-block' 입니다.
<style>
/* To Inline-block box */
.paragraph {
width: 49.5%;
display: inline-block;
}
</style>
디스플레이 속성의 값을 위와 같이 바꾸어 스타일을 적용해 보면 아래와 같이 두 개의 단락이 좌우로 나란히 배열된 것을 볼 수 있습니다.
▣ Display와 Visibility
display 속성의 값들 중에는 앞서 살펴본 'block', 'inline', 'inline-block' 이외에 'none'이 있으며, 이 스타일 설정과 비슷한 visibility 속성의 값 'hidden'을 함께 살펴보겠습니다.
□ display : none;
위의 사진에서 볼 수 있듯이 <h3> 태그의 디스플레이 속성의 값을 'none'으로 설정하면 기존의 초기값 'block' 이 더 이상 적용되지 않고, 브라우저에서 차지하고 있던 공간마저 완전히 사라짐을 확인할 수 있습니다.
□ visibility : hidden;
한편 <h3> 태그의 비지빌리티 속성의 값을 'hidden'으로 설정하면 기존의 디스플레이 속성의 초기값 'block' 이 그대로 유지되기 때문에 브라우저에서 차지하고 있던 공간은 사라지지 않음을 확인할 수 있습니다.
'HTML & CSS > CSS3' 카테고리의 다른 글
| [CSS] TIL6 : 테두리(보더)와 내부 여백(패딩) 및 외부 여백(마진) / 박스의 폭과 높이 그리고 박스 사이징 (0) | 2021.04.30 |
|---|---|
| [CSS] TIL5 : 배경(백그라운드) 설정 (0) | 2021.04.29 |
| [CSS] TIL3 : 서체 설정과 구글 서체 / 절대 단위와 상대 단위 / 색상 설정과 색상코드 선택기(컬러 피커) (0) | 2021.04.28 |
| [CSS] TIL2 : 선택자의 종류 및 조합방법 / 스타일 적용 우선순위 (0) | 2021.04.27 |
| [CSS] TIL1 : 코드의 구성 / 실행 방법 및 우선순위 / 프레임워크 이용 방법 (0) | 2021.04.27 |
댓글