각 태그들의 부피감
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 박스모델</title>
<style>
/*
block level element
*/
h1{
border-width: 5px;
border-color: red;
border-style: solid;
}
/*
inline element
*/
a{
border-width: 5px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<h1>CSS 박스모델</h1>
모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서
<a href="https://www.w3schools.com/css/css_boxmodel.asp">박스모델</a>이란
디자인과 레이아웃을 말할 때 사용합니다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다.
여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다.
</body>
</html>
태그라는 같은 문법이지만 웹페이지에서 차지하는 자리가 다른 이유
- block level element (화면 전체를 쓴다.)
<h1> 제목 태그는 다른 콘텐츠와 같은 라인을 사용하지 않고 줄 바꿈이 된다.
- inline element (화면 부분을 쓴다.)
<a> 링크태그는 본인 콘텐츠의 크기만큼만 자리를 차지하고 다른 콘텐츠와 같은 라인에 존재한다.
- 각 태그의 종류에 따라 특성에 맞게 기본값이 설정 돼있다. 하지만 기본 설정은 'display' 속성을 통해 바꿀 수 있다.
* 줄 전체 사용 display:block;
* 콘텐츠 값만큼 사용 display:inline;
* 화면에서 보이지 않음 display:none;
각 태그가 차지하는 자리의 부피감 알아보기
- 테두리를 만드는 속성인 'border'를 사용해서 테두리를 만들어 본다. 이때 테두리의 두께, 색, 선을 다 선택해 줘야 한다.
* 테두리 두께 border-width: 5px;
* 테두리 색 border-color: red;
* 테두리 선 스타일 border-style: solid; | dotted; | dashed; | double; | groove; | ridge; | inset; | outset;
중복되는 코드 지우는 법
<style>
h1, a{
border:5px solid red;
}
</style>- 중복되는 코드는 쉼표를 통해 지우자(선택자, 선택자{ } )
- 중복되는 속성도 쉼표를 통해 지우자(속성:속성값, 속성값, 속성값;)
- border 속성값은 보통 width, style, color순으로사용한다.
박스모델
h1{
border:5px solid red;
padding:20px;
margin:20px;
width:200px;
}
- 박스모델을 통해서 여백, 테두리, 패딩, 및 실제 콘텐츠가 차지하고 있는 부피를 조절 할 수 있다.
- 'width'속성을 통해 태그의 콘텐츠가 차지하고는 있는 기본 설정 값을 조절 할 수 있다.
(h1은 block level element인데 200px만큼으로 줄였다.)
웹페이지 검사
- 웹페이지 검사 창 : 웹페이지 우클릭 - 검사(Ctrl + Shift + i)
- 웹페이지에서 각 태그가 가지고 있는 element(실제 콘텐츠), padding(테두리 안 쪽 여백), border(테두리), margin(테두리 바깥 쪽 여백)을 눈으로 확인 할 수 있다.
박스모델 활용
<head>
<meta charset="utf-8">
<title>CSS 박스모델</title>
<style>
body{
margin: 0;
}
h1{
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ul{
border-right: 1px solid gray;
width: 230px;
margin:0;
padding:20px;
}
</style>
</head>
<body>
<h1>CSS 박스모델</h1>
<ul>
<li style="color:red">CSS 박스모델</li>
<li>element(실체 콘텐츠)</li>
<li>padding(테두리 안 쪽 여백)</li>
<li>boder(테두리)</li>
<li>margin(테두리 바깥 쪽 여백)</li>
</ul>
<p>모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서
<a href="https://www.w3schools.com/css/css_boxmodel.asp">박스모델</a>이란
디자인과 레이아웃을 말할 때 사용합니다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다.
여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다.</p>
</body>
-'border' 속성은 테두리의 특정 방향만 따로 설정할 수도 있다.
* 테두리 위 border-top
* 테두리 아래 border-bottom
* 테두리 왼쪽 border-left
* 테두리 오른쪽 border-right
- 테두리와 박스모델의 각 크기들을 조절해서 웹페이지를 디자인 할 수 있다.
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS] Media query(미디어 쿼리) (0) | 2020.12.02 |
|---|---|
| [CSS] Grid(그리드) (0) | 2020.12.01 |
| [CSS] 선택자들 (0) | 2020.11.21 |
| [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성) (0) | 2020.11.20 |
| [CSS] CSS의 기본 문법 (0) | 2020.11.20 |
