본문 바로가기

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

[React] 메가박스 모바일 웹 화면 만들기 리액트 네이티브에 대해서 화면 뷰 그리는 연습을 하기위해서 이전에 HTML+CSS 공부를 하면서 만들었던 반응형 사이트를 만들어보려고한다. 버튼 , 상세 화면에 대한 기능들은 추가하지 않을거고 메인화면에 대해서만 화면 뷰를 그려보려고한다. 리액트 네이티브 특성상 컴포넌트로 쪼개서 화면을 그려주어야 하므로 아직은 한번에 모든 화면을 쪼개서 그리는건 어렵다고 생각이 들어 부분 나눠서 하나씩 만들어 가 볼 생각이다! 만들어 나가는 과정을 기록해서 완성할때까지 일지를 작성해보자!! 2021. 9. 26.
웹사이트 따라만들기 코딩일지#4 - 컨텐츠영역1 우선 첫번째 영역에 대해서 따라 만들어 보았다! 완성된 모습은 사실 이부분에 대해서 코드를 작성하는건 크게 어렵다고 느낀 부분은 없었다. 어차피 상세페이지는 제외하고 메인페이지에 대해서만 따라만들 계획이여서 따로 더 진행할 부분은 없었다. 다만, 뉴스센터에서 보이는 자바스크립트 부분이 좀 어려운것같다. 그래서 다음에는 자바스크립트 부분을 조금 더 공부해서 완성해볼 생각이다. 1. 일정시간이 지나면 다음으로 넘어가도록 설정 2. 클릭했을때 다음으로 넘어가도록 설정 이때, CSS코드를 작성하다보면서 느낀부분이 역시나 오타였다...ㅠㅠㅠ 오타는 눈에 잘 보이지도않아서 뭐가 잘못됬는지 한참 찾아본적도 있었다. 복사해서 붙여넣는 습관을 들이자! 원래는 디자인 작업물을 가지고 코딩을 해야하지만 나는 혼자 연습을 하.. 2021. 6. 20.
메가박스 사이트만들기 학습일지#9 - 이벤트영역 이번에는 이벤트영역을 만들어보자. 이부분은 그래도 여기 사이트중에서 가장 쉬운 부분이였던 것 같다. 물론, 이미 완성본이 있고 따라하다보니까 그럴수도있다. 처음부터 아무것도 없는상태에서 만들면 어려울것같긴하다. 이때 가장 중요하게 코드를 짜야되는부분은 이벤트 영역을 좌 우로 나누는것이다. 그리고 처음에 영역을 잡기위해 width , height 값을 넣었다면 배경색을 넣어서 영역을 확인하면서 코드를 짜는 습관을 들이자. 이번 사이트를 만들면서 반응형 이미지를 위해 사용하는 srcset 속성도 알아두자! http://tcpschool.com/html-tag-attrs/img-srcset 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpsc.. 2021. 6. 20.
메가박스 사이트 만들기 학습일지#8 - 영화차트이미지슬라이드(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 이번에는 Swiper.js 에서 API 부분을 참고해서 코드를 작성해보자! * 이미지 슬라이드 자바스크립트 코드 기존에 메인배너 이미지슬라이드 와 겹치는 것을 방지하기위해 선언해주는 코드를 동일하게 작성했다. : var mySwiper.. 2021. 6. 12.

티스토리툴바