Today I Learned/Task28 [Task] Town Animation - 에이블런 프론트엔드부트캠프 5일차 강사님이 제공해주신 이미지를 활용해 Town Animation을 개발했다. Animation을 적극적으로 사용해서 웹사이트가 아닌 동영상 같은 퀄리티를 만들어냈다. 0. HTML 기본 구조 Have a Good Day !! 0-1. Sky HTML하늘에는 구름 2개, 해 1개가 존재하기때문에 다음과 같이 HTML 구조를 짰다. 0-2. Town HTMLTown에 속하는 오브젝트는 관람차, 밤 버전 Town, 낮 버전 Town이 있다. HTML은 위에 있을 수록 Z축으로 맨 뒤에 표시된다. 따라서 관람차를 처음에 작성하고 밤 버전, 낮 버전 순으로 작성했다. .. 2024. 7. 20. [Task] 3일차 과제 - 에이블런 프론트엔드부트캠프 3일차 transform, transition을 집중적으로 배웠기 때문에 이와 관련해서 작업물을 하나 만들고 싶다는 생각에 뭘 만들까 고민하다가 간단한 기업 메인 홈페이지를 만들어보기로 했다. 이전에 작업했었던 레이어 이미지를 가져와 개발을 시작했다. 위 화면에서 애니메이션이 들어갈 부분은 네비게이션 바 부분의 메뉴, 그리고 슬라이드 부분으로 생각하고 개발했다. 막힌 부분 메뉴 부분에 마우스를 올리면 input이 나타나고, 이를 클릭해서 검색을 할 수 있도록 해야하는데, 마우스를 올린 후 input에 클릭하면 input과 함께 메뉴 부분의 transition이 되돌아가는 오류가 생겼다.오류 화면#nav { width: 100%; height: 70px;}#nav > *{ margin: 20px.. 2024. 7. 17. [Task] 2일차 과제 - 에이블런 프론트엔드 부트캠프 2일차 2일차 과제는 포트폴리오를 제작할 때 사용하는 프로필을 웹으로 구현하는 것이다. 나는 핀터레스트에서 프로필 레이아웃을 하나 구해서 제작하려고 마음 먹었다. 그런데, 아래와 같은 영상이 나의 시선을 끌었다.https://pin.it/32JCaihZ5 Pin on dashboardProfile Edit - Dashboard designed by Medo Ismail ©. Connect with them on Dribbble; the global community for designers and creative professionals.kr.pinterest.com edit 버튼을 누르면 자신의 프로필이 수정 가능한 상태로 변화하는 짤막한 영상이었지만, 나를 끌어들이기에는 충분하고도 남는 영상이었다. 레퍼런.. 2024. 7. 17. [Task] 1일차 과제 - 에이블런 프론트엔드부트캠프 1일차 HTML 구조 분석부터 시작하여 화면 요소가 무엇이 있고 이를 어떤 순서로 작성할지 고민했다. section 안에 제목, 사진 본문, 링크 등이 들어가야 한다. 제목이 최상단, 그다음 이미지, 그리고 본문 순대로 작성해야한다. section> h1>Lorem ipsumh1> div class="img"> img src="./img/crown.png" alt="왕관이미지"> div> h4>Lorem ipsum dolor, sit amet consecteturh4> p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet explicabop> h4>Lorem ipsum dolor, s.. 2024. 7. 16. 이전 1 2 3 4 5 다음
