본문 바로가기

전체 게시글374

[Javascript] input 태그 / onclick / parseInt / 계산기 기초 / 두 수의 합 구하기 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 사용하는 form 태그에 대해서 알아보았습니다. [HTML] form / 서버 / 클라이언트 / GET과 POST의 차이에 대해서 / method: get / method: post 폼 (form) 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 폼을 이용해서 서버에 전송합니 starting-coding.tistory.com 두 수를 입력받아 더하기를 해주는 화면을 구현했다고 가정해봅시다. 핵심 소스 코드는 다음과 같습니다. + = 소스 코드 중 onclick = ".. 2022. 9. 22.
[HTML] form / 서버 / 클라이언트 / GET과 POST의 차이에 대해서 / method: get / method: post 폼 (form) 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 폼을 이용해서 서버에 전송합니다. 먼저, 폼을 이해하기 위해서는 우선 서버와 클라이언트 개념을 이해해야합니다. 서버: 정보를 제공하는 쪽 클라이언트: 정보를 제공 받는 쪽 예를 들어, 웹브라우저의 주소창에 티스토리 주소인 https://www.tistory.com/을 입력하면 웹 브라우저는 tistory.com 에 해당하는 컴퓨터에게 컨텐츠를 요청한다. 이 맥락에서 웹브라우저는 정보를 요청하는 쪽, 제공받는 쪽이므로 클라이언트가 되며, tistory.com의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기떄문에 서버가 된다. 사용하는 예를 들자면, 태.. 2022. 9. 22.
[Javascript] set() 메서드 / 임의 숫자 출력 / Math.radom() 메서드 / break / 로또번호 만들기 지금까지 공부했던 내용을 기반으로 로또 번호를 console에 출력하는 프로그램을 만들어보겠습니다. [Javascript] set() 메서드 / add() / size / for of / for Each set은 중복을 허락하지 않고, 교, 합, 차집합이 가능함에 따라서 중복을 제거하는 용도로 사용 데이터를 삽입한 순서대로 요소를 순회 // 대문자 주의 // "iterable" => 반복 가능한 객체 new Set([iterable] starting-coding.tistory.com [Javascript] 수학 객체 / Math.abs() / Math.max() / Math.min() / Math.pow() / Math.random() / Math.round() / Math.ceil() / M 자바스크립.. 2022. 9. 21.
[CSS] Flexbox / container / item / vh / % / display / flex-direction / flex-wrap / justify-content / align-items / Flexbox의 구조는 외곽의 큰 box를 "container"라고 하고, 내측의 박스들을 각각 "item"이라고 하자. container에 적용할 수 있는 속성 display flex-direction flex-wrap flex-flow justify-content aligj-items align-content item에 적용할 수 있는 속성 order flex-grow flex-shrink flex align-self 최상위 div class "container"를 만들었고, 하위에는 1 ~13 까지의 div class "item" 만들었다. //CSS .container { background-color: beige; height: 100%; } .item { width: 50px; height: .. 2022. 9. 20.
[CSS] - display / position / inline-block / static / relative / absolute / fixed / sticky See the Pen css block / inline by hbkuk (@hbkuk) on CodePen. div 태그와 span 태그의 display 타입을 각각 반대로 변경한다면? div { background-color: red; display: inline; } span { background-color: blue; display: block; } div 태그의 display: inline-block으로 변경한다면? // block element가 한줄에 한개씩 display: block; // block element가 한줄에 다 배치 display: inline-block; 한줄에 하나씩 배치되지 않고 1줄에 배치 See the Pen Untitled by hbkuk (@hbkuk) on C.. 2022. 9. 20.
[Javascript] 브라우저 객체 모델 / BOM(Browser Object Model) / window 객체 / open() 메서드 / close() 메서드 / setInterval() 메서드/ setTimeout() 메서드 / screen 객체 / 브라우저 객체란? 브라우저에 내장된 객체를 '브라우저 객체'라고 함. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있음. 계층적 구조이며, 이를 BOM(Browser Object Model)이라고 함. window 객체: 브라우저 객체의 최상위 객체 open("URL, "새 창 이름", "새 창 옵션") URL 페이지를 새창 alert(data) 데이터로 된 경고창을 보여주며, 사용자가 [확인] 버튼을 누르면 다음 코드를 수행 prompt("질문, "답변") 질문과 답변으로 구성된 질의응답 창을 보여줌 confirm("질문 내용") 질문 내용으로 확인이나 취소 창을 보여주며, [확인] 버튼은 true, [취소] 버튼은 false를 반환 moveTo(x,y) .. 2022. 9. 20.
[Javascript] map 메서드 / key값 / value값 / map.get() map 메서드 선언방식 map 생성 방식 1 let emptyMap = new Map(); console.log( emptyMap); map 생성 방식 2 let map2 = new Map( [ [ "key1", "value" ], [ "key2", "value2" ], [ "key3", "value3" ] ]); console.log( map2 ); console.log( map2.size ); key를 이용해 value를 저장한다. 데이터 불러오기 배열에서 했던 방식대로 저장된 데이터를 불러오자. let map2 = new Map( [ [ "key1", "value" ], [ "key2", "value2" ], [ "key3", "value3" ] ]); console.log( map2[0]) con.. 2022. 9. 20.
[Javscirpt] for Each / 배열 순회 forEach() 메서드는 배열을 순회하는 여러 방법 중 하나입니다. 아래와 같은 숫자 배열이 있습니다. const numbers = [1, 2, 3, 4, 5, 6]; for문을 통해서 배열을 순회하는 방식은 아래와 같습니다. for ( i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 그렇다면 forEach 메서드는? 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다. forEach 메서드는 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다. Current Value (명명된 매개변수) - 처리할 현재 요소 Index (선.. 2022. 9. 20.
[Javascript] set() 메서드 / add() / size / for of / for Each set은 중복을 허락하지 않고, 교, 합, 차집합이 가능함에 따라서 중복을 제거하는 용도로 사용 데이터를 삽입한 순서대로 요소를 순회 // 대문자 주의 // "iterable" => 반복 가능한 객체 new Set([iterable]); 사용 예 // 선언 let set = new Set(); // 데이터 추가 set.add( "축구" ); set.add( "농구" ); set.add( "배구" ); // 출력 console.log( set.size ); console.log( set ); 데이터를 추가할떄는 add() 라는 메서드를 사용하고, 데이터의 갯수를 확인할때는 length가 아니라 size()라는 메서드를 사용. 중복을 허락하지 않기에 같은 이름의 데이터를 추가해도 set.add( "축구" ).. 2022. 9. 20.

티스토리툴바