쥰's 블로그

공이 튀기는 모습을 볼 수 있다.

(1) ● 무한대로 움직임 animation-iteration-count: infinite; ● 왔다갔다 animation-direction: alternate; (2) (3) 왼쪽에서 오른쪽으로 움직이면서 크기와 색이 바뀐다. (4) ● 천천히 -> 빠름 -> 천천히 animation-timing-function: ease; ● 천천히 -> 빠름 animation-timing-function: ease-in; ● 빠름 -> 천천히 animation-timing-function: ease-out; ● 천천히 -> 보통 -> 천천히 animation-timing-function: ease-in-out; ● 일정 속도 animation-timing-function: linear;

이전에 만들었던 layout코드를 가져와 전 페이지에서 만들었던 스타벅스 로고를 붙여넣기 하였다. 원에 커서를 가져다 대면 주황색 원이 파란색 원으로 바뀌고 스크롤을 내려도 원은 그 자리에 있다. 커서를 내렸을 때

(1) 주황색 사각형에 마우스를 가져다 대면 사각형이 180도로 뒤집히게 된다. (2) 스타벅스 로고를 가져다 배경으로 사용해봤다. 스타벅스 로고에 커서를 가져다 대면 원이 180도로 뒤집히면서 다른 원이 나타나게 된다. 출처 : 스타벅스 아이콘 (https://www.starbucks.co.kr/index.do)

- transform ● 위치이동 transform : translate(x,y) transform: translateX(200px); transform: translateY(200px); ●크기조정 - 따로 transform: scale(2,2); - 같이 transform: scale(1.5); - 회전 transform: rotate(180deg); - 기울이기 transform: skew(45deg, 45deg); - 동시적용 transform: translate(400px, 400px) rotate(360deg) scale(1.5); 주황색 사각형에 마우스를 가져다 대면 사각형이 1.5배의 크기가 되면서 중앙으로 옮겨가게 된다. - Site Menu 삼선 버튼을 누르면 엑스로 바뀐다.

(1) 첫 화면에서는 글을 쓸 수 있는 부분이 보이지 않지만 클릭하면 0.5s의 속도로 밑줄이 생기는 것을 볼 수 있다. 또, 글쓰는 부분이 아닌 곳을 클릭하면 글쓰는 부분이 서서이 짧아지며 줄어드는 것을 볼 수 있다. 또한 주황색 박스에 커서를 갖다 대면 각자의 속도대로 길어지는 것을 볼 수 있다. (2) 구글에서 이미지를 찾아 이미지의 주소를 url에 첨부하였다. 여기서 이미지가 들어있는 박스에 커서를 가져다 되면 이미지들이 아래로 움직이는 것을 볼 수 있다. 사진 출처: https://kr.freepik.com/premium-vector/cute-dog-illustration_42642304.htm https://kr.freepik.com/premium-vector/cute-dog-cartoon-i..

● flex는 부모에서 잡는 것 ● sementic태그 : 웹문서를 의미있는 블록으로 나누어 구조를 만드는데 사용되는 태그 : 헤더 섹션 : 네비게이션 링크 섹션 : main안의 특정 영역 지점 섹션 : 문서의 본문 섹션 : 문서의 사이드바 영역 : 푸터 영역 : 문서 주요 컨텐츠 영역 header의 menu에 커서를 올리면 submenu가 보인다.

(1) ● display : flex; 는 자식한테만 설정 가능, 자손한테는 영향 안 미침 ● 수평배치 : center, right, left, space-bottom, space-evenly, space-around ● 수직배치 : start, end, center, flex-end, flex-star ● row, column 형태로 item 방향 지정 ● flex-wrap: wrap; : item의 크기가 부모를 초과하면 다음 행에서 보여줄지 여부 자손의 길이가 길어도 부모를 벗어 날 수 없어 원하는 값만큼의 길이를 가지지 못해 밑으로 내려보내는 것 (2) ● align-items를 center로 잡으면 align-content:stretch가 되지 않음 (3) ● flex : 증가비율 감소비율 퍼센트

● z-index : auto 순서에 맞게 z-index를 고려, 남발하면 나중에 복잡해짐 position이 설정이 안되어 있는 요소의 스타일엔 z-index 는 설정 할 수 없다.

첫 화면에서 스크롤을 조금 내리면 relative와 absolute는 위로 그 자리에 있어 위로 올라가버리고 fixed는 스크롤을 따라 계속 보이며 sticky는 부모태그 안에서는 스크롤을 따라 움직이다가 부모태그가 끝나면 벗어나지 않고 올라가버린다.