[CSS-02]박스모델, 테이블 box model, table

2019. 06. 17 필기

 

박스모델(Box Model) 이란? : 이미지 또는 텍스트 출력을 위한 사각형 모양의 영역

 

< 박스 관련 스타일속성 >

margin : 박스모델과 박스모델 사이 간격 >> px(고정) %(유동)
margin: 00px >>  top&&bottom&right&left
margin: 00px 00px; >> top&bottom right&left
margin: 00px 00px 00px 00px; >> top right bottom left
>>>> 구역의 네 변 중에서 하나의 마진만 조정하고 싶으면 margin-bottom: 00px; 과 같은 형식으로 선언

 

border : 박스모델의 외곽선
border-width : 외곽선 굵기 설정
--- px 키워드(thin, medium, thick)
--- border-width-top / border-width-right / border-width-bottom
border-color : 외곽선 색상 설정
--- border-color-top / border-color-right / border-color-bottom

 

padding : 박스모델과 출력대상 사이의 간격
=> px(고정) 백분율(유동) - margin 스타일 속성값과 동일
--- padding-top / padding-right / padding-bottom / padding-left
--- width : 박스모델의 폭 설정 > px % (픽셀, 백분율)
--- height : 박스모델의 높이 설정

 

border-radius : 박스모델 모서리를 둥글게 출력
border-bottom-left-radius: 00px;

 

box-shadow : 박스모델의 그림자 효과 >> 가로 세로 범짐 확장 색상
--- inset 속성값을 사용하면 박스모델 안으로 그림자 효과 발생

 

< 레이아웃 >

출처 http://dustwell.com/div-span-inline-block.html

박스모델의 블록레벨과 인라인레벨 : ㅇㅇ

block level 박스모델과 인라인 레벨의 박스모델에 의해 브라우저에 자동 배치 -레이아웃
block level : 라인을 모두 차지하는 박스모델
=> div, hn, p, ul, ol, li, table, tr, fieldset, form 등
inline level : 라인을 모두 차지하지 않는 박스모델
=> span, img, a, object, sup, sub, input, textarea, label, button

 

display : 박스모델의 배치 관련 스타일 속성
=> none : 박스모델 미배치
=> block : 박스모델을 블럭 레벨로 설정하여 배치
=> inline : 박스모델을 인라인 레벨로 설정하여 배치
=> inline-block : 박스모델이 블럭레벨일 경우 인라인 레벨로 설정하여 배치
=> table : 박스모델을 테이블로 설정하여 배치
=> table-row : 박스모델을 행으로 설정하여 배치
=> table-ceil : 박스모델을 열로 설정하여 배치
==> 블럭 레벨의 박스 모델 >> 라인 하나에 목록이 하나씩 출력
==> 인라인 레벨의 박스 모델 >> 라인 하나에 이미지가 여러개 출력

 

float : 블록레벨을 그냥 출력하게 되면 한 줄에 한 개씩 출력되지만, float기능을 이용하면 한 줄에 배치할 수 있다.
(반드시 width속성 사용) --- 목록출력할 때 많이 사용
=> none(기본), left(왼쪽에서 오른쪽 방향으로 배치), right(오른쪽에서 왼쪽 방향으로 배치)
--- float 기능을 이용하면 말 그대로 요소들이 흐르기 때문에, clear 속성을 사용해 해결할 수 있다.
--- clear : float 스타일 속성을 초기화 => none(default), left, right, both

중첩되어있는 박스모델 중에 어떤 것이 가장 위로 오게 하는지가 관건이다.

position : 박스모델의 배치 방법 관련 스타일 속성
=> static(기본) : 박스모델의 자동 배치 - 박스모델의 중첩 미발생
=> relative : 자동 배치 후 좌표값을 이용하여 재배치 - 박스모델의 중첩 발생
--- 좌표값은 top(위:음수 또는 아래:양수) 및 left(왼쪽:음수 또는 오른쪽:양수) 스타일 속성을 이용하여 박스모델의 이동

position 속성의 속성값이 static인 경우 박스모델은 중첩되지 않는다.
position 속성의 속성값이 static이 아닌 경우 박스모델은 중첩될 수 있다.
=> 박스모델의 작성 순서대로 중첩 배치

