생각기록
CSS-레이아웃, Display, animation, @keyframes 본문
앞서 레이아웃에 중요한 position과 transform을 배웠다.
더불어 중요한 display가 있다.
display: 공간
요소를 어찌 보여줄지 정하는 기능
• inline - 글자만큼 공간차지(=글자), 같은 인라인 속성들과 줄 공유
크기 조절 불가능
span 등이 있다.
• block - 기본 100%차지, 블록요소가 아닌 얘들한테 주는 기능
크키 조절 가능 (top,left 등)
div 등이 있다.
• inline-block - 기본적으로 인라인처럼 글자만큼 공간 차지하고, 공간을 키울 수 있음
• none : 크기를 차지하지 않는다. 크기조차 사라진다. (창이 점점 줄어들면서, 어떤요소가 사라지는데 크기 차지 x, 보이지 않게 할때 쓴다.)
• flex - 웹문서의 정렬, 레이아웃을 쉽게 구성토록 하는 기능
그 자식 태그들은 inline-block 속성을 갖게 된다.( 다른 자식과 줄을 공유하며, 크기를 지정 할 수 있는 속성)
= 즉 나열하고싶은 자식(자손x)들을 감싼 부모태그에게 flex 해줘야 한다.
animation
(둘을 같이 써야함)
애니매이션을 나타내는 css 스타일 + 애니매이션의 중간 상태를 나타내는 키 프레임
@keyframes 로 설정되는 값 ( to ~ from, 0% ~ 100% )
@keyframes 은 애니메이션 중간 중간에 객체의 위치와 크기를 지정해주는 프레임
진행률에 따라 대상 위치 지정/색상도 변경가능
1. from ~ to 여기서 저기까지
2. %로 25% 간격으로 애니메이션의 상태를 더 세부적으로 나눌 수 있다.
줄여쓰는법
animation: rotate_image 6s linear infinite;
rotate_image 라는 이름을 가진 키프레임을 실행시켜라
6s : 6초에 한번씩 (animation-duration)
linear : 동일한 속도로 (animation-timing-function)
출처: https://hongpage.kr/44 [홍페이지 HONGPAGE:티스토리]• Animation-name : 에니메이션의 이름
• Animation-duration : 애니메이션이 한 사이클을 완료하는 데 걸리는 시간
• Animation-delay : 애니메이션이 시작하기 전의 시간
• Animation-iteration-count : 몇번 반복
• Animation-timing-function : 애니메이션을 어떻게 움직일지 지정
- linear : 처음 속도와 마지막 속도가 일정
- ease : 처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려진다.
- ease-in : 천천히 시작되어 정상 속도가 됩니다.
- ease-out : 마지막에 천천히 속도를 줄여 끝냅니다.
- ease-in-out : 천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다.
주의할점
keyframe 을 쓸 때, 속성은 똑같이 줘야 한다. top, right가 있으면 아래에도 적용해줘야 모션이 부드럽다.
0% {top:0%; right%;}
50% {top:0%; right%;}
100% {top:0%; right%;}
해랑 달을 반대 방향으로 돌게 하는 응용
1. 사진에서 동그라미로 표시한 부분을 기준으로 잡아야한다.
transfom-origin: center 600px; 기준점 잡아준다.
.sun {
animation-name: sun;
animation-duration: 15s;
animation-iteration-count: infinite;
/* section 크기가 1000*600이다. 기준점 잡을때 transform은 x,y축을 쓴다.
우리는 중앙의 밑 지점을 기준점을 잡을건데, x축은 center, y축만 필요한 상태다
center 정중앙에서, y축의 600을 기준한다.
*/
transform-origin: center 600px;
animation-timing-function: linear;
}
.moon {
animation-name: moon;
animation-duration: 15s;
animation-timing-function: linear;
transform-origin: center 600px;
animation-iteration-count: infinite;
}
2. 다음은 달과 태양을 transform: rotate( );로 회전을 시켜 줄 것이다.
★각도계산은 기준점이 기준이지만, 돌아가는 것은 달과 해가 돌아갈 것이다.★
내가 여기서 틀렸던 점은 1번은 과연 몇도로 설정해야 할까?
정답은 180deg
해를 기준해서 4번은 90도를 돌아야 하고, 1번은 180도를 돌아야한다.
기준점은 그냥 돌기위한 중심이다.
각도계산을 달, 태양이 아닌 기준점을 기준으로 1번을 -90deg 이런식으로 해서 틀렸던것 같다.
@keyframes sun {
0% {
transform: rotate(-90deg);
opacity: 0;
}
25% {
transform: rotate(0deg);
opacity: 1;
}
50% {
transform: rotate(90deg);
opacity: 0;
}
75% {
transform: rotate(180deg);
opacity: 0;
}
100% {
transform: rotate(270deg);
opacity: 0;
}}
@keyframes moon {
0% {
transform: rotate(180deg);
opacity: 0;
}
25% {
transform: rotate(90deg);
opacity: 0;
}
50% {
transform: rotate(0deg);
opacity: 1;
}
75% {
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform: rotate(-180deg);
opacity: 0;
}
}
해와달에 쓰인 모르는 것들
overflow: hidden
overflow 의 값을 hidden 으로 설정하면, 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 합니다.
CSS margin, padding 을 0으로 주고 시작하는 이유
거의 모든 HTML 태그들은 브라우저에서 설정된 기본 스타일 값을 가지고 있습니다.
예를 들어, <blockquote> 태그는 따로 스타일을 지정하지 않더라도 들여쓰기가 되죠.
별표(*) 문자는 전체 선택자(Universal Selector)라고 합니다.
그러므로 * { margin:0; padding:0 }은 브라우저에서 기본으로 설정되어 있는 모든 태그의 마진과 패딩값을 없애겠다는 뜻입니다.
이것은 각 브라우저마다 HTML 태그에 기본값으로 설정된 마진과 패딩값이 미묘하게 다르기 때문에 마진과 패딩값을 0으로 초기화한 후 마진과 패딩값을 다시 적용하고자 할 때 사용합니다.
'SeSAC 풀스택 > CSS' 카테고리의 다른 글
| CSS-기초편 Position과 Transform (0) | 2022.10.31 |
|---|---|
| CSS 기초편-선택자 (0) | 2022.10.31 |
