본문 바로가기

내마음대로만들어보자/HTML52

웹사이트 따라잡기 코딩일지#1 - 사이트 정하기 앞서, 메가박스 사이트 만들기를 유투브채널을 통해 따라한 이후, 다시한번 복습하는 차원에서 다시 들으면서 학습일지를 작성하고 있다! 학습일지를 작성하면서 느낀부분은 여기서 배운 부분들을 활용해서 다른사이트를 스스로 따라 만들어 볼 수있다면 한층 더 코딩 실력이 늘진 않을까 생각이 든다. 디비컷 -https://www.dbcut.com/ 디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음 디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다. www.dbcut.com 그러다가 알게된 디비컷 사이트!! 여기에서는 이미 웹디자인으로 오픈/리뉴얼 된 우수한 사이트들이 여러가지가 있었고 아직은 복잡한 자바스크립트 등은 하기 어렵기때문에 최대한 원페이지 사이트 중에 시도해볼만한 사이트로 선.. 2021. 5. 25.
메가박스 사이트 만들기 학습일지#5 - 배너 반응형 swiper.js 를 통해 완성한 메가박스사이트의 배너를 각종 기기들에 맞춰 반응형으로 만드는걸 배워보자! 우선은 Font Awesome을 통해 아이콘을 넣는 방법을 익혀보자 * Font Awesome 사이트 : https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 상위버전은 유료이므로, Old Version의 사용을 권장합니다. (개인 연습용도이기때문에) 우선 이번 사이트를 만들면서는 흔히 전체메뉴 버튼(햄버거버튼)을 넣어보는걸로 연습해보자 사용방법은 매우 간단.. 2021. 5. 25.
메가박스 사이트 만들기 학습일지#4 - swiper.js 이번에는 swiper.js를 사용하는 방법에 대해 배워보자. ( 참고 사이트 : https://swiperjs.com ) Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 우선 첫번쨰로 소스를 다운로드 받아보자! https://github.com/nolimits4web/swiper nolimits4web/swiper Most modern mobile touch slider with hardware accelerated transitions - .. 2021. 5. 22.
메가박스 사이트 만들기 학습일지#3 - 헤더 반응형(모바일) 요새는 웹사이트를 접속할 수 있는 채널이 굉장히 다양해졌다. 나조차도 맥북, 아이패드, 핸드폰 등등 여러 채널로 사이트를 접속하다보면은 불편한것들이 느껴질때가 있다 그때는 알지 못했다ㅠㅠ 이게 이런 작업들이 이루어져야하는것인지를...!! 그냥 이용자 입장에서 접속할때 화면이 잘리거나 어떤 사이트는 팝업창은 뜨는데 닫기 버튼이 잘려서 닫히지않는 사이트들도 있었다 그런걸 보면서 이 수업에서 반응형에 대한 중요성을 새삼 느끼게 되었다. 한편으로는 이런것들을 다 고려해서 코딩을 해야한다고 생각하니 정말 테스트도 많이해봐야할것같고 꼼꼼하게 봐야할것같다는 생각이들었다 일단은 반응형을 코딩하는데 있어서 가장 중요한 개념부터 알고 지나가자! * 미디어쿼리 적용방법 이중에 주로 1번을 가장 많이 사용한다고 한다! 보통 .. 2021. 5. 20.

티스토리툴바