본문 바로가기

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

웹사이트 따라만들기 코딩일지#3 - 배너영역 그동안 혼자 배우고 따라연습하던 부분들을 복습하는 차원에서 삼천리 사이트를 따라 만들어보고있다. 아직은 복잡한 사이트들은 만들기 어려워서 좀 간단해 사이트 위주로 따라해보고있다!! 이부분이 조금 익숙해지고 이해가 된다면 리액트 도 배워볼 생각이다. 이번에는 코드들을 보면서 가장 중요하게 알고있어야할 개념은 ! * 인라인 요소 vs 블럭요소 개념 정리 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록 요소는 text-align이 적용되지 않는다. 1. 블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 .. 2021. 6. 12.
메가박스 사이트 만들기 학습일지#7 - 영화차트탭메뉴 ㅁ이번 강의에서는 탭메뉴에서 자주쓰이는 자바스크립트,제이쿼리를 사용한다! 자바스크립트를 사용하기에 앞서 jquery.min_1.12.4.js 를 연동을 필수로 해줘야한다! 이번 강의에서 완성모습과 기억하면 좋을 기능은 "박스오피스,최신개봉작 등 탭메뉴를 클릭하는경우 해당 영화차트탭에 맞는 영화들이 보여질 수 있도록 기능을 구현한다." 탭메뉴는 간단하게 구현이 가능하다. 우선 버튼,컨텐츠 영역을 변수를 선언해서 담는다! var movBtn = $(".movie_tit > ul > li"); var movCont = $(".movie_chart > div"); * 버튼영역 (movBtn) : 영화차트탭메뉴 * 컨텐츠영역 (movCont) : 영화차트내용 지금은 별도 제이쿼리를 작성하지않았기때문에 모든 영화차.. 2021. 6. 1.
메가박스 사이트 만들기 학습일지#6 - 영화차트구조잡기 유투브를 통해 사이트를 만들기를 하면서 가장 좋은부분은 기본적인 부분이 습관이 될 수 있도록 항상 말씀을 해주는게 좋은 것 같다! ( 주석표시, 복붙사용, 기본뼈대만들기 등등) 간혹, 습관인 안된다면 코드 정리가 안된거나 오타로 인해 실수를 할 수 있으므로 중요한부분이다 요즘에는 웹 접근성을 준수하여 사이트를 만들어야하기때문에 이번 차트에서도 구조를 잡기위해 IR기법을 사용하고 있다! 이건 따로 정리해둔 자료를 한번더 숙지하고 넘어가는게 좋을 것 같다. 이번 유투브 강의를 다시 들으면서 느낀부분이 인스타그램을 통해서 필요한 정보들을 정리를 잘해두신것같다. 그부분은 내 블로그에서도 바로 확인하고 볼 수있도록 복습할겸 정리를 해볼 생각이다! 이번 영화차트부분에서 새롭게 배우게되는 웹사이트에서 이미지를 표현하.. 2021. 5. 26.
웹사이트 따라잡기 코딩일지#2 - 헤더영역 헤더영역을 먼저 코딩을 해보면서 공부해보기로 했다! 처음으로 기본세팅은 헷갈리지않도록 메가박스 사이트 만들기를 했을때 사용했었던 부분을 기본뼈대로 시작하기로 했다. 이제 나혼자 코딩을 하려고하면 막막하기때문에 모든 작업에 있어 순서를 정해보자! 첫번째로, 큰 틀을 잡아보자 우선은 이러한 뼈대를 잡고 세부 항목에 맞도록 코딩을 해보려고한다. 이제 기본정보들을 입력하였고, CSS를 통해 이미 제작되어 있는 사이트와 비슷하게 만들어 보겠다! (기존 리셋 CSS파일은 메가박스 사이트에서 만들었던 파일로 그대로 사용해볼 생각이다!) 사실, 처음에 따라할때는 가운데영역과 로우영역을 만드는 부분에 대해서 정확히 이해가 안되었지만 실제로 내가 직접 코딩을 하다보니 확실히 어떤 변화가 생기는지 이해가 된다! (가운데영역.. 2021. 5. 25.

티스토리툴바