본문 바로가기

CSS16

[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.
CSS 단위 이해하기(%, px, em, rem, vw, vh의 차이) CSS에는 %, px, em, rem, vw, vh등의 많은 단위들이 있다. 오늘은 이 단위들의 차이점을 알아보자 사용할 HTML class가 a인 div 태그가 b인 div 태그를 감싼 모습이다. px px(픽셀)은 CSS의 가장 기본적인 크기 단위이다. 많은 사람들이 px을 사용하고 있지만 px은 상대적이지 않고 절대적인 단위이기 때문에 반응형 웹을 만들때 불편한 점이 있을 수 있다. .a{ display: flex; justify-content: center; width: 300px; height: 300px; background-color: gray; } .b{ width: 100px; height: 100px; background-color: beige; } css를 이렇게 작성한다고 하면 웹페.. 2022. 8. 10.
HTML과 CSS로 넷플릭스(Netflix) 클론 코딩해보기 1 https://www.netflix.com/kr/ 넷플릭스 대한민국 - 인터넷으로 시리즈와 영화를 시청하세요 스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등 다양한 디바이스에서 영화와 시리즈를 마음껏 즐기세요. www.netflix.com [선정 이유] 사진은 넷플릭스 홈페이지의 헤더부분(?)인데 백그라운드에 이미지가 사용되었고 가운데는 상대적으로 밝은 반면, 위 아래는 상대적으로 어두운 그라데이션 효과가 들어가 있다. 마침, 백그라운드에 이미지 넣는 법, 그라데이션 입히는 법을 오늘 배워서 이것을 활용할 수 있는 좋은 예가 될 것 같아 클론 코딩으로 선정하게 되었다. [첫번째로 할일] 헤더 부분의 영역을 지정해서 그 영역 안에 background에 이미지를 불러 와야한다. 넷플릭스는 width는.. 2022. 7. 29.