[CSS] 고급활용

1. 박스모델

content 콘텐츠

padding 내부 여백

border 테두리/경계선

margin 외부 공백

 

 

	콘텐츠	패딩	테두리	여백
크기 관련 프로퍼티	width height	padding-top padding-right padding-bottom padding-left	border-top-width border-right-width border-bottom-width border-left-width	margin-top margin-right margin-bottom margin-left
크기 관련 단축 프로퍼티		padding	border-width	margin
스타일 관련 프로퍼티			border-top-style border-right-style border-bottom-style border-left-style
스타일 관련 단축 프로퍼티			border-style
색 관련 프로퍼티		태그(콘텐츠)의 배경색	border-top-color border-right-color border-bottom-color border-left-color
색 관련 단축 프로퍼티			border-color
전체 단축 프로퍼티			border

 

 

2. 박스 배치

{position : static | relative | absolote | fixed}

• static (정적 배치) : 웹 페이지가 작성된 순서대로 HTML 태그의 출력 위치를 정하는 방식. 크기는 콘텐츠의 크기에 따라 브라우저에 의해 정해진다. left, top, bottom, right, width, height 프로퍼티의 값이 위치에 영향을 주지 않는다.
• relative (상대 배치) : 기본 위치(normal flow에 따라 HTML 태그가 출력되는 위치)에서 left, top, bottom, right 프로퍼티의 값만큼 이동한다.
• absolote (절대 배치) : 문서 내에서 절대 위치. left, top, bottom, right 프로퍼티 값으로 정하며, 이 값들은 부모 태그 안에서 상대좌표이다.
• fixed (고정 배치) : 화면 내에서 절대 위치. left, top, bottom, right 프로퍼티의 값으로 뷰포트(viewport, 브라우저의 보이는 영역)의 특정 위치에 고정시키는 배치방식이다.

• min-width, min-height : 크기의 하한을 지정
• max-width, max-height : 크기의 상한을 지정

 

{z-index : x}

수직으로 쌓는 순서를 지정하는 프로퍼티. 값이 클수록 위에 쌓인다.

 

{float : right | left}

특정 콘텐츠를 주변 콘텐츠와 별도로 분리하여 배치할 때 태그를 오른편이나 왼편에 항상 배치시킬 수 있다. 광고나 공지 등에 적합.

 

 

{overflow : visible | hidden | scroll | auto}

주어진 태그의 크기를 넘어가는 경우 콘텐츠를 자를 것인지 말 것인지 지정하는 프로퍼티. 블록 태그에만 적용된다. width와 height 프로퍼티에 박스 크기가 설정되어 있어야 한다.

• visible : 콘텐츠가 잘리지 않고 태그 영역을 넘어 출력
• hidden : 콘텐츠를 태그 크기로 잘라 넘어가는 것은 보이지 않음, 스크롤바 없음
• scroll : 스크롤바를 항상 부착하여 콘텐츠 출력
• auto : 콘텐츠가 박스 높이(height)보다 넘치면 스크롤바 자동 생성

 

 

 

3. 박스 레이아웃

둥근 모서리 테두리, {border-radius : 0px 20px 40px 60px}

시계방향 순으로 반지름 적용

 

박스 그림자, { box-shadow : h-shadow  v-shadow  blur-radius  (spread-radius)  color  |none|inset }

• spread-radius : 그림자 크기 (선택사항. 디폴트 0)
• inset : 음각 박스로 보이게 박스 상단 안쪽(왼쪽과 위쪽)에 그림자 형성

 

박스 투명도, { opacity : 0.0 (투명) ~ 1.0 (불투명) }

 

4. 박스 애니메이션

전환, { transition : 전환 프로퍼티 전환시간 }

:hover 를 이용하면 마우스가 올라갔을 때 전환 효과를 시작시킬 수 있다.

 

변환, { transform : 변환 함수}

변환함수		설명
위치이동	translate(x, y)	태그를 X축, Y축으로 x, y만큼 이동
	translateX(n)	태그를 X축으로 n만큼 이동
	translateY(n)	태그를 Y축으로 n만큼 이동
확대 / 축소	scale(w,h)	태그의 폭과 높이를 각각 w, h배 만큼 조절.
	scaleX(n)	태그의 폭을 n배 만큼 조절
	scaleY(n)	태그의 높이를 n배 만큼 조절
회전	rotate(angle)	태그를 angle 각도 만큼 시계 방향 회전
기울임	skew(x-angle, y-angle)	태그를 X축과 Y축을 기준으로 각각 x-angle, y-angle 각도만큼 기울임 변환
	skewX(angle)	태그를 X축을 기준으로 angle 각도만큼 기울임
	skewY(angle)	태그를 Y축을 기준으로 angle 각도만큼 기울임