HTML
HTML(CSS박스)
글로리.
2020. 7. 6. 10:52
박스의 기본크기를 결정하는 특성
가로축 | 부모를 가득 채움 |
세로축 | 자신이 포함하고 있는 내용만큼 설정됨. 내용이 없을 경우, 높이 X |
박스의 크기를 구성하는 속성의 종류
속성 | 설명 | 적용값 |
width | 내용 영역의 폭 | px단위, %단위 |
height | 내용 영역의 높이 | px단위, %단위 |
border | 박스의 테두리 | 굵기 종류 색상 |
padding | 테두리와 내용 영역사이의 여백 | 여백사이즈에 대한 px단위 |
border속성
border : 굵기 종류 색상;
색상 : 16진수 색상값 (#ff00ff), rgb함수(rgb(255,255,255))
border 속성(테두리 종류)
종류 | 설명 | 예시 |
none | 투명한 테두리 | |
solid | 직선 | ㅡ |
dotted | 점선 | ······························· |
dashed | 끊긴선 | ------------------ |
border 속성(위치)
속성 | 설명 | 적용값 |
border-top | 박스의 상단 테두리 | 굵기 종류 색상 |
border-right | 박스의 우측 테두리 | 굵기 종류 색상 |
border-bottom | 박스의 하단 테두리 | 굵기 종류 색상 |
border-left | 박스의 왼쪽 테두리 | 굵기 종류 색상 |
padding 속성 - 내용 영역과 border사이의 여백의 크기
padding : px값;
값 | 설명 |
padding-top | 상단 여백의 크기를 px단위로 지정 |
padding-right | 우측 여백의 크기를 px단위로 지정 |
padding-bottom | 하단 여백의 크기를 px단위로 지정 |
padding-left | 왼쪽 여백의 크기를 px단위로 지정 |
padding 속성 - 지정 값 갯수에 따른 구분
갯수 | 설명 |
1개의 값 | 상,하,좌,우 모두 같은 크기의 여백으로 지정 ( 예) padding : 10px;) |
2개의 값 | 첫번째 값은 상/하, 두번째 값은 좌/우 값 지정. ( 예) padding : 10px 15px;) |
4개의 값 | 첫번째 값은 상단여백, 그 이후는 시계방향으로 적용 ( 예) padding : 3px 5px 7px 10px;) |
중첩된 <div>간의 크기 관계
- width / height값은 한번 부여되면 고정되며 내용이 늘어날 경우 자동으로 확장 되지 않는다.
- 자식박스의 전체크기 (border + padding + width + height)는 부모박스의 전체크기를 넘을 수 없다.
- 자식이 부모를 가득 채우려면 비율(100%)을 사용하면 안되고 border와 padding를 뺀 px값을 직접 입력해야한다.
auto값의 사용
자식박스가 부모박스안에 위치 시키려면 px계산을 하면 되지만 귀찮다 그럴때 auto를 사용한다
속성 | 설명 |
width:auto; | 부모박스의 width에서 자식박스의 padding과 border를 뺀 나머지값을 자동으로 계산하여 width에 적용. |
height:auto; | 자신이 포함하고 있는 내용 영역에 대한 높이 만큼 height를 설정. |
화면 가득채우는 박스 만들기
<!-- 스타일 시트 -->
<style type="text/css">
/* 박스를 화면 가득 채우기 */
div {
background-color: #f60;
width: 100%;
height: 100%;
}
/* body 태그에 기본적으로 적용된 padding, margin을 off시킨다 */
body {
padding: 0;
margin: 0;
}
/* 부모를 기준으로 크기를 갖기 때문에, body와 html에게도 크기 설정 */
html,
body {
width: 100%;
height: 100%;
}
</style>
Overflow
부모박스에서 자식박스가 벗어날 경우 처리방법.
Overflow 값 종류
값 | 설명 |
visible | 기본값. 그대로 벗어나게 적용 |
scroll | 벗어나는 내용에 대해 스크롤바 처리. |
hidden | 벗어나는 내용이 표시되지않도록 버림. |
auto | 내용이 벗어나지 않으면 그대로 나오지만 벗어나면 scroll처리, 추천 |
박스 크기에 대한 최대/최소값 지정
박스 크기의 가변적인 설정
속성 | 설명 |
min-width | 박스의 최소 가로 폭 지정, 내용이 없는경우 최소값을 유지하지만 내용이 벗어날 경우 확대됨. |
max-width | 박스의 최대 가로 폭 지정, 최소 값에서 내용이 많아 지면 확대되다가 지정한 값이 되면 그 이상 확대 안됨. |
min-height (중요) |
박스의 최소 세로 폭 지정, 내용이 없는경우 최소값을 유지하지만 내용이 벗어날 경우 확대됨. |
max-height | 박스의 최대 세로 폭 지정최소 값에서 내용이 많아 지면 확대되다가 지정한 값이 되면 그 이상 확대 안됨. |
* 보통 브라우저 사용 시 가로로 늘어나는 경우는 드물기 때문에 width에 대한것은 거의 사용하지 않음.