z-index : 중첩된 박스모델에 대한 배치 순서 관련 스타일 속성
=> 정수값 : 정수값이 큰 박스모델을 위에 배치
=> absolute : 좌표값을 이용하여 배치(도큐먼트 영역의 왼쪽 상단 기준) - 박스모델의 중첩 발생


=> fixed : 좌표값을 이용하여 배치(도큐먼트 영역의 왼쪽 상단 기준) - 박스모델의 중첩 발생
-- absolute 속성값과 유사하지만 박스모델이 출력영역을 벗어나도 스크롤 미발생

border 속성에 outset 속성값을 이용할 경우 외곽선 명암 효과 부여 
border-spacing : 외곽선의 간격 설정에 대한 스타일 속성

empty-cells : 출력내용이 없는 셀에 대한 처리 관련 스타일 속성
=> show(기본 - 셀 출력), hide(셀 미출력)

caption-side : 표설명(caption)의 출력 위치 관련 스타일 속성
=> top(기본), bottom, left, right

display: none; --- 미배치(필요할 때만 배치)
visibility: visible/hidden; --- 배치(존재하지만 보이지 않음)

 

<테이블>

<style type="text/css">

table {
    border: 1px solid black;
    width: 300px;
    height: 100px;
    table-layout: fixed;
    word-break: break-all;
    margin: 0 auto;
    border-spacing: 10px;
}

</style>

table :

width : 테이블 폭 설정 - 셀의 폭이 균일하게 자동 설정
 => 셀의 출력대상에 맞게 폭이 균일하지 않게 설정

height : 테이블의 높이 설정 - 셀의 높이가 균일하게 자동 설정
=> 셀의 출력대상에 맞게 높이가 균일하지 않게 설정

table-layout : 테이블 셀의 폭 관련 스타일 속성
=> auto(기본 - 셀의 폭 자동 변경), fixed(셀의 폭 고정 변경)
=> 셀의 출력내용(단어)이 셀을 벗어나 출력 가능

word-break : 테이블 셀의 출력내용(단어) 관련 스타일 속성
=> keep-all(기본 - 셀을 벗어난 출력), break-all(셀을 벗어나지 않게 출력 - 자동 줄바꿈)

margin : border 속성에 outset 속성값을 이용할 경우 외곽선 명암 효과 부여 
border-spacing : 외곽선의 간격 설정에 대한 스타일 속성

 

<style type="text/css">
th, td {
    border: 1px solid black;
    height: 30px; 
    padding: 5px;
    width: 100px;
    text-align: center;
    empty-cells: hide;
}
</style>

th 또는 td >> 셀(Cell - 열) : 표(테이블)에서 내용을 출력하기 위한 영역
셀의 크기는 출력대상(이미지 크기 또는 텍스트 문자갯수와 크기)에 의해 폭과 높이가 자동 설정
=> 테이블의 폭과 높이도 셀에 의해 자동 설정

border-collapse : 외곽선 중첩 관련 스타일 속성
=> separate(기본 - 구분), collapse(병합)

width : 셀의 폭 변경 - 모든 셀의 폭이 균일하게 변경 
=> 셀의 폭보다 텍스트가 많으면 자동 줄바꿈 
=> 셀의 폭보다 출력내용이 크면 셀의 폭이 자동 변경 
=> 테이블 전체 폭 자동 변경

height : 셀의 높이 변경 - 출력대상의 높이가 크면 셀의 높이가 자동 변경
=> 테이블의 전체 높이 자동 변경

empty-cells : 출력내용이 없는 셀에 대한 처리 관련 스타일 속성
=> show(기본 - 셀 출력), hide(셀 미출력) 

 

<style type="text/css">
caption {
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: 5px;
	caption-side: bottom;
}
</style>

caption : 표 설명

caption-side : 캡션의 출력 위치
=> top(기본), bottom, left, right

 

<style type="text/css">
.cellstyle {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>

white-space : 

overflow : 셀 밖으로 나간 문자에 대한 처리
>> visible / hidden / scroll / auto / inherit 설정 가능

text-overflow : 
>> clip / ellisis / inherit 설정 가능