그림에서처럼 박스모델이 각각의 요소가 나누어져있다.
content안에는 입력내용이 들어간다
<style media="screen">
div {
border :10px solid #000000;
padding: 30px;
margin : 50px;
}
</style>
</head>
<body>
<div class="">
box model
</div>
</body>이경우 div를 박스모델로 만들고 각각의 요소의 값이 입력되어있다
- border : 선의 굵기 10px, 색상 #000000
- padding : border와 contant사이의 여백 30px
- margin : border와 box모델 사이의 바깥 여백값 50px
출력값 + 개발자도구
개발자 도구로 확인하면 각 요소의 출력값이 어떻게 나왔는지 정확히 확인할수 있다.
Border
- 보더의 속성
- boder-width : 두께
- thin/ midium /thick /그 외에도 em rem px값을 지정할수 있다 (%, 정수 단위 사용불가)
- boder-style : 종류
- none / hidden / dotted / dashed / solid / double /groove / ridge / inset / outset
- none : 표시하지 않는다
- solid : 실선으로 나타낸다
- double : 2중선으로 표현한다
- dotted : 점선으로 나타낸다
- boder-color : 색상
- 색상 명사 입력 16진법 입력 등등등
- boder-width : 두께
- 축약형 속성
- border:1px solid #000; - 단축속성
- border-left : 6px solid red; - 왼쪽에만 속성 지정
- border-width : 6px; -보더 두깨 지정
- border-width : 6px 3px;
- 6px: 위 아래 두께
- 3px: 좌우 두께
- border-width: 6px 3px 4px;
- 6px: 위 두께
- 3px: 좌우 두께
- 4px : 아래 두께
- border-width: 6px 3px 4px 1px;
- 6px : 위
- 3px : 우
- 4px: 아래
- 1px : 좌
padding
안쪽 여백을 padding이라고 한다
- padding 속성 : length / initial / inherit
- padding-top : 위쪽 여백
- padding-right : 오른쪽 여백
- padding-left : 왼쪽 여백
- padding-bottom : 아래여백
- 이 여백들은 border와 마찬가지로 px등의 단위로 입력한다
- padding을 축약 선언시 순서
-
위, 오른쪽, 아래, 왼쪽 - padding: 10px 20px 30px 40px 로 선언한다
div.a{ border : 10px solid black; padding: 10px 20px 30px 40px; }
-
그림과 같이 상 우 하 좌 순서대로 여백이 입력된것을 확인할수 있다.Margin
요소의 바깥여백
- 속성 : length / auto / initial / inherit
- margin-top : 0;
- 위 여백의 값 0
- margin-right: 10px
- 오른쪽 여백값 10px
- margin-bottom : 20px
- 아래 여백값 : 20px
- margin-left: 30px
- 왼쪽 여백 : 30px
- margin-left : auto;
- 브라우저가 자동계산
- margin: auto;
- 가로축 중앙 정렬(요소에 width값 필요)
- 상하의 값은 적용되지 않는다 무조건 가로축을 기준으로 한다
div.b{
width:500px;
border : 10px solid black;
margin:0 auto;
}
위와같이 width의 값을 입력해주면 auto의 값이 중앙을 찾아 자동으로 입력되고
정확한 값은 검사를 사용해 개발자도구를 보면 확인할수 있다
- margin의 특징 : margin collapse(마진 병합)
- margin의 top값과 bottom값이 겹쳐질때 더 큰값이 우선시되고 작은 값은 사라진다
- 예를 들어 앞 뒤 두개의 box에서 top: 50px bottom : 50px가 됐다면 합쳐서 100px의 여백시 생기지 않고 50px의 여백만 남는다.
- top : 100px bottom : 50px의 여백이 겹쳐졌다면 top 100px의 여백만 남게된다
- margin의 top값과 bottom값이 겹쳐질때 더 큰값이 우선시되고 작은 값은 사라진다
- 위처럼 top과 bottom의 여백이 합쳐진것을 볼수있다
- 값이 사라진 것이 아니라 겹쳐져 있는 것이다.Margin & padding
| 양수 | 음수 | auto | 단위 | |
|---|---|---|---|---|
| margin | o | o | o | px, % |
| padding | o | x | x | px, % |
div.e{
width:500px;
margin:0px -30px;
padding:-30px;
}출력값
margin은 -30이 입력되었지만 padding의 -30값은 취소선으로 입력되지 않은걸 확인할수 있다.
이런식으로 선언할수 없는 값은 출력될때 무시되며 취소선으로 그 값이 적용되지 않은걸 확인가능하다
- %로 선언할때는 왼쪽의 값을 기준으로 계산되며 %이기때문에 화면크기를 조정하면 여백의 값도 자동 조정된다
축약형 선언 법
- 요소 : 전체값
- 예) border : 2px; - 이 경우 상하좌우 전체값이 2px이 된다
- 요소 : 상하값 좌우값
- 예)padding : 2px 3px; - 이 경우 상하값 2px 좌우값이 3px가 된다
- 요소 : 상값 좌우값 하값
- 예)margin : 2px 3px 1px; - 이 경우 상값 2px 좌우값 3px 하값 1px가 된다
- 요소 : 상값 우값 하값 좌값
- 예)border : 2px 3px 1px 5px; - 이 경우 상2px 우 3px 하 1px 좌 5px가 된다
Width
요소의 가로값을 결정한다
- 속성 : auto / value / initial / inherit
- width : auto; - 기본값
- width: 100px; -길이
- width: 100%; -퍼센트
- 화면에 움직임에 따라 값이 틀려진다
박스의 사이즈와 width값의 사이즈는 다르게 측정된다
- width값은 오로지 content의 값만을 계산한다
- 전체 박스의 사이즈는 border padding의 값까지 포함해서 계산된다.
- 예를 들어
.parent{
width: 300px;
border: 10px solid blue;
}
.child{
width:50% ;
border : 10px solid red;
padding : 20px;
}경우 child의 박스 크기를 구할때
- width는 parent width의 절반이기에 150px이다
- borderd값이 각각 10px 좌우의 값 20px이다
- padding의 값이 20px로 좌우값이 40px이다
- 결과적으로 150 + 20 + 40 으로 박스의 가로 값은 210이 된다
Height
요소의 높이값
- 속성 : auto / length / initial / inherit
- height : auto - 기본값
- height : 100px - 길이
- height : 50% - 퍼센트
- %를 값으로 정의 할 때는 width와 달리 부모 속성같은 %의 기준이 되어줄 값이 반드시 필요하다
- 길이계산
.parent{ border: 10px solid blue; } .child{ height : 100px; border : 10px solid red; padding : 20px; }- width와 같다
- 높이값이 100px + border가 위 아래 10+10px + padding이 위아래 20+20px = 160px가 된다
- width와 같다
box model정리
- 박스 모델은 content padding border margin으로 구성되어있다
- 박스의 요소들의 크기를 입력할때는 상 우 하 좌 순으로 입력한다
- margin의 여백은 겹칠경우 여백을 각각 주는것이 아니라 여백이 겹처진것으로 계산되어 큰 값의 여백만큼이 벌어진다, 나머지 값은 겹쳐진것이지 없어진것이 아니다
- 박스의 사이즈는 content값과 padding border의 값을 합친크기로 결정된다
- margin은 음수값으로도 선언할수있다 음수값으로 선언되면 박스 크기가 잘리게 된다
실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-4.HTML
hello world