웹개발 기초 6주차

배치 기능이 있는 CSS3 프로퍼티들

: display, position, left, right, top, bottom, float, z-index, visibility, overflow

 

블록박스, 인라인박스

블록박스 ex) div //display:block

- 항상 새 라인 시작

- 블록 박스 내에만 배치

- 옆에 다른 요소 배치 불가

- width, height로 크기 조절

- padding, border, margin 조절 가능

인라인박스 ex) span //display:inline

- 새라인에서 시작 못함(라인 안(inline)에 있음)

- 모든 박스 내 배치 가능

- 옆에 다른 요소 배치 가능

- width와 height로 크기 조절 불가능

- margin-top, margin-bottom 조절 불가능

 

display 프로퍼티는 블록박스와 인라인박스의 박스 유형 제어갈 가능 display:inline-block

 

position 프로퍼티 

normal flow(default) : 웹 페이지에 나타난 순서대로 HTML 태그 배치

->position 프로퍼티로 normal flow 무시 가능

position 프로퍼티 배치 방법

정적 배치 - position : static(default)

상대 배치 - position : relative

절대 배치 - position : absolute

고정 배치 - position : fixed

유동 배치 - float : left 혹은 float : right

 

style 시트에서 ex) #down:hover{ ... }이런식으로 지정하면 #down이라는 id를 가진 블록에 마우스가 올라가면 동작

 

z-index 값이 클수록 앞으로 배치

 

overflow : 주어진 영역의 크기보다 content가 클 때의 처리방법

- visible : 다 출력 (짤리면 어색)

- hidden : 박스 넘으면 잘림

- scroll : 박스에 항상 스크롤 붙여줌

- auto : 내용이 짧으면 스크롤 x 박스보다 길면 스크롤 생성

 

CSS3로 리스트 꾸미기 : list-style

list-style-type : 마커 타입 지정

list-style-image : 마커 이미지 지정

list-style-position : 마커 출력 위치 지정(아이템 영역 or 영역 밖)

list-style : 앞 3프로퍼티 값 한 번에 단축 프로퍼티

 

padding : 위 오른쪽 아래 왼쪽;

text-align : 텍스트 정렬 (left, right, center, justify)

 

border : 표 테두리

border-collapse : collapse; 표와 셀의 테두리 합치기

 

tbody tr:nth-child(even) :짝수 지정

 

폼 요소 마우스 처리

- 마우스 올라올 때 : hover

- 포커스 받을 때 : focus

 

애니메이션 작업

- animation-name : 애니메이션 이름;

- animation-duration : 시간;

- animation-iteration-count : 애니메이션 반복 횟수;

 

@keyframes 이름{ }

from(시작) : 0%, to(끝) : 100%로 수정 가능

0% 30% 50% 100% 

 

transition (전환) : 간단한 애니메이션

- form, to만 가짐

transition-property : 전환 속성 사용할 속성 이름

transition-duration : 전환 효과의 지속시간 설정

transition-timeing-function : 타이밍 함수 지정

transition-delay : 전환 효과 대기시간 설정

 

transform (변환) : 텍스트나 이미지를 회전, 확대를 통해 기하하적인 모양으로출력 (각도단위 deg,시계방향 회전)

위치 이동

translate(x,y) translateX(n) translateY(n)

확대/축소

scale(w,h) scaleX(n) scaleY(n)

회전

rotate(angle)

기울임

skew(x-angle,y-angle) skewX(angle) skewY(angle)