🍁박스 모델
모든 태그는 화면에 출력될 때(렌더링 될 때) 사각형으로 출력된다.
태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델)이다.
대표적으로 테두리의 border, width, height, padding, margin을 조정한다.
🍁테두리 (border)
모든 태그는 자신의 영역을 가지며, 해당 영역을 기준으로 테두리를 가진다.
이때 태그의 영역은 반드시 사각형이다.
<body>
<h1>박스 모델</h1>
<!-- div#box${상자$}*3 -->
<div id="box1">상자1</div>
<div id="box2">상자2</div>
<div id="box3">상자3</div>
<input type="radio">
</body>#box1 {
border-color: blue; /* 선 색상 */
border-width: 5px; /* 선 두께 */
border-style: double; /* 선 종류 */
/* border-style: solid; */
/* border-style: dotted; */
/* border-style: inset; */
}
선 두께를 지정할 때의 단위는 일반적으로 px를 사용한다.
border-style은 기본 style인 solid, 그리고 dashed, dotted, double을 주로 사용한다.
공통된 접두어 한 줄로 작성
body {
border: 5px dotted black;
}
공통된 접두어를 가지는 속성들은 한 줄로 작성할 수 있다.
테두리 방향 지정
#box1 {
border-color: blue; /* 선 색상 */
border-width: 5px; /* 선 두께 */
/* border-style: solid; */
/* border-style: dotted; */
/* border-style: inset; */
border-style: double; /* 선 종류 */
}
#box2 {
border: 1px solid black;
}
#box3 {
border-top: 5px solid blue;
border-right: 5px solid red;
border-bottom: 5px solid yellow;
border-left: 5px solid orange;
}
#box3 {
border-bottom-width: 5px;
border-bottom-color: red;
border-bottom-style: solid;
}
#box3 {
border: 5px solid blue;
border-bottom: 5px solid red;
}
테두리의 방향을 지정하여 방향마다 속성을 다르게 할 수 있다.
테두리 방향 한 줄로 지정
#box3 {
border-color: red blue yellow orange;
}
#box3 {
border-color: red;
border-width: 5px 10px 20px 30px;
}
12시를 기준으로 시계 방향(위, 오른쪽, 아래, 왼쪽)으로 한 줄로 작성할 수 있다.
방향성을 가지고 있는 width 또한 위와 같이 한 줄로 작성할 수 있다.
브라우저의 기본 속성
<body>
<h1>박스 모델</h1>
<input type="text" class="txt"><br>
<input type="text" class="txt"><br>
<input type="text" class="txt"><br>
<input type="text"><br>
</body>.txt {
background-color: white;
}
1,2,3번 박스는 같지만, 4번 박스는 같은 박스임에도 불구하고 박스가 서로 다른 모양을 하고 있다.
CSS는 속성을 하나라도 건드리면 브라우저가 기본으로 설정되어 있는 모든 속성을 초기화하여 본연의 모습으로 돌아가게 된다.
이러한 결과가 나오는 이유는 크롬 브라우저가 기본 박스의 속성에서 디자인을 했기 때문이다.
인디케이터 삭제
.txt {
background-color: yellow;
border: 1px solid #777;
outline: none;
}
입력 박스를 클릭했을 때, 굵은 검은색으로 박스 외곽선이 생기는 것을 볼 수 있다.
이는 인디케이터(Indicator)로, 개발자가 지정한 속성이 아닌 브라우저가 만든 속성이므로 삭제하는 것이 좋다.
h1 {
border: 1px solid #CCC;
border-left: 10px solid #CCC;
border-right: 10px solid #CCC;
width: 160px;
text-align: center;
}
CSS는 모든 태그가 사각형으로 출력되므로, 마찬가지로 제목 각 방향의 속성을 지정해 줄 수 있다.
🍁너비, 높이 (width, height)
내 마음대로 너비와 높이를 지정하고 싶을 때, width, heigth 속성을 사용한다.
width, height는 블럭 태그에만 적용이 가능하지만, 일부 인라인 태그(처음부터 영역이 눈에 보이는 태그에 한함)에 적용이 가능하다.
인라인 태그가 너비 높이를 가지게 되는 순간 인라인 태그처럼 보이지 않게 된다.
기본 크기 정책
1. 블럭 태그 크기
- 너비는 항상 100%로 상대값이다.
- 높이는 내용물만큼의 높이이다.
2. 인라인 태그 크기
- 너비는 내용물만큼의 너비이다.
- 높이는 내용물만큼의 높이이다.
블럭 태그와 인라인 태그의 사용
블럭 태그의 사용
<body>
<h1>박스 모델</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3상자3</div>
</body><style>
.box{
border: 10px solid black;
}
#box1 {
background-color: tomato;
}
#box2 {
background-color: gold;
width: 300px;
height: 300px;
}
#box3 {
background-color: cornflowerblue;
}
</style>
상자 1과 상자 3이 현재 body 태그를 꽉 채우는 100%인 상태이다. 또한 상자 3의 내용물만큼 높이가 늘어나는 것을 확인할 수 있다.
색깔 있는 영역을 콘텐츠 영역이라고 한다.
width와 height는 콘텐츠 영역의 크기를 정의하기 때문에 border 속성을 주더라도 내부의 크기가 작아지지 않는다.
인라인 태그의 사용
<body>
<h1>박스 모델</h1>
<span id="span1">영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1영역1</span>
<span id="span2">영역2</span>
<span id="span3">영역3</span>
</body><style>
#span1 {
background-color: tomato;
}
#span2 {
background-color: gold;
}
#span3 {
background-color: cornflowerblue;
}
</style>
인라인태그는 작성 내용만큼 너비와 높이가 지정되며 한 줄로 출력된다.
텍스트 박스 크기 지정
텍스트: <input type="text" style="width: 300px; height: 200px"> <input type="button" value="버튼">
텍스트 박스는 인라인 태그 중에서 너비와 높이를 지정할 수 있는 대표적인 태그 중 하나이다.
인라인 태그의 width, height 지정
<p>안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다.<span style="width:100px; height:100px; display: inline-block; background-color: yellow"> 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요.</span> 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. 안녕하세요. 아이작입니다. </p>
인라인 태그의 성질을 억지로 바꿔서 width와 height 속성을 부여하면 틀이 깨지게 된다.
[HTML] 인라인 태그와 블럭 태그
📌인라인 태그와 블럭 태그 모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다! 예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다.
isaac-christian.tistory.com
인라인 태그와 블럭 태그에 대해서는 추가 설명은 위 글을 참고하도록 하자.
🍁안쪽, 바깥쪽 여백 (padding, margin)
padding
padding은 테두리 안쪽 여백이다.
태그의 테두리와 콘텐츠 영역 사이의 거리를 의미한다.
margin
margin은 테두리 바깥쪽 여백이다.
태그의 테두리와 외부 태그 사이의 거리(객체와 객체 사이의 거리)를 의미한다.
padding과 margin의 사용
<body>
<h1>박스 모델</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<hr>
<span id="span1">영역1</span>
<span id="span2">영역2</span>
<span id="span3">영역3</span>
</body><style>
.box{
border: 10px solid black;
width: 200px;
height: 200px;
}
#box1 {
background-color: tomato;
padding: 10px;
}
#box2 {
background-color: gold;
padding: 20px 10px 10px 20px;
}
#box3 {
background-color: cornflowerblue;
margin: 10px;
}
#span1 {
background-color: tomato;
}
#span2 {
background-color: gold;
padding: 50px;
}
#span3 {
background-color: cornflowerblue;
margin: 30px;
}
</style>
다른 상자들은 테두리와 텍스트 사이에 간격이 없다. 그런데 padding을 부여하자 간격이 생기고 상자가 커졌다.
테두리와 컨텐츠 사이, 안쪽에 여백이 생기는 것을 padding이라고 부르며, padding도 border와 같이 방향을 지정하여 사용할 수 있다.
상자에 margin값을 지정하면 이동한 것처럼 보인다. 그래서 margin을 콘텐츠 배치를 할 때 잘 사용한다.
padding과 margin의 적용
padding은 블럭 태그는 잘 적용이 된다. 그리고 인라인 태그는 좌우는 적용이 되긴 하지만 상하는 적용이 되지 않는다.
마찬가지로 margin도 인라인 태그는 좌우는 적용이 되는데, 상하는 적용이 되지 않는다.
그래서 인라인 태그에 padding과 margin 속성을 주는 경우는 거의 없다.
실제 콘텐츠 크기
<style>
.box{
border: 10px solid black;
width: 200px;
height: 200px;
}
#box1 {
background-color: tomato;
}
#box2 {
background-color: gold;
padding: 30px;
margin: 50px;
}
#box3 {
background-color: cornflowerblue;
}
#span1 {
background-color: tomato;
}
#span2 {
background-color: gold;
}
#span3 {
background-color: cornflowerblue;
}
</style>
border, padding, margin 속성에 따라 콘텐츠의 위치가 변할 수 있음을 항상 인지해야 한다.
체크박스를 통해 상자2의 margin이 50x50, border가 10x10, padding이 30x30, 콘텐츠가 200x200, 총크기가 280x280인 것을 확인할 수 있다.
크기 지정의 중복
.box{
border: 10px solid black;
width: 200px;
height: 200px;
}
#box1 {
background-color: tomato;
width: 300px;
}
상자 1의 width를 아이디 선택자와 클래스 선택자가 중복하여 지정하였다.
개발자도구에서 width가 지워져 있는 것을 볼 수 있다.
<body> 태그의 margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
border: 1px solid red;
}
body {
border: 1px solid orange;
}
#menu {
border: 10px solid black;
}
</style>
</head>
<body>
<div id="menu">menu</div>
</body>
</html>
body의 margin값으로 여백이 들어가 있어 문서를 보는데 답답함이 덜하다.
그런데 디자인을 하기 위해서 메뉴를 만들어 두었을 때, 이 여백이 마음에 들지 않을 수 있다.
body {
margin:0;
}
이때 body의 margin을 0으로 하면 화면에 꽉 차는 메뉴를 만들 수 있다.
🍁주소록 만들기
박스 모델을 이용해 주소록을 만들어보도록 하자.
HTML 작업
HTML에서는 틀을 만드는 작업만 한다.
<body>
<h1>주소록</h1>
<!-- table#list.table -->
<table id="list" class="table">
<!-- tr>th#col$*5 -->
<tr>
<th id="col1">번호</th>
<th id="col2">이름</th>
<th id="col3">나이</th>
<th id="col4">성별</th>
<th id="col5">주소</th>
</tr>
<!-- (tr>(td.cell1{$$})+(td.cell2>lorem1)+(td.cell3{$$})+(td.cell4{남자})+(td.cell5>lorem5))*20 -->
<tr>
<td class="cell1">01</td>
<td class="cell2">Lorem.</td>
<td class="cell3">01</td>
<td class="cell4">남자</td>
<td class="cell5">Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td class="cell1">02</td>
<td class="cell2">Libero.</td>
<td class="cell3">02</td>
<td class="cell4">남자</td>
<td class="cell5">Consequuntur laboriosam voluptatem veniam praesentium.</td>
</tr>
<tr>
<td class="cell1">03</td>
<td class="cell2">Atque.</td>
<td class="cell3">03</td>
<td class="cell4">남자</td>
<td class="cell5">Aut distinctio provident exercitationem atque.</td>
</tr>
<tr>
<td class="cell1">04</td>
<td class="cell2">Eum.</td>
<td class="cell3">04</td>
<td class="cell4">남자</td>
<td class="cell5">Repudiandae sequi corrupti quam alias.</td>
</tr>
<tr>
<td class="cell1">05</td>
<td class="cell2">Vero.</td>
<td class="cell3">05</td>
<td class="cell4">남자</td>
<td class="cell5">Sed maiores nobis voluptatum veritatis!</td>
</tr>
<tr>
<td class="cell1">06</td>
<td class="cell2">Autem?</td>
<td class="cell3">06</td>
<td class="cell4">남자</td>
<td class="cell5">Explicabo doloremque dignissimos laudantium enim.</td>
</tr>
<tr>
<td class="cell1">07</td>
<td class="cell2">Architecto.</td>
<td class="cell3">07</td>
<td class="cell4">남자</td>
<td class="cell5">Nam aspernatur omnis consequatur quaerat?</td>
</tr>
<tr>
<td class="cell1">08</td>
<td class="cell2">Deserunt.</td>
<td class="cell3">08</td>
<td class="cell4">남자</td>
<td class="cell5">Est nam eligendi inventore dicta?</td>
</tr>
<tr>
<td class="cell1">09</td>
<td class="cell2">Repudiandae!</td>
<td class="cell3">09</td>
<td class="cell4">남자</td>
<td class="cell5">Quam debitis cum dolorem corporis.</td>
</tr>
<tr>
<td class="cell1">10</td>
<td class="cell2">Delectus.</td>
<td class="cell3">10</td>
<td class="cell4">남자</td>
<td class="cell5">Aut quae porro omnis est!</td>
</tr>
<tr>
<td class="cell1">11</td>
<td class="cell2">Veritatis!</td>
<td class="cell3">11</td>
<td class="cell4">남자</td>
<td class="cell5">Cupiditate nemo a et doloremque.</td>
</tr>
<tr>
<td class="cell1">12</td>
<td class="cell2">Neque!</td>
<td class="cell3">12</td>
<td class="cell4">남자</td>
<td class="cell5">Fugiat aspernatur nisi fugit distinctio.</td>
</tr>
<tr>
<td class="cell1">13</td>
<td class="cell2">Eaque.</td>
<td class="cell3">13</td>
<td class="cell4">남자</td>
<td class="cell5">Odio libero quibusdam maiores consectetur.</td>
</tr>
<tr>
<td class="cell1">14</td>
<td class="cell2">Unde.</td>
<td class="cell3">14</td>
<td class="cell4">남자</td>
<td class="cell5">Exercitationem sapiente distinctio corrupti amet.</td>
</tr>
<tr>
<td class="cell1">15</td>
<td class="cell2">Delectus?</td>
<td class="cell3">15</td>
<td class="cell4">남자</td>
<td class="cell5">Esse enim recusandae et quos.</td>
</tr>
<tr>
<td class="cell1">16</td>
<td class="cell2">Placeat?</td>
<td class="cell3">16</td>
<td class="cell4">남자</td>
<td class="cell5">Repudiandae facere laborum aperiam eius?</td>
</tr>
<tr>
<td class="cell1">17</td>
<td class="cell2">Obcaecati?</td>
<td class="cell3">17</td>
<td class="cell4">남자</td>
<td class="cell5">Assumenda reiciendis debitis et dolorum?</td>
</tr>
<tr>
<td class="cell1">18</td>
<td class="cell2">Tenetur?</td>
<td class="cell3">18</td>
<td class="cell4">남자</td>
<td class="cell5">Recusandae voluptatum cum adipisci! Laudantium.</td>
</tr>
<tr>
<td class="cell1">19</td>
<td class="cell2">Accusantium.</td>
<td class="cell3">19</td>
<td class="cell4">남자</td>
<td class="cell5">Animi aspernatur aliquid labore repudiandae.</td>
</tr>
<tr>
<td class="cell1">20</td>
<td class="cell2">Quae.</td>
<td class="cell3">20</td>
<td class="cell4">남자</td>
<td class="cell5">Provident tempora iure rem natus.</td>
</tr>
</table>
</body>
[Client] Emmet (Zen-Coding), Lorem Ipsum
🍁Emmet (Zen-Coding) CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성할 수 있도록 하는 기능이다. 다양한 개발 도구(Eclipse, VS CODE..)에서 Emmet 기능을 지원하고 있다. 주로 #, ., [], {}, +, >, $ 등의
isaac-christian.tistory.com
Emmet과 Lorem Ipsum을 이용하여 테이블을 만들었다.
CSS 작업
HTML에서 내용을 채우고 CSS에서 서식 작업을 한다.
HTML에서 서식 작업을 하지 않는 이유 중 하나는 이중 작업을 했는데 서식을 수정해야 할 경우, HTML에서 서식을 수정해야 할지, CSS에서 서식을 수정해야 할지 모르는 경우가 생길 수 있기 때문이다.
border 지정
<style>
#list {
border: 1px solid gray;
border-collapse: collapse;
}
#list th, #list td {
border: 1px solid gray;
}
</style>
border-collapse를 separate와 collapse로 설정할 수 있다.
separate는 테두리를 구분하고, collapse는 테두리를 병합한다.
여백 및 크기 지정
<style>
#list {
border: 1px solid gray;
border-collapse: collapse;
width: 800px;
}
#list th, #list td {
border: 1px solid gray;
padding: 5px;
}
#list #col1 { width: 50px; }
#list #col2 { width: 100px; }
#list #col3 { width: 50px; }
#list #col4 { width: 60px; }
#list #col5 { width: auto; }
</style>
테이블에 padding 속성으로 여백을 만들어 보기 편하게 한다.
그리고 th(table header)의 너비를 고정하였다. 이를 다 더했을 때 테이블의 너비인 800px이 되어야 한다. 마지막 col5의 width값은 auto로 지정했는데, 이는 남은 값을 넣으라는 의미이다.
색상 지정 및 정렬
#list th {
background-color: #CCC;
}
#list .cell1, #list .cell2, #list .cell3, #list .cell4 {
text-align: center;
}
#list .cell5 {
padding-left: 10px;
}
색상을 지정하고 정렬까지 해주면 간단한 주소록 완성이다.
