front-end/HTMI CSS
CSS margin, padding, border, position
Hoon0211
2023. 6. 7. 12:03
728x90
1. margin
테두리를 기준으로 바깥쪽 여백
- margin-top : 10px > 위쪽만 10px
- margin-botton : 10px > 아래쪽만 10px
- margin-top,bottom,left,right
<body>
<div id ="box">내용</div>
</body><style>
#box {
width: 100px;
height: 100px;
background-color: mediumaquamarine;
border: 3px solid black;
margin-top: 100px;
}
</style>
- body를 0px로 변경할 경우
body{
margin: 0px;
}
웹 페이지에 여백 없이 나온다.
* margin 겹침 현상
형제 관계인 요소의 margin 값이 중첩되면, 더 큰 값을 가진 margin영역으로 병합 되는 현상
2. padding
테두리 기준으로 요소의 안쪽 여백을 지정하는 속성
테두리와 내용(content) 사이의 여백
크기가 커진 것처럼 보인다.
<style>
div{
width: 200px;
height: 200px;
background-color: lavender;
}
</style>
<style>
div{
width: 200px;
height: 200px;
background-color: lavender;
padding: 50px;
}
</style>
3. border
border - radius : 테두리 모서리 궁들게 만드는 속성
div{
width: 100px;
height: 100px;
background-color: gray;
border: 10px solid purple;
border-radius : 50%;
}
- 특정 테두리만 변경
| top left |
top right |
| bottom left |
bottom right |
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
4. Position
자유자재로 요소의 위치를 배치하는 속성
| static | 태그가 위에서 아래대로 순서대로 배치(기본값) |
| relative | 초기 위치 상태에서 상하좌우로 위치 이동 |
| absolute | 절대 위치 좌표를 설정 |
| fixed | 화면을 기준으로 절대 위치 좌표 설정 |
728x90