HTML&CSS 정리(5) 표 레이아웃 속성 ~ 2차원 변환 함수

※ 표(테이블) 레이아웃
- 셀 안의 내용에 따라 셀 너비 조절

 

※ 표 레이아웃 속성
1)  table-layoyut: auto; 
- 내용 분량에 따라 셀 너비가 자동으로 조절(기본 값)
2) table-layout: fixed;
- 내용 분량과 관계 없이 셀 너비를 고정
3) table-layout: initial;
- 변경된 테이블 레이아웃을 기본값 상태(auto)로 설정
4) table-layout: inherit;
- 부모 요소의 값을 상속 받아 셀 너비를 결정

 

※ 불투명도 속성
- opacity : 숫자(0~1);

 

※ 가시성 속성(visibility)
- 어떤 요소로 보이게 하거나 반대로 보이지 않게 할 때 사용

 

※ 디스플레이 속성(display)
- 가시성 속성과 반대로 요소가 차지하는 공간도 사라짐
- block형식, inline-block형식
: margin속성, padding 속성을 상하좌우 네 방향으로 지정할 수 있음
- inline형식 : margin 속성, padding 속성을 왼쪽과 오른쪽으로만 지정할 수 있음

 

1) none : 화면에 보이지 않음
2) block : 블록 박스 형식으로 지정
3) inline : 인라인 박스 형식으로 지정
4) inline-block : 블록과 인라인 중간 형태로

 

※ 형식 변환 속성
1) Block 형식
- 다음 요소가 항상 새로운 행에서 시작, 화면의 최대 너비만큼 차지
- block 형식, inline-block 형식
: margin, padding 속성을 상하좌우 네 방향으로 설정 가능

 

2) Inline 형식
- 다음 요소가 이전 요소 바로 뒤에 배치되며 최소한의 너비만 가짐
: margin, padding 속성을 왼쪽과 오른쪽으로만 설정 가능

 

 

※ 백그라운드 속성(그레디언트)
- background나 background-image 속성 이용
- 선형과 원형 두 가지 형태가 존재
- 색상 번짐 방향 설정
1) to top : 0deg, 360deg
2) to right : 90deg
3) to bottom : 180deg
4) to left: 270deg

 

※ 2차원 변환 함수
1) translate : 평행 이동 변환
2) rotate() : 회전 변환
3) scale() : 크기 변환
4) skewX() : X축 기울기 변환
5) skewY() : Y축 기울기 변환
6) skew() : X, Y축 기울기 변환
7) matrix() : 2차원 행렬 구조 변환