반응형
2020-12-28 수업내용 정리 겸 복습
CSS 박스 모델
모든 HTML 요소는 박스 형태의 영역을 지니고 있음
이러한 박스는 기본적으로 내용, 안쪽 여백 바깥 여백 테두리등으로 구성
내용 content, 안쪽여백 padding, 바깥여백 margin, 테두리 border 등으로 구성
브라우저는 박스의 기본 크기와 속성, 위치를 기반으로 화면에 자리잡음
width/height 속성:
요소의 너비와 높이를 지정할 때 사용
단, 콘텐츠 영역보다 콘텐츠가 크면 영역을 넘쳐서 표시됨
사용 가능 단위는 px, %
margin/padding 속성:
콘텐츠를 둘러쌓고 있는 4개 방향( top/right/bottom/left )에 대해 지정가능
margin, padding은 1 갯값, 2 갯값, 3 갯값, 4 갯값을 이용해서 지정할 수 있음
한쪽면, -top, -right, -bottom, -left 속성을 이용해서
세부적으로 margin이나 padding을 조절할 수 있음.
자동 수평 정렬 :
margin의 left/right 속성을 auto라고 선언하면
해당 요소를 브라우저 중앙에 배치할 수 있음
테두리 :
border-style, border-color, border-width 등의 속성을 가짐
padding/margin과 마찬가지로 단축 표기식으로 선언할 수 있음
border : 선두께 선종류 선색깔 형태로 정의해야 함
border-style : dotted, dashed, solid, doubled...
border-width : thin, thick, medium, 수치 값,...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>박스속성</title>
<style>
#box1 { width: 300px; background: yellow; padding: 25px; border: 5px solid navy; margin: 25px;}
#box2 { width: 300px; background: yellow; padding: 25px; border: 5px solid navy; margin: 25px; height: 100px;
overflow: hidden;} /*overflow 넘치는부분을 hidden 숨겨버렸따뤼 ~*/
#box3 { width: 300px; background: yellow; margin: 25px; border: 5px solid navy;
padding: 25px; /* 4개의 방향을 단일값으로 선언 */
padding : 25px 25px; /*2개의 방향(상하/좌우)을 단일값으로*/
padding : 25px 25px 25px; /*3개의 방향(상/좌우/하)을 단일값으로 선언*/
padding : 5px 10px 15px 25px; /*4개의 방향(상/우/하/좌)을 단일값으로 선언*/
padding-top: 5px;
padding-right: 20px;
padding-bottom: 45px;
padding-left: 65px;
}
#box4 { width: 300px; margin: 5px auto;}
#box5 { width: 300px; border : 5px outset red;
border-top-style: dotted;
border-right-style: dashed;
border-left-style: double;
border-bottom-style: solid;
border-style: dotted dashed double solid;
/*점선-더긴점선-두줄 -굵음*/
border-top-color: yellow;
border-right-color: darkorange;
border-bottom-color: orchid;
border-left-color: darkred;
border-color: orange green navy lime;
border-width: thin thin thick thick;
}
</style>
</head>
<body>
<h1>박스모델</h1>
<div id="box1">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div id="box2">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div id="box3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div id="box4">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div id="box5">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
</body>
</html>
반응형
'JAVA & APP :국비지원 학원 복습 > CSS' 카테고리의 다른 글
| CSS : 06 Background (0) | 2020.12.29 |
|---|---|
| CSS : 05 Display (0) | 2020.12.28 |
| CSS : 03 HTML과 CSS 연동하기 (0) | 2020.12.28 |
| CSS : 02 Unit (0) | 2020.12.28 |
| CSS: 01 selector (0) | 2020.12.28 |