위치관련 속성
- box-sizing
이속성은 박스의 너비를 정하는 데 그의 기준을 설정하는 것입니다.
content-box와 border-box속성값이 있는데 content-box속성은 패딩같은 것을 빼고 콘텐츠(내용)만을 박스의 너비로 지정합니다. 하지만 border-box는 패딩같은 것을 콘텐츠에 합쳐서 너비를 정합니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <style> #box_size1{ box-sizing:content-box; width:200px; height:300px; display:inline-block; border:2px dotted red; margin:15px; padding:20px; } #box_size2{ box-sizing:border-box; width:200px; height:300px; display:inline-block; border:2px solid blue; margin:15px; padding:20px; } </style> <body> <div id="box_size1"></div> <div id="box_size2"></div> </body> </html> | cs |
결과↓
content-box border-box
위와같이 contect-box는 200px와 높이300px로 나오고 border-box는 너비 156+양쪽패딩(40)+양쪽border(4)=200이 되고 높이도 이와 마찬가지로 됩니다.
float
말그대로 어떤 요소를 다른 요소위에 떠있게 만듭니다.
right값과 left값과 none값이 있습니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <style> #float1{ float:left; border:2px solid red; width:200px; height:300px; margin:15px; background-color:white; } #float2{ float:right; border:2px dotted blue; width:200px; height:300px; margin:15px; background-color:gray; } #common{ border:2px solid red; width:200px; height:300px; background-color:skyblue; } </style> <body> <div id="float1">box1</div> <div id="float2">box2</div> <div id="common">box3</div> </body> </html> | cs |
결과↓
- clear
이것은 float를 해제하는 것입니다.
속성값은 left right both none이 있으며
left는 왼쪽 right 오른쪽 both 양쪽 none은 그냥 none을 말합니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <style> #float1{ float:left; border:2px dotted red; width:200px; height:300px; margin:20px; } #clear{ clear:both; border:2px double black; width:200px; height:300px; margin:20px; } </style> <body> <div id="float1"></div> <div id="clear"></div> </body> </html> | cs |
결과 값↓
위와같이 소스코드에서는 float가 있는데도 불구하고 clear로 인해 해제되어 있습니다.
- position
이것은 배치방법을 정하는것입니다. 예를들어 요소를 예전요소와 흐름에 맞게 배치하거나 그럴때에 사용합니다.
종류 |
설명 |
relative |
저번요소에 흐름에 맞게 배치할 수 있습니다. |
absolute |
원하는 위치에 배치할 수 있습니다. |
fixed |
브라우저 창에 위치를 맞춥니다. (예:스크롤을 내려도 같이 내려오게 할 때) |
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!doctype html> <html lang="ko"> <head> <meta charset="ko"> <title>html문서</title> </head> <style> #float{ float:right; border:2px solid gray; width:200px; height:300px; } #position1{ float:right; position:relative; right:50px; top:40px; border:2px double black; width:200px; height:300px; } #position2{ position:absolute; top:100px; right:50px; border:2px dashed red; width:200px; height:300px; } #position3{ position:fixed; top:500px; right:200px; width:200px; height:200px; border:2px dotted blue; } </style> <body> <div id="float"></div> <div id="position1"></div> <div id="position2"></div> <div id="position3"></div> <!--br여러개를 써서 브라우저 창을 내려보시면 fixed속성의 값을 볼 수 있습니다.--> </body> </html> | cs |
결과 값↓
- visibility
이것은 요소를 숨기거나 숨기지 않는 것을 지정하는 것입니다.
※숨겨도 위치는 남아있어 배치에 영향을 줍니다.
속성 값으로는 visible과 hidden값 등으로 visible은 기본값 hidden은 숨기기 입니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <style> #visibility{ visibility:hidden; } div{ border:2px dotted red; width:200px; height:300px; } </style> <body> <div id="visibility"></div> </body> </html> | cs |
결과 값으로는 글이 사라져있는 것을 볼 수 있습니다.
여기까지 포스팅을 마치도록 하겠습니다.
'HTML' 카테고리의 다른 글
| CSS 선택자 (1) | 2018.01.26 |
|---|---|
| 표 관련 스타일 (0) | 2018.01.23 |
| 마진과 패딩 (0) | 2018.01.12 |
| 박스모델과 테두리 관련 스타일 (0) | 2018.01.10 |
| 그라데이션 효과 만들기 (0) | 2018.01.08 |