티스토리

햇살같은 션샤인

검색하기

블로그 홈

햇살같은 션샤인

sieonshine.tistory.com/m

_션샤인 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Background image If you write Line 10,12 both -> the image is devidedbecause you call the image twice. so if you want to put this image as a backgrounddocument.body.style.backgroundImage = `url('img/${chosenImage}')`; 공감수 0 댓글수 0 2024. 9. 1.
Weather 8.0 Geolocation 1. function navigator.geolocation.getCurrentPosition() 1) getCurrentPosition(argument1, argument2) (argument1) the function that will be called if everything is okay. (argument2) the function that will be called if there is an error. 2) Declare function for getCurrentPositionfunction onGoeOk(){}, functiononGeoError(){}function onGoeOk(position){ const lat = position.coords.lat.. 공감수 3 댓글수 0 2024. 8. 31.
To do list (2) 7.6 Deleting To Dos part1problem - We don't know which todo text to delete in the databasegoal 1 - Give this todos a sort of ID ex: [{id:121212, text:"drink"}] 1) Create the objectconst newTodoObj = { text: newTodo, id: Date.now(),} * Date.now()-> the function that you can call. It gives you the milliseconds the second everything. 2) Push newTodoObj into toDos arraytoDos.push(newTodoObj); 3.. 공감수 2 댓글수 1 2024. 8. 29.
To do list (1) 7.0 Setup 1) add and in html2) make const toDoForm/toDoList by using getElementByIdconst toDoForm = document.getElementById("todo-form");const toDoInput = document.querySelector("#todo-form input")const toDoList = document.getElementById("todo-list"); 3) make a function 'handleToDoSubmit' - delete event setting -> event.preventDefault(); 4) change the value to empty.function handleToDoSubmit.. 공감수 2 댓글수 0 2024. 8. 28.
Quotes 6.0 QuotesTo make Random Quotes, create forntend by HTML Randomness console.log(quotes[10]We need function that can give us number 9 to 0. 1) To get the number 0~9Math.random() * 10 2) To remove float numbersMath.round (반올림)Math.ceil (올림)(1.01 -> 2, 1.0 -> 1.0, 1.1->2)Math.floor (내림) console.log(quotes[Math.floor(Math.random() * quotes.length)]);(1) const todaysQuote = quotes[Math.floor(Math.ra.. 공감수 0 댓글수 0 2024. 8. 27.
Clock 5.0 Intervals1) Interval : something that should happen every 'n'second.2) example function sayHello() { console.log("hello");} -> If you want to execute this function every 2seconds. 3) setInterval - takes two argument.(1) function that you want to run(2) the miliseconds that you want to wait between each call setInterval(sayHello, 5000ms) = every 5second 5.1 Timeouts and Dates 1) setTim.. 공감수 0 댓글수 0 2024. 8. 26.
Login Form 4.0 Input values 4.1 Forms Submission 4.2 Events function onLoginSubmit(event( { tomato=argumentpreventDefault(); -> to get what is the information the browser will give youconsole.log(event);} loginForm.addEventListener("submit", onLoginSubmit); all youre doing here, is youre creating a function that is called onLoginSubmit.And youre saying this function takes one argument. and youre g.. 공감수 0 댓글수 0 2024. 8. 23.
Javascript on the browser 3.0 The body>script src="app.js">script>body> Console -> JSStyle -> CSSElement -> HTML 3.1 HTML in Javascriptdocument.getElementById("title") Javascript can take elements from HTML but its not showing HTML 공감수 0 댓글수 0 2024. 8. 22.
Welcome to Javascript 2.0 To bring JS filebody>script src="app.js">script>body> Console -> JSStyle -> CSSElement -> HTML2.1 Basic data typesjavascript has type, and understand it automatically1) Number (Integer) = Full number, Float (eg. 0.5)2) Text (string) -> Always with " " 2.2~2.3 VariablesIn VScode, app.js console.log(value/string);-> print something(value/string) on your console Variable : Save or Hold Value.T.. 공감수 0 댓글수 0 2024. 8. 2.
States, Transition, Media Query 3.17 Statesactive: when you click, background color or something change ->button:active {background-color: tomato;}hover: when mouse cursor is on top of the buttonfocus: when the button is selected by the keyboardvisited: only appies with link. ->a:visited {color: tomato;}focus-within : applies with fatheris a state for an element has children that is focused. = when children is focused, father.. 공감수 0 댓글수 0 2024. 7. 30.
Login Form, Navigation, Screen header styles.css 에서 이어서! #login-form{ (#ID login-form display:flex; (#we don't want things next to each other) flex-direction: column; (#we want things under each other) margin: 0px 30px; (top and bottom zero, rt/lt 30 px) #login-form input { (#ID login-form, all the input) border: none; padding:15px 0px; font-size: 18px; border-bottom: 1px solid rgba(0,0,0,0.3); margin-bottom: 25px; transition: borde.. 공감수 0 댓글수 0 2024. 7. 24.
Position, Pseudo selector 3.12 Position -> Can be used when you want to modify a little bit right/up side like this 1) position: fixed even if page scrolling down, 'div' stay same position.3.13 Relative Absolutewill align itself according to the closest relative father.If you do position absolute, it will be aligned according to you should do relative to parent element.it means from where the element start to the top/ri.. 공감수 0 댓글수 1 2024. 7. 23.
Status bar 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 7. 22.
Git hub, Icons, Font, Reset Git hub : Basically upload the list of changesGit : Keep tracking of the changes make '.gitignore' file. (name should be .gitignore)-> make not to display specific file. Making Base Document (index.html) -> short code (!+enter)DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> body>html>I.. 공감수 0 댓글수 0 2024. 7. 22.
CSS How we can add(mix) CSS to HTML page 1) to put the HTML code and CSS code on the same file - going to use a tag : should be in the (not ) - write CSS code in it. 2) to seperate HTML from CSS - link href="styles.css" rel="stylesheet" /> - write CSS code in the styles.css 2. Basic CSS linesthere is three rule. - What CSS do is pointing HTML code.(Selector) - Property (속성) - combined by curly bra.. 공감수 0 댓글수 0 2024. 7. 21.
HTML 항상 브라우저 창에 동일 파일 열어둘 것tag들을 어디에 둬야하는지를 아는 것이 중요( 다 외울 필요는 없음 -> 작동하는 것을 이해하는 것이 중요)3. ul = unordered list / ol = ordered (number)4. a = anchor (means 'link')5. href = reference. (only be combined with anchor) target="_self" open with current tab target="_blank" open with new tab6. : self closing tag. how to put image 7. Always use double quotes if you use double quotes8. is box container but .. 공감수 0 댓글수 3 2024. 7. 20.
8. Pygame Frame 1. 불러오기import pygame2. 기본 초기화 (반드시 설정 해야하는 것들)#초기화pygame.init()#화면 크기 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))# 화면 타이틀 설정pygame.display.set_caption("게임 이름")#FPSclock = pygame.time.Clock() 3. 사용자 게임 초기화 - 배경화면, 게임 이미지 로드 - 좌표, 속도, 폰트, 시간 등 4. 이벤트 루프#1. 이벤트 설정running = True # 게임이 진행중인가?while running : dt = clock.tick.. 공감수 0 댓글수 0 2024. 7. 11.
7. 텍스트 만들기 pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 - display.set_mode : 게임창의 크기와 특성을 튜플 형태로 정의, 주로 (width, height) - display.set_caption : 게임창의 제목 설정 FPS 설정clock = pygame.time.Clock().. 공감수 0 댓글수 0 2024. 7. 10.
6. 충돌 만들기 (Collision) pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 - display.set_mode : 게임창의 크기와 특성을 튜플 형태로 정의, 주로 (width, height) - display.set_caption : 게임창의 제목 설정 FPS 설정clock = pygame.time.Clock().. 공감수 0 댓글수 0 2024. 7. 9.
5. Frame per second pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 - display.set_mode : 게임창의 크기와 특성을 튜플 형태로 정의, 주로 (width, height) - display.set_caption : 게임창의 제목 설정 1. FPS 설정clock = pygame.time.Cloc.. 공감수 0 댓글수 0 2024. 7. 8.
4. 키보드 이벤트 (Keyboard_Event) pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 - display.set_mode : 게임창의 크기와 특성을 튜플 형태로 정의, 주로 (width, height) - display.set_caption : 게임창의 제목 설정 배경 불러오기background = pygame.image.l.. 공감수 0 댓글수 0 2024. 7. 7.
3. 캐릭터 만들기 pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 - display.set_mode : 게임창의 크기와 특성을 튜플 형태로 정의, 주로 (width, height) - display.set_caption : 게임창의 제목 설정 배경 불러오기background = pygame.image.l.. 공감수 0 댓글수 0 2024. 7. 7.
2. 배경 만들기 pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 - display.set_mode : 게임창의 크기와 특성을 튜플 형태로 정의, 주로 (width, height) - display.set_caption : 게임창의 제목 설정 1. 배경 불러오기background = pygame.imag.. 공감수 0 댓글수 0 2024. 7. 6.
1. 환경설정 및 프레임 1. pygame 불러오기 및 초기화import pygamepygame.init() # 초기화 (반드시 필요, 만들기 전에 반드시 init 호출해서 초기화) 화면 크기 및 타이틀 설정screen_width = 480 # 가로 크기screen_height = 640 # 세로 크기screen = pygame.display.set_mode((screen_width, screen_height))pygame.display.set_caption("Sieon Game") # 게임 이름 이벤트 루프 - 프로그램이 종료되지 않도록 대기하는 것 - 중간에 사용자가 키보드/마우스로 뭔가 입력하는지 체크 - 입력이 된다면 키보드에 맞는 이미지를 움직이는 등 동작 실행 running = True # 게임이 진행중인가?while.. 공감수 0 댓글수 0 2024. 7. 6.
19. 출생아 수 및 합계 출산율 import pandas as pddf = pd.read_excel('142801_20240410181128997_excel.xlsx', skiprows = 2, nrows = 2, index_col = 0)dfdf.index.valuesarray(['출생아\xa0수', '합계\xa0출산율'], dtype=object)df.indexIndex(['출생아 수', '합계 출산율'], dtype='object')df.rename(index={'출생아\xa0수' : '출생아 수', '합계\xa0출산율': '합계 출산율'}, inplace = True)dfdf.index.valuesarray(['출생아 수', '합계 출산율'], dtype=object)df.loc['출생아 수']2011 471.32012 .. 공감수 0 댓글수 0 2024. 7. 5.
18. 인구 피라미드 남자 데이터 정의import pandas as pdfile_name = '202108_202108_연령별인구현황_월간.xlsx'df_m = pd.read_excel(file_name, skiprows=3, index_col='행정기관', usecols='B, E:Y')df_m.head(3) df_m.iloc[0].str.replace(',','').astype(int) #1,195,951 -> 119595 (정수형으로 바꿔줌)df_m.iloc[0]=df_m.iloc[0].str.replace(',','').astype(int)#바꾼거를 0번째 인덱스에 집어넣음df_m.iloc[0]df_m 여자 데이터 정의df_w = pd.read_excel(file_name, skiprows=3, index_col='.. 공감수 0 댓글수 0 2024. 7. 5.
17. Matplotlib 퀴즈 다음은 대한민국 영화 중에서 관객 수가 가장 많은 상위 8개의 데이터이다.주어진 코드를 이용하여 퀴즈를 풀어보시오.import pandas as pdimport matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams['font.family'] = 'Malgun Gothic'matplotlib.rcParams['font.size'] = 15matplotlib.rcParams['axes.unicode_minus'] = Falsedata = { '영화' : ['명량', '극한직업', '신과함께-죄와 벌', '국제시장', '괴물', '도둑들', '7번방의 선물', '암살'], '개봉 연도' : [2014, 2019, 2017, 2014, 2006,.. 공감수 0 댓글수 0 2024. 7. 4.
16. 여러 그래프 import matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams['font.family'] = 'Malgun Gothic'matplotlib.rcParams['font.size'] = 15matplotlib.rcParams['axes.unicode_minus'] = Falseimport pandas as pddf = pd.read_excel('../pandas/score.xlsx')dffig, axs = plt.subplots(2, 2, figsize=(10, 5))# 가로 2개, 세로 2개 총 4개 플랏 만들겠다# 두 개의 데이터를 튜플 형태로 받아오겠다는 뜻# 하위에 내가 몇개 플랏을 만들건지 정해주는 것fig.suptitle('여러 그래프 넣.. 공감수 0 댓글수 0 2024. 7. 4.
15. 산점도 import matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams['font.family'] = 'Malgun Gothic'matplotlib.rcParams['font.size'] = 15matplotlib.rcParams['axes.unicode_minus'] = Falseimport pandas as pddf = pd.read_excel('../pandas/score.xlsx')dfdf['학년'] = [3, 3, 2, 1, 1, 3, 2, 2]dfplt.scatter(df['영어'], df['수학'])plt.xlabel('영어 점수')plt.ylabel('수학 점수') import numpy as npsizes = np.random.rand(8.. 공감수 0 댓글수 1 2024. 7. 3.
14. 원 그래프 (심화) import matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams['font.family'] = 'Malgun Gothic'matplotlib.rcParams['font.size'] = 15matplotlib.rcParams['axes.unicode_minus'] = Falsevalues = [30, 25, 20, 13, 10, 2] #원그래프 그릴 때 values 와 labels 필요함.labels = ['Python', 'Java', 'Javascript', 'C#', 'C/C++', 'ETC']plt.pie(values, labels=labels, autopct='%.1f%%', startangle = 90, counterclock = Fals.. 공감수 0 댓글수 1 2024. 7. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.