HTML17 [WEB] HTML/CSS/JS로 게임 만들기 1 오늘은 HTML / CSS / JS로 게임을 만들어 볼 것이다. 게임은 어렸을 때 많이 했던 갤러그이다. 이 게임은 적군이 아래로 다가오는데 다가오는 적군에 총을 쏴서 없애는 게임이다. 물론 위 게임처럼 완벽하게 만들 수는 없겠지만 최대한 비슷하게 만들어볼 예정이다. 1. 캔버스 세팅하기 JS에서 캔버스를 생성해 주어서 게임을 진행할 화면을 세팅해줘야 한다. canvas(캔버스) - HTML문서 내부에 그림을 그릴 수 있는 일종의 컨테이너 요소이다. JS를 통해 애니메이션과 이벤트를 처리할 수 있다. //캔버스 세팅 let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); // 2d로 보여줄 것이다. canvas.w.. 2022. 9. 13. [WEB] 반응형 nav바 만들기(HTML, CSS, JS) 1. 틀 잡아주기 클래스 명이 nav-bar인 태그 안에 logo와 메뉴, sns을 넣어주기 위해서 각각을 div와 ul태그로 묶어 틀을 완성시켜준다. 2. 상세하게 UI 만들어주기 IT 정복가 Home Weddings FAQ Gallery .nav-logo에는 웹페이지의 로고와 웹 사이트 명을 작성해준다. .nav-menu에는 메뉴를 보여준다. .nav-sns에는 이 웹 페이지의 sns를 보여준다. (아직까지 못생김) 3. CSS로 꾸며주기 body{ margin: 0; padding: 0; } a{ text-decoration: none; color: white; } a:hover{ color: white; } li{ list-style: none; } .nav-bar{ display: flex; j.. 2022. 8. 23. HTML과 CSS로 넷플릭스(Netflix) 클론 코딩해보기 1 https://www.netflix.com/kr/ 넷플릭스 대한민국 - 인터넷으로 시리즈와 영화를 시청하세요 스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등 다양한 디바이스에서 영화와 시리즈를 마음껏 즐기세요. www.netflix.com [선정 이유] 사진은 넷플릭스 홈페이지의 헤더부분(?)인데 백그라운드에 이미지가 사용되었고 가운데는 상대적으로 밝은 반면, 위 아래는 상대적으로 어두운 그라데이션 효과가 들어가 있다. 마침, 백그라운드에 이미지 넣는 법, 그라데이션 입히는 법을 오늘 배워서 이것을 활용할 수 있는 좋은 예가 될 것 같아 클론 코딩으로 선정하게 되었다. [첫번째로 할일] 헤더 부분의 영역을 지정해서 그 영역 안에 background에 이미지를 불러 와야한다. 넷플릭스는 width는.. 2022. 7. 29. HTML과 CSS로 구글 메인 페이지를 만들어보자! 3 https://conquer-it.tistory.com/115 ↑↑ 메인화면까지 다 만들었으니까 마지막으로 footer부분을 만들 차례이다. 1. 레이아웃 생각해보기 큰틀 안에서 우선 위아래 초록색 박스처럼 나누고 아래는 파란색 박스로 나누면 될 듯 하다. 2. 큰 틀부터 꾸미기 메인화면 바로 다음 footer영역을 추가했는데 아래처럼 footer가 중간에 들어가서 일부러 footer와 메인화면 사이에 화면 채우기용 div를 추가해 주었다. footer영역 footer부분을 윗줄, 아래줄 두 부분으로 나눴고 아래줄을 다시 두 부분으로 나눠 ul를 사용했다. 대한민국 광고 비즈니스 검색의 원리 개인정보처리방침 약관 설정 3. CSS로 꾸며주기 4. 완성 [비교샷] 5. footer부분 반응형으로 만들기 구.. 2022. 7. 26. 이전 1 2 3 4 5 다음
