[CSS 2] 박스 모델(Box Model)과 그리드(Grid)
박스 모델(Box Model)
각 태그는 일정한 부피를 차지하는데 이를 박스라고 생각하는 형식이다. 각 박스는 마진(margin), 보더(border), 패딩(padding), 콘텐츠(content)로 구성되는데, border를 기준으로 안쪽은 padding, 바깥쪽은 margin이다. 예제 코드를 보자.
<style>
h1, a {
border: 5px red solid;
padding: 20px;
margin: 20px;
display: block;
width: 100px;
}
</style>
먼저 태그 h1와 a를 선택자 ‘,’(컴마)를 통해 묶을 수 있다.
border- 태그는 border-width(두께 지정), border-color(색 지정), border-style(점선/실선/단선(solid) 등 지정), border-bottom(아래쪽 border만 지정), border-right(오른쪽 border만 지정) 등이 있는데, 위와 같이 간단하게 border: 식으로 요약해 쓸 수 있다.(이때 border-style은 필수 항목)
박스 모델의 규격을 직접 지정할 수도 있는데, padding, margin, width 등 다양하게 설정 가능하다.
또 박스 모델은 크게 블록 레벨 엘리먼트(block level element)와 인라인 엘리먼트(inline element)로 구분되는데, 블록 레벨은 화면 전체(가로를 전부)를 차지하고, 인라인의 경우 자기 콘텐츠 크기만큼만 차지한다.
이는 display 속성을 통해 inline / block / none(화면에서 안보이게 함)으로 지정하여 디폴트값을 바꿀 수도 있고, 후술할 grid를 설정할 수도 있다.
그리드(Grid)
다음 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div {
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div> 봄이 오면 들으려고 아껴놓은 봄캐롤 | 아무생각 없이 틀어놓으면 하루가 순삭 되는 설레는 국내 노래모음 플레이리스트</div>
</div>
</body>
</html>
박스 모델의 블록 레벨과 인라인을 대표하는 태그가 있는데, 각각 div 태그(block)와 span 태그(inline)이다. 따라서 원래라면 NAVIGATION과 “봄이 오면 ~”은 가로 줄을 각각 블록 레벨같이 차지했어야 한다. 그러나 실제로 실행된 것을 보면 마치 span과 같이 한 줄의 좌우를 차지하고 있는 것을 확인할 수 있다.
이건 이 div 태그를 grid 설정했기 때문인데, id를 grid로 같은 상위의 div 태그에 대해 display가 “grid”로 설정돼있기에 그리드(격자)한 형태로 변환된 것이다. 다만 이렇게 그리드로 바꾸려면 grid-template-rows(세로 길이 지정)/columns(가로 길이 지정)/areas(영역 지정)을 하나는 설정해줘야 하는 듯?
이 모든 내용을 하나의 예제 코드로 종합하면 아래와 같이 설정 가능하다.
<!DOCTYPE HTML>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 120px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
#grid ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
body {
margin: 0;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#article {
padding-left: 25px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS란 무엇인가?</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics,
enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content</p>
</div>
</div>
</body>
</html>
아래는 실행결과
출처: [생활코딩!HTML+CSS+자바스크립트 CSS편 Chapter 08~11]