CSS (table, border, box-model, positioning)
CSS
테이블 & 테두리 속성
<table> 엘리먼트의 관련 속성은 테이블의 너비나 높이를 지정하고, Cell 내부 내용을 정렬
테두리 관련 속성은 테두리 모델을 설정하여, 테두리 스타일과 너비 등을 지정
- table-layout : table layout을 설정 (2)
- width : table의 너비를 지정 (1)
- height : table의 높이를 지정 (1)
- text-align : cell 내부 내용을 수평 정렬 (1)
- vertical-align : cell 내부 내용을 수직 정렬 (1)
- border-collapse : 분리된 테두리 모델, 통합된 테두리 모델을 설정 (2)
- border-style : 테두리 스타일 설정 (1)
- border-width : 엘리먼트의 4개 테두리 너비를 설정 (1)
- border-color : 엘리먼트의 테두리 색을 설정 (1)
- border : 테두리 관련 속성을 한번에 지정하는 단축형 속성 (1)
table-layout
table-layout 속성 사용법은 element { table-layout : auto(default) | fixed }
table cell 의 width, height 고정 여부를 지정
<table> 태그의 첫 번째 <td>에 지정하거나, <colgroup>과 <col> 요소를 통해 table-layout 지정
cell의 width를 지정하지 않는 경우 데이터가 cell을 넘치는 경우 사용
border-collapse & border-spacing
테두리 모델은 분리된 테두리 모델과 통합된 테두리 모델로 분류
border-collapse 속성 사용법은 element { border-collapse: separate(default) | collapse }
cell은 개별 테두리를 가지며, border-spacing은 분리된 테두리 모델에서의 인접 cell 사이 거리 지정
border-spacing 속성 사용법은 element { border-spacing: 수평길이 수직길이 } 이며, 길이 값은 양수를 사용
border-style
border-style 속성 사용법은 element { border-style: none | solid | hidden | ... }
값이 1개일 때 모든 면에 적용, 값이 2개일 때 1번 째는 top, bottom에, 2번째는 right, left에 적용
값이 3개일 때 1번째 값은 top에 2번째 값은 right, left에, 3번째 값은 bottom에 적용
값이 4개일 때 top, right, left, bottom 순으로 적용
border-width
border-width 속성 사용법은 element { border-width: thin | medium | thick | 길이 값 }
테두리 너비 설정에 사용하며, 미리 정의 된 thin, medium, thick 중 선택 가능
1 ~ 4개의 값을 가징 수 있으며, 속성 값 적용 규칙은 border-style과 같다
border-style이 border-width보다 앞에 정의되어야 한다.
border-color
border-color 속성 사용법은 element { border-color: color | transparent }
테두리에 color 값을 적용
1 ~ 4개의 값을 가질 수 있으며, 속성 값 적용 규칙은 border-style과 같다.
border-color가 border-width보다 앞에 정의되어야 한다.
border
border 속성은 약식 표현 속성으로, 한 번에 테두리 관련 속성들을 적용
모든 4개의 테두리에 같은 너비, 스타일, 색상을 설정
border-width, border-style, border-color 순으로 작성
margin, padding의 약식 속성과 딜리 4개의 테두리에 서로 다른 값을 설정하지 못한다.
박스모델
CSS는 모든 엘리먼트를 여러 겹의 상자로 둘러 쌓여 있다고 가정
컨텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구분
컨텐츠를 정렬 또는 위치를 지정하기 위해 padding, margin 속성을 활용
박스모델을 활용하여 다양한 형태의 테이블이나 버튼을 직접 작성하여 활용
margin
마진(margin) 속성은 box의 마진영역(margin area) 너비를 지정
값이 1개일 때 모든 면에 적용, 값이 2개일 때 1번째는 top, bottom, 2번째는 right, left에 적용
값이 3개일 때 1번째 값은 top에, 2번째 값은 right, left에, 3번째 값은 bottom에 적용
값이 4개일 때는 top, right, bottom, left 순으로 적용
CSS2.0 부터 인접된 두 개 이상의 박스들의 인접마진이 통합되어 단일마진을 형성한다.
블록레벨(block level)의 경우, 두 개 이상의 인접 수직 마진은 통합되나, 수평마진은 통합되지 않는다.
유동된(floated)박스와 다른 박스의 수직 마진은 통합되지 않는다.
위치 값(position)이 absolute와 relative로 위치된 박스의 마진들은 통합되지 않는다.
padding
패딩(padding)의 속성은 box의 패딩영역(padding area) 너비를 지정
1 ~ 4개의 값을 가질 수 있으며, 속성 값 적용 규칙은 margin과 같다.
가운데 정렬
margin 속성을 사용하여 컨텐츠를 브라우저 화면의 가운데에 정렬되도록 설정 가능
기존 HTML에서는 algin 속성을 가운데로 설정 했으나, CSS에서는 여백을 조절하는 방법을 이용
사용법은 element { margin: 0 auto }, 첫 번째 값은 상, 하 여백, 두 번째 값은 좌, 우 여백
속성값 auto는 현재 엘리먼트를 중심으로 상, 하 또는 좌, 우의 여백을 규등하게 분배(가운데 정렬 효과)
100% 높이를 유지하는 레이아웃
엘리먼트의 최소 높이를 보장하기 위해 min-height 속성을 같이 사용하여 레이아웃의 높이를 100%로 유지 가능
<html> <body> 엘리먼트 하위에 100% 높이를 유지하는 <div> 엘리먼트를 사용
브라우저 화면 크기를 늘리더라도 컨텐츠는 항상 브라우저의 100% 높이를 유지
포지셔닝
포지셔닝(positioning)은 시작적인 측면에서 HTML의 가장 중요한 요소
HTML 내 부분 문서의 위치를 지정하거나 객체(Object)의 보임과 안보임(visibility)를 다룬다.
엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정
정적인 HTML을 Javascript를 이용하여 동적(Dynamic)으로 만들기 위한 가장 기본적인 속성
width, height
length(길이 값) : px, pt, cm, mm, in 등 길이단위 사용
%(백준율) : 상위 block에 대한 백분율 단위로 상위 block의 크기가 바뀌변 자신의 크기도 자동으로 변경
auto(width의 경우) : 100%, 자신의 상위 block이 허용하는 width 크기만큼 채운다.
auto(height의 경우) : 0%, height를 결정하는 요인은 bolck box속의 내용물의 크기가 된다.
position
static : 기본 값(default)으로 일반적인 내용물의 흐름, 상단(top)과 좌측(left)에서의 거리를 지정할 수 없다.
relative : HTML 문서에서의 일반적인 내용물의 흐름을 말하지만, top, left 거리를 지정
absolute : 자신의 상위 box속에서의 top, left, right, bottom등의 절대적인 위치를 지정
fixed : 스크롤(scroll)이 일어나도 항상 화면상의 지정된 위치에 있다.
top, left, bottom, right
top, left, bottom, right 속성은 엘리먼트의 위치를 지정하기 위해 사용
자신이 포함되어 있는 박스 속에서의 top, left, bottom, right에서의 거리를 지정하는 속성
사용법은 element { top: 길이 값(length: px, cm) | 백분율(%) | auto }
각 <div> 엘리먼트의 position 속성이 absolute로 설정되어 있어 절대적인 위치 지정 가능
overflow
overflow 속성은 상위 엘리먼트에 속한 내용이 엘리먼트의 크기보다 클 경우 어떻게 처리할 것인지 설정
속성값을 visible로 설정하면 box속의 내용을 모두 표시, 내용의 크기에 따라 box의 가로, 세로 폭이 늘어남
속성값을 hidden으로 설정하면 box의 width, height를 지정했을 경우, 지정된 범위를 넘치는 내용은 보이지 않는다.
속성값을 auto로 설정하면 지정된 범위를 넘치는 내용은 스크롤바를 이용하여 표시
float
float 속성은 박스가 화면의 어느 위치에 배치할 것인지 설정하기 위해 사용
속성값을 left로 설정하면 그림이나 박스가 왼쪽에 배치되고, 글씨는 박스의 오른쪽으로 흐른다.
속성값을 right로 설정하면 그림이나 박스가 오른쪽에 배치되고, 글씨는 박스의 왼쪽으로 흐른다.
속성값을 none으로 설정하면 그림이나 박스가 왼쪽에 배치되고, 글씨는 첫 줄만 박스의 오른쪽으로 흐른다.
clear
clear 속성은 float 속성이 가지고 있는 값을 초기화 하기 위해 사용
속성값을 left, right로 설정하여 왼쪽 또는 오른쪽 float 속성값을 취소할 수 있다.
속성값을 both로 설정하여 양쪽 모두의 float 속성값을 취소할 수 있따.
속성값을 none으로 설정하면 clear를 설정하지 않은 것과 같다.
clip
clip 속성은 이미지 사이즈가 클 경우 이미지를 일부 가려서 표시하기 위해 사용
속성값으로 rect()에 명시된 사각형 크기만큼 가려서 화면에 표시
rect(top, right, bottom, left) 순으로 픽셀 값을 설정
auto로 설정하면 이미지를 가리지 않고 모두 보여줌
visibility
visibility 속성은 엘리먼트를 화면에 보이거나 숨기기 위해서 사용
속성값을 visible로 설정하면 화면에 표시하고 hidden으로 설정하면 화면에 숨김
hidden으로 설정된 엘리먼트는 화면에 표시되지는 않지만 면적은 차지하고 있다.
화면에 숨기고 면적도 차지하지 않도록 하기 위해서는 display 속성을 사용
z-index
z-index 속성은 여러 개의 엘리먼트를 화면에 쌓아서 표시하기 위해 사용
사용법은 element { z-index: 정수 값(양수, 음수 가능) }
z-index 값이 큰 엘리먼트를 위에 표시
z-index 값을 auto로 설정하면 부모 엘리먼트의 레벨과 같은 값으로 설정되며 이 값이 기본값이다.