반응형웹6

• 

  티스토리(TISTORY) 블로그 제목에 반응형 웹 CSS 스타일 설정하기 1. 관리 페이지 접속 > 꾸미기 > 스킨 편집 클릭 2. html 편집 클릭 3. CSS 클릭 4. @media screen 구문 입력 이 구문은 화면의 너비가 360px 이하가 되면 적용하겠다는 의미입니다. 아래 보이는 이미지는 상단 블로그 이름에 적용한 스타일인데요. 화면 너비에 따라서 3가지 크기로 변경되도록 설정을 해 놓았습니다. * 화면 너비가 767px 초과인 경우 * 화면 너비가 767px 이하 360px 초과인 경우 * 화면 너비가 360px 이하인 경우 이와 같이 브라우저 크기에 따라 스타일을 다르게 지정할 수 있습니다. 정보/블로그 운영팁 2020. 10. 6.

• 

  테트리스 게임 개발 #10 - 모바일 플레이 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색 sangminem.tistory.com 이번에는 약속드린 대로 모바일에서 조작 가능하도록 버튼을 만들어 보겠습니다. 모바일 뷰에서는 고려할 사항이 좀 더 많습니다. 메타 설정 수정 하나하나 생각해 보겠습니다. 먼저 play.html을 수정할 건데요. 모바일 기기에서 최적화 된 화면을 보여주기 위한 메타 설정 값입니다. 일반적인 사항이라 특별한 설정이 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 10. 1.

• 

  테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 목차 sangminem.tistory.com 이번 시간에는 한층 더 고급스러워진 게임에 더욱 난이도 높은 기능을 추가해 보도록 해볼게요. 1. 먼저 콤보 기능을 만들어 볼 거구요. 2. 특정 레벨 이상에서 일정 시간이 지나면 밑에서 한 줄씩 올라오는 로직을 구현해 보겠습니다. 별 거 아닌 거 같아도 생각보다 고려할 게 많습니다. 정신 바짝 차리고 따라 오세요. 콤보 기능 추가 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 10. 1.

• 

  테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 목차 지난 강의 리뷰 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 테트리스 게임 sangminem.tistory.com 지난 시간까지 기본적인 테트리스의 기능은 구현이 완료 되었습니다. 지금부터는 부가적인 기능을 구현해 보는 시간을 갖도록 할 거예요. 1. 게임 시작, 종료, 일시 정지 2. 레벨, 라인, 점수 계산 위와 같은 기능이 추가 되어야 더욱 게임 다운 게임이 되겠죠. 게임 시작, 종료, 일시 정지 일단 게임 시작, 일시 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 23.

• 

  테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 목차 지난 강의 리뷰 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 테트리 sangminem.tistory.com 지금부터는 테트리스의 필수적인 기능을 마무리 하는 시간을 가져 보겠습니다. 1. 하드 드랍 2. 라인 제거 3. 게임 종료 위와 같은 순서로 작성을 한 번 해볼게요. 하드 드랍 기능 구현 먼저 하드 드랍 기능입니다. 그러기 위해 새로운 키를 등록해야 겠죠. function keyHandler(event) { const inputKey = e.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 20.

• 

  테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 목차 지난 강의 리뷰 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #1 - 소개 및 기본 화면 sangminem.tistory.com 이번에는 다음과 같은 기능을 구현해 보겠습니다. 1. 블럭이 위에서 아래로 자동으로 내려오고 2. 블럭이 바닥에 도달하면 새로운 블럭을 다시 내려오도록 해 볼게요. 3. 그런 다음 내려온 블럭을 쌓아 보겠습니다. 블럭 애니메이션 효과 애니메이션 효과를 주기 위해서는 window.requestAnimationFrame() 메서드를 이용하면 됩.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 18.