1. 박스모델 (BoxModel)
1. 박스모델 (BoxModel)
- 박스모델 (BoxModel) : 문장 또는 이미지를 출력하기 위해 태그를 사용하여 생성한 사각형 모양의 영역
- vertical-align : 세로 방향 정렬 관련 스타일 속성 (높이 변경시에만 사용)
=> 속성값 : top (기본), bottom, middle 등
2. 박스모델 종류
- 블럭 레벨의 박스모델 : 하나의 라인을 모두 사용하는 박스모델
=> div, h1~h6, ul, ol, li, p, table, tr, form 등
- 인라인 레벨의 박스모델 : 하나의 라인을 같이 사용하는 박스모델
=> span, img, a, input, select, textarea, label, button 등
- 블럭 레벨의 박스모델과 인라인 레벨의 박스모델로 구분하여 브라우저에 자동 배치
- 블럭 레벨의 박스모델의 후손으로 모든 박스모델 배치 가능
- 인라인 레벨의 박스모델의 후손으로 블럭 레벨의 박스모델 배치 불가능
3. margin
- margin : 박스모델과 박스모델의 간격 관련 스타일 속성
- 속성값 : px (절대값 - 고정크기), % (상대값 - 유동크기)
=> margin-top, margin-right, margin-bottom, margin-left
margin: 15px 15px 15px 15px;
margin: 15px 15px;
margin: 15px;
4. padding
- padding : 박스모델 외곽선과 콘텐츠 (Content) 영역의 간격 관련 스타일 속성
- 속성값 : px (절대값 - 고정크기), % (상대값 - 유동크기)
=>padding-top, padding-right, padding-bottom, padding-left
5. box-shadow
- box-shadow : 박스모델 그림자 관련 스타일 속성
- 속성값 : 가로 세로 범짐 확장 색상
- inset 속성값을 사용하여 박스모델 내부로 그림자 효과 제공
2. border
1. border-style
- border-style : 박스모델 외곽선의 모양 관련 스타일 속성
- 속성값 : none (기본), solid (실선), dotted (점선), double (이중선) 등
=> border-style-top, border-style-right, border-style-bottom, border-style-left
2. border-width
- border-width : 박스모델 외곽선의 굵기 관련 스타일 속성
- 속성값 : px, 키워드 (thin, medium, thick 등)
=> border-width-top, border-width-right, border-width-bottom, border-width-left
3. border-color
- border-color : 박스모델 외곽선의 색 관련 스타일 속성
=> border-color-top, border-color-right, border-color-bottom, border-color-left
4. border-radius
- border-radius : 박스모델 외곽선 모서리 관련 스타일 속성
- 속성값 : px, %
=> 박스모델 외곽선 모서리에 원을 그려 둥굴게 표현
5. border-collapse
- border-collapse : 박스모델의 외곽선 중첩 관련 스타일 속성
- 속성값 : separate (중첩 외곽선 구분), collapse (중첩 외곽선 병합)
3. display
1. display
- display : 박스모델 배치 관련 스타일 속성
- 속성값 : none (미배치), block (블럭 레벨 배치), inline (인라인 레벨 배치, 폭과 높이 지정 불가능), inline-block (인라인 레벨 배치, 폭과 높이 지정 가능), table, table-row, table-cell 등
- 블럭 레벨의 박스모델은 하나의 라인에 박스모델이 하나만 출력
- 인라인 레벨의 박스모델은 하나의 라인에 박스모델이 여러개 출력
2. float
- float : 컨테이너 역활의 박스모델에 아이템 역할의 박스모델을 왼쪽 또는 오른쪽 위치부터 차례대로 배치 하기 위한 스타일 속성
=> float 스타일이 적용된 박스모델 다음에 위치한 박스모델에도 스타일 적용
- 속성값 : none (기본), left, right
- clear : float 스타일로 설정된 배치 관련 스타일을 초기화 처리하기 위한 스타일 속성
=> 속성값 : left, rigth, both
3. flex
- 컨테이너 역할의 박스모델에 display 속성값을 flex로 설정하는 경우 Flex Containter로 처리되어 아이템 역할의 박스모델을 한쪽 방향의 일정한 간격으로 자동 배치
- flex-direction : Flex Containter에서 Flex Item를 배치하는 방향을 설정하는 스타일 속성
=> 속성값 : row (기본), column, row-reverse, column-reverse
- flex-wrap : Flex Containter에서 Flex Item를 배치에 대한 줄바꿈 처리에 대한 스타일 속성
=> 속성값 : nowrap (기본), wrap (아래 줄바꿈 처리), wrap-reverse (위 줄바꿈 처리)
- flex-flow : flex-direction과 flex-wrap을 동시에 설정하는 스타일 속성
- justify-content : Flex Containter에서 Flex Item을 정렬하기 위한 스타일 속성
=> 속성값 : flex-start (기본), flex-end, center, space-between, space-around, space-evenly
4. position
- position : 박스모델 배치 관련 스타일 속성
- 속성값 : static (기본)
=> 박스모델 자동 배치 (박스모델의 중첩 배치 불가능)
- 속성값 : relative
=> 박스모델 자동 배치 후 top 속성과 left 속성을 사용하여 박스모델을 이동하여 배치 (박스모델의 중첩 배치 가능)
- 속성값 : absolute
=> 박스모델 배치 전 top 속성과 left 속성을 사용하여 박스모델을 이동하여 배치 (박스모델의 중첩 배치 가능)
- 속성값 : fixed
=> absolute 속성값 동일 (스크롤 미제공)
5. 배치 순서
- z-index : 박스모델 배치 순서 관련 스타일 속성
- 속성값 : 정수값 (정수값이 큰 박스모델을 위에 배치)
- 박스모델이 중첩될 경우 박스모델이 배치되는 순서에 의해 중첩 배치
4. animation
1. transition
- 트렌지션 효과(Transition Effect) : 시간 경과에 따른 박스모델의 스타일 변화 기능 제공
- transition-property : 트렌지션 효과를 적용할 스타일을 속성값으로 설정
- transition-duration : 트렌지션 효과의 제공 시간을 속성값으로 설정
- transition-timing-function : 트렌지션 효과의 제공 속도를 속성값으로 설정
=> 속성값 : linear (기본), ease-in, ease-out, ease-in-out, cubic-bezier 함수 등
- transition-delay : 트렌지션 효과의 지연 시간을 속성값으로 설정
2. animation
- animation-name : 박스모델에 적용될 애니메이션의 이름을 속성값으로 설정
- animation-duration : 박스모델에 적용될 애니메이션의 지속시간을 속성값으로 설정
- animation-iteration-count : 박스모델에 적용될 애니메이션의 반복 횟수를 속성값으로 설정
=> 속성값 : 정수, infinite (무제한)
- animation-direction : 박스모델에 적용될 애니메이션의 진행 방향을 속성값으로 설정
=> 속성값 : normal (정방향), reverse (역방향), alternate (정방향 > 역방향), alternate-reverse (역방향 > 정방향)
- @keyframes : 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성
=> 상태 (백분율 또는 키워드)에 따른 CSS 스타일을 정의하여 애니메이션 효과 제공
=> 시작상태 (from)와 종료상태 (to)를 포함하여 2개 이상의 상태 작성
