HTML(CSS박스)

박스의 기본크기를 결정하는 특성

가로축	부모를 가득 채움
세로축	자신이 포함하고 있는 내용만큼 설정됨. 내용이 없을 경우, 높이 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에 대한것은 거의 사용하지 않음.