※ 박스 모델(Box Model)
- 모든 HTML 요소는 박스 모양으로 구성되어 있고 이를 박스 모델이라고 부른다. 박스모델을 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분한다.
내용(content)
- 텍스트나 이미지가 들어가 있는 박스의 실질적인 내용 부분이다.
패딩(padding)
- 내용과 테두리 사이의 간격(안쪽 여백)이다. padding-top, padding-right, padding-bottom, padding-left으로 나뉜다.
padding: 모든 방향의 패딩 속성을 한꺼번에 설정한다, 위부터 시작해서 시계방향으로 설정한다.
padding: a b c d;
상: a, 우: b, 하: c, 좌: d
padding: abc;
상: a, 좌우: b, 하: c
padding: ab;
상하: a, 좌우: b
padding: a;
상하좌우: a
테두리(border)
- 내용(content)와 패딩(padding) 주변을 감싸는 테두리이다.
| border-width | 테두리의 두께를 설정한다. |
| border-style | 테두리의 모양이다. 테두리를 다양한 모양으로 설정할 수 있다. |
| border-color | 테두리의 색상을 설정한다. |
| border | 모든 테두리 속성을 한꺼번에 설정한다. |
마진(margin)
- 테두리와 이웃하는 요소 사이의 간격(바깥쪽 여백)이다. 마진은 눈에 보이지 않는다.
세로 겹침 현상
- 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하게 된다.
border를 테이블의 테두리로 생각하면 쉽게 생각할 수 있다. content는 테이블에 입력된 값이고, padding은 테이블의 테두리(border)와 값(content) 사이의 거리이다. 그리고 margin은 테이블의 테두리(border) 주변 여백이다.
박스 사이징(box-sizing)
- 기본적으로 width, height 값에 padding이나 border 영역은 포함되지 않는다. 만약 width가 100%로 설정된 요소의 경우 padding이나 border 속성을 추가할 수 없다.
| content-box | 기존 계산법이다. width와 height에 padding과 border를 포함하지 않는다. |
| border-box | width와 height에 padding, border를 포함한다. |
둥근 테두리 만들기
- border radius를 통해서 박스 모델의 테두리를 둥글게 만들 수 있다.
border-radius:
top-left-x top-right-x bottom-right-x bottom-left-x /
top-left-y top-right-y bottom-right-y bottom-left-y
대각선 위치의 값이 서로 같을 때
border-raius : top-left-x top-right-x / top-left-y top-right-y
모든 모서리의 x, y축 값이 전부 다 같을 때
border-radius: xy
<head>
<title>둥근 테두리</title>
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
}
.radius1 {
border: 3px solid red;
border-radius: 100px 100px 50px 50px / 30px 30px 100px 100px;
}
.radius2 {
border: 3px solid blue;
border-radius: 100px / 50px;
}
.radius3 {
border: 3px solid green;
border-radius: 100px 40px / 50px 30px;
}
.radius4 {
border: 3px solid purple;
/* border-radius: 10px; */
border-radius: 50%;
}
</style>
</head>
<body>
<h2>둥근 테두리</h2>
<div class="radius1"></div>
<div class="radius2"></div>
<div class="radius3"></div>
<div class="radius4"></div>
</body>
테이블 테두리 설정(border-collapse)
- 테이블 셀들 간의 공백을 어떻게 처리할지를 결정하는 속성이다. separate(기본, 셀들을 분리), collapse(셀들 사이를 합쳐서 공백을 없앤다)로 구성된다.
CSS Display
- 웹 페이지의 레이아웃을 결정하는 속성이다.
| block | 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지한다. |
| inline | 새로운 라인에서 시작되지 않고 앞의 요소에 이어서 배치한다. |
| inline-block | block과 inline의 성질을 모두 띠고 있다. width, height, padding, margin, line-height를 모두 적용할 수 있다. 요소를 가로로 나열한다. |
| none | 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라진다. (미배치) |
| hidden | 웹 페이지에서 해당 요소가 보이지 않지만 배치는 된다. |
* 웹 사이트 이미지 따오기
- f12로 개발자 도구를 열고 네트워크를 클릭한다. 네트워크를 클릭한 후 페이지를 새로고침하고 이미지 부분을 클릭하면 웹 사이트에 있는 이미지를 다운로드 받을 수 있다.
'CSS' 카테고리의 다른 글
| 국비 수업 29일 차(22.11.11.) - flex 1 (0) | 2022.11.14 |
|---|---|
| 국비 수업 28일 차(22.11.10.) - CSS position (0) | 2022.11.11 |
| 국비 수업 26일 차(22.11.08.) - CSS 텍스트 (0) | 2022.11.10 |
| 국비 수업 26일 차(22.11.08.) - CSS 컬러 (0) | 2022.11.09 |
| 국비 수업 25일 차(22.11.07.) - CSS 선택자 (0) | 2022.11.08 |
