css기본문법
CSS BOXMODEL
css의 박스모델
레이아웃을 제작하는데 있어 굉장히 중요한 개념으로 이 챕터를 이해못하면
아무것도 할수없음
01. width,height
속성값 | 속성설명 |
width : 800px | 요소의 가로 800px |
height : 100% | 요소의 세로 부모의 100% |
min-width : 1024px | 요소의 최소가로 1024px |
min-height : 200px | 요소의 최소세로 200px |
max-width : 414px | 요소의 최대가로 414px |
max-height: 591px | 요소의 최대높이 591px |
✔ BOXMODEL
- 배경이미지 모눈 한개의 크기는 10px 입니다. (모눈의 눈금을 보고 박스의 크기를 확인하세요)
- 빨간 박스의 너비는 600px
- 초록색 테두리는 20px
- 박스의 총 높이는 100px
조건에 맞는 박스를 만들어보세요
02. padding 🔗박스모델보기
- 속성값 1개 작성
- 속성값 2개 작성
- 속성값 3개 작성
- 속성값 4개 작성
03. margin 🔗박스모델보기
04. border 🔗박스모델보기
04. border-radius
05. border-image
06. box-sizing
07. box-shadow
| 프로퍼티 값 | 단위 | 설명 | 생략 |
|---|---|---|---|
inset | inset 키워드를 지정하면 그림자가 요소 안쪽에 위치한다. | 가능 | |
px | 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다 | ||
px | 그림자를 텍스트의 아래로 지정값만큼 이동시킨다 | ||
px | 그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. (양수) | 가능 | |
px | 그림자를 더 크게 확장시킨다. (음수, 양수) | 가능 | |
color | 그림자의 색상을 지정한다 | 가능 |
선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }
08. tranform
| transform function | 설명 | 단위 |
|---|---|---|
요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. | ||
요소의 위치를 X축으로 x만큼 이동시킨다. | ||
요소의 위치를 Y축으로 y만큼 이동시킨다. | ||
요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다. | 0과 양수 | |
요소의 크기를 X축으로 x배 확대 또는 축소 시킨다. | 0과 양수 | |
요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다. | 0과 양수 | |
요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다. | +/- 각도(deg) | |
요소를 X축으로 x 각도만큼 기울인다. | +/- 각도(deg) | |
요소를 Y축으로 y 각도만큼 기울인다. | +/- 각도(deg) | |
요소를 angle만큼 회전시킨다. | +/- 각도(deg) | |
https://brunch.co.kr/@99-life/4 translate(이동), skew(기울기), rotate(회전), scale(확대)를 transform: matrix(1, 0, 0, 1, 0, 0) 또는 행렬로 표시하는 것 |
10. transition
| 프로퍼티 | 설명 | 기본값 |
|---|---|---|
트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다 | all | |
트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 | 0s | |
트랜지션 효과를 위한 수치 함수를 지정한다. | ease | |
프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 | 0s | |
모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax) |
11. animation
| 프로퍼티 | 설명 | 기본값 |
|---|---|---|
@keyframes 애니메이션 이름을 지정한다 | ||
한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. | 0s | |
애니메이션 효과를 위한 타이밍 함수를 지정한다. | ease | |
요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 | 0s | |
애니메이션 재생 횟수를 지정한다. | 1 | |
애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다. | normal | |
애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다. | ||
애니메이션 재생 상태(재생 또는 중지)를 지정한다. | running | |
모든 애니메이션 프로퍼티를 한번에 지정한다 (shorthand syntax) |
😀SpritesAnimation
12. 다단편집
13. 종합예제-calc
