awspspgh 님의 블로그

오늘은 set, map에 대해서 배워보도록 하겠습니다 1.데이터 구조화2.정규 표현식3.set & map4.예제 문제5.느낀 점 1. 데이터 구조화 많은 양의 데이터가 실시간으로 전달되어야할 때 가장 효율적으로 데이터를 보내는 방법 데이터 구조화 => 구조화된 텍스트 => JSON JSON(JavaSript Object Notation) javaScript 객체를 구조화된 데이터로 표현하기 위한 문자 기반 표준 포멧 웹 서버 () 화면 간에 데이터를 전송할 때 일반적으로 사용되는 데이터 포멧 자바스..

오늘은 array에 대해서 배워보겠습니다 목차1.array2.예제 문제3.느낀 점 1. array 배열 : 자바 스크립트에서 배열은 유동 배열(크기, 데이터의 변경이 자유롭게 사용가능) const myArray = [1,2,,'a','b',{}]; 배열에 데이터 타입은 제한이 없음. 같은 타입으로 채우는 것이 룰 배열의 사용 목적 : 관련있는 데이터를 묶어서 관리하기 위해 myArray=[] : 초기값으로 빈 배열을 만든 후 데이터를 추가하여 사용 index를 가짐 => 0부터 시작 length => 배열의 총 길이 ..

오늘은 if, switch, for에 대해서 배워보도록 하겠습니다 목차1.date2.if3.switch4.for5.예제 문제6.느낀 점 1. date 날짜 관련 함수 new Date(); => 오늘 날짜 반환 new Date(string); => string 날짜 형식으로 변환 getFullYear(); 연도만 리턴 getMonth()+1; => 0월부터 11월까지 +1 getDate(); => 1~31 리턴 getDay(); => 요일을 리턴 0(일)~6(토) getHours(), getMinutes(), getSeconds() : 시분초 추출 ..

오늘은 input, string에 대해서 배워보겠습니다. 목차1.input2.string3.예제 문제4.느낀 점 1. input form 태그를 통해 데이터 받아오기 input, textarea, select, html element 속성 input => value 속성에 값이 맵핑 되어있음. value 속성을 통해 값을 js로 가져올 수 있음. select => option, radio, checkbox value 값을 추가해주어야만 선택 값을 가져올 수 있음. value / innerText 값은 모두 string 처리됨. ..

오늘은 Java Script의 function, event에 대해서 공부해보겠습니다 목차1.설정2.let3.function4.event5.operators6.느낀 점 1. 설정- VSCode에서 파일 생성하고 파일명 뒤에 .js를 붙입니다 - 웹 사이트에서 F12를 누른 후 console에서 출력된 값과 Error를 찾을 수 있습니다  2. let- Html 자바 스크립트 사용법 <script> 작성 </script> 파일명.js 파일을 만들어서 코드 작성 후 src 경로로 연결 hearder 안에도 script 작성가능 (사용시 주의) body 태그 내 가장 하단에 script를 위치시켜 작성 (가장 많이 사용..

오늘은 롯데월드 민속박물관 웹 사이트를 따라 만들어보겠습니다. ▣ 롯데월드 민속박물관 웹 사이트https://adventure.lotteworld.com/museum/main/index.do ※ 확장 프로그램웹 사이트 오른쪽 상단에 있는 확장 프로그램을 클릭한 후 image downloader를 다운로드 받으면 다른 웹 사이트에서 사용된 이미지들을 다운로드 받을 수 있습니다. ▣ reset.css/* reset.css */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd,..

오늘은 flex에 대해서 배워보도록 하겠습니다 목차1.flex2.예제 문제3.느낀 점 1. flex Hello Flex World World Flex  ※ flex, grid를 자세하게 공부하고 싶다면 스튜디오밀의 1분 코딩 블로그를 보면 좋음! ▷ 출력 2. 예제 문제◎ 문제▶ 1번▶ 2번 ◎ 정답▶ 1번 DESIGN HOME LOGIN SIGNUP BOARD Welcome to Front-End World ..

오늘은 실습을 해보고, media에 대해서 배워보도록 하겠습니다 목차1.실습2.media3.예제 문제4.느낀 점 1. 실습▣ 배민 max-width - 엘리먼츠가 가질 수 있는 최대 크기의 값 - 화면의 크기가 커지더라도 엘리먼츠는 지정된 크기보다 더 커질 수 없음. - 레이아웃의 크기를 적절히 유지시키고 싶을 때 사용 min-width - 엘리먼츠가 가질 수 있는 최소 크기의 값 - 화면의 크기가 작아지더라도 엘리먼츠의 크기가 지정된 크기 이상 줄어들지 않음. - 컨텐츠의 손상을 막기 위해 사용  ▷ 출력 ◈ media Hello, HTML World..

오늘은 position을 복습하고 z-index, animation에 대해서 배워보도록 하겠습니다 목차1.position 복습2.z-index3.animation4.예제 문제5.느낀 점  1. position 복습▣ 1번  ▷ 출력 ▣ 2번 menu1 menu2 menu3 menu4  ▷ 출력  ▣ 3번 menu1 menu2 menu3 menu4 ※ box - sizing: border -- box;크기에 border 선을 포함시킴▷ 출력 2. z-index  ▷ ..

오늘은 font, box, position에 대해서 배워보도록 하겠습니다. 목차1.font2.box3.position4.예제 문제5.느낀 점  1. font◈ font 속성 안녕하세요 Magnetic ※ "font google" 웹 사이트: 폰트, 아이콘을 이용할 수 있는 사이트- : html에 삽입 (1. header에 삽입, 2. style에 삽입)- @import : css에 삽입 (1. css에 삽입, 2. style에 삽입) ▷ 출력   ◈ border Hello Hello Hello※ div.class 단축키: .class 명 + 'Enter' =>  ▷ 출력 ◈ background ※ background-color 단..