쥰's 블로그

화면 html코드 -common css코드 - 화면 css 코드 메뉴소개 화면을 구현해봤다. 헤더는 스크롤을 내려도 고정이 되도록 했다. -반응형도 메인화면만 적용이 되도록 해보았다. 반응형 메인 화면css https://www.burgerking.co.kr/#/menu/K100002/%EC%8A%A4%ED%8E%98%EC%85%9C&%ED%95%A0%EC%9D%B8%ED%8C%A9

(1) template.html 먼저 template파일을 만들어 주었다. - reset.css cdn을 구글링해 복사해 왔다. 그리고 구글 아이콘도 복사해왔다. 부트스트랩5에서 css와 번들도 복사해왔다. (2) common.css (3) index.html 기존에 만들었던 template.html파일을 복사, 붙여넣기 한 뒤 index화면을 위해 추가해주었다. 로고와 배경 이미지들은 넷플릭스 사이트에 들어가 F12버튼을 눌러 이미지 주소를 받아 왔다. 로고 : https://cdn.cookielaw.org/logos/dd6b162f-1a32-456a-9cfe-897231c7763c/4345ea78-053c-46d2-b11e-09adaef973dc/Netflix_Logo_PMS.png tv이미지 : h..

폴더를 만들어 html 파일과 css파일을 구별하여 연결시켜 줬다. (1) MQ1.html ● Media Query Device Options all : 모든 미디어 유형에 적용 print : 인쇄를 위한 미디어 타입 screen : 화면 기반의 미디어 타입(주로 컴퓨터, 태블릿...) speech : 음성 출력 장치를 위한 미디어 타입 제일 크게 했을 땐 박스 색깔이 오렌지색이 었다가 화면을 조금 줄이면 박스가 초록색으로 바뀌고 더 줄이면 파란색으로 바뀐다. (2)MQ2.html (3)LayOut.html 기존에 만들었던 Layout html파일에 반응형을 추가 해보았다. 데스크탑 화면으론 이렇게 보이는 것이 화면을 줄이면 모바일 화면으로 변하게 된다. (4) desktop.css (5) mobile...

슬라이더들이 좌,우로 움직이는걸 볼 수 있다. ● animation : 애니메이션명 딜레이 속도 반복

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

(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..