꾸준하게

Javascript와 React를 병행해서 공부하기 시작했다 잘은 모르지만 React는 프론트엔드 개발자에게 필요한 것이라고 들었다 생활코딩님의 강좌들을 보며 배운것들을 기록하려고 한다 리액트의 필요성 페이지를 구성하는 요소는 HTML이다. 근데 내가 만드는 것처럼 간단한 웹페이지는 금방 쉽게 파악 할 수 있다. 하지만 좀 더 많은 정보들을 담은 페이지 일수록 그만큼 html 코드양도 많아지고 개발자는 분석하기 더욱 더 어려워진다. 이때 React가 🌟을 발휘한다! 예를 들어서 WEB World Wide WEB! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 로 구성된 html이 있다 지금은 한눈에 구조를 파악할 수 있지만 , , 에 각각 천만..

1. 배열 선언하기 const arr1 = new Array(); arr1[0] = '사'; arr1[1] = '과'; console.log(arr1[0]); // -> 사 또는 const arr2 = ['사', '과'] console.log(arr2[1]); // -> 과 2. 반복문 이용하기 const fruits = ['apple', 'bannana', 'melon', 'cherry']; // 1. for for(i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // 순차적으로 // 2. for of for(let fruit of fruits) { console.log(fruit); } // fruit을 let 하여 fruits의 배열 항목들을..

import pygame import os # 0. 제일 먼저 해야되는 것들 # 기본 초기화 pygame.init() # 화면 크기 설정 # 화면 타이틀 설정 # FPS 설정 # 1. 사용자 게임 초기화 (배경 화면, 게임 이미지, 좌표, 속도, 폰트 등 ) while running: # 2. 이벤트 처리(키보드, 마우스 등) # 3. 게임 캐릭터 위치 정의 # 4. 충돌 처리 # 5. 화면에 그리기 pygame.quit() os는 (OS: Operating System)으로 디렉터리, 파일 등등 제어하는 모듈이다 여기서는 디렉터리를 추출하거나 경로를 생성하는데 쓰인다 위의 주석처리들이 게임 만들 때 뼈대라고 할 수 있다 # 0. 제일 먼저 해야 되는 것들 import pygame import os ##..

파이썬으로 쉽게 게임을 만들 수 있다. 파이썬은 다양한 라이브러리가 있는데 그중에서 pygame을 import 하면 혼자서도 다양한 게임을 만들어 볼 수 있다 이번에 만들 게임은 공 피하면서 터뜨리기이다~ 강좌를 보며 따라 만들어 보았다💻💻 https://www.youtube.com/watch?v=Dkx8Pl6QKW0&t=14s 내가 참고한 유튜브 강좌이다 강사가 쉽게 설명하면서 코드를 작성하니까 누구나 충분히 만들 수 있다~! 다음 포스트부터 코드에 대해서 살펴보겠다👊

마지막 footer영역에 대해 살펴보자! 딱히 어렵다 할 부분은 없는데 나는 글자 위에 가운데 경계선을 어떻게 해야 할지 잘 몰랐다. border로 하자니 footer위 전체가 선으로 표시되니까 이 방법은 쓸 수 없었다. 그래서 코드를 참고해보니 ::before을 이용해서 구현하였다 footer { margin-top: 2rem; margin-bottom: 10rem; } /* 경계선 만들기 */ footer:before { content: ""; border-top: 1px solid rgba(255,255,255, 0.3); display: block; width: 10em; margin: 5rem auto; } /* 경계선 만들기 */ footer p { text-align: center; colo..

몸통 부분의 section에 대해서 살펴보자 사진들을 포함한 부분들을 section으로 묶었다. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 처음에 사진들을 어떻게 묶어야 될지 궁금했다 이런 방식으로 하면 된다~! html 부분은 이정도면 딱히 어려운 부분은 없다 다음 CSS부분에 대해서 살펴보자 /* 사진 정렬 왼쪽-> 오른쪽 */ .thumbnail { display: flex; margin-left: 1rem;..

이 웹 페이지는 '생활코딩'님의 유튜브 강의를 보고서 직접 만들어 보았다. https://www.youtube.com/watch?v=xYzowO0KR70 https://templated.co/visualize Visualize by TEMPLATED A simple, one-page portfolio design with a fully functional lightbox. templated.co 클론 할 웹 페이지이다. 먼저 html의 구조를 파악해야 한다. header, section, footer을 이용해서 머리-몸통-다리 부분을 나눈다고 생각하자 header부분에 대해서 깊게 분석해 보자 빨간색 박스 부분만큼 header로 잡았다. This is Visualize, a responsive site ..