vscode_basic

VSCode를 차근차근 배워보겠습니다.VSCode는 html파일을 만들고!와 엔터키를 누르면이런 기본 형식이 자동으로 완성되며중간의 와 에 원하는 기능들을 집어 넣습니다.저장은 ctrl + s실행 결과창을 띄우고 싶을 때는 alt + l + o를 차례대로 누르면 됩니다

a href 하이퍼링크로 바로가기를 선언할 수 있습니다. 위에 적힌대의 문법을 지키면 쉽게 생성이 가능합니다.바로가기 문구를 적을 자리에 이미지의 주소를 삽입하는 것으로 바로가기의 이미지를 만들 수 있습니다.두 사람의 사진을 누르면 네이버와 잔디로 하이퍼링크를 걸 수

listvscode에서 list를 통해 요소들을 직관적으로 구성할 수 있습니다. 이렇게 간단하게 생성된 리스트에 a href로 하이퍼링크를 걸 수 있습니다.기본적인 중첩 리스트를 통해 게시판을 구성하거나 자료를 정리하는 간단한 과정을 이해할 수 있었습니다.

table이렇게 조잡하지만테이블을 통해 행과 열을 구성하여여행지 추천 툴과 공연요금 안내표를 만들어보았습니다.

forminput을 이용해 요소들의 타입과 이름, value를 지정하여 form을 만들어보겠습니다.password 타입으로 설정하면 \*\*\*으로 문자가 가려서 보여집니다.radio 타입으로 두개 이상의 컬럼들 중 하나만 선택하도록 할 수 있습니다.checkbox 타

form .2다양한 type들을 잘 활용하면 효율적으로 html을 구성할 수 있겠습니다.배운 것들을 활용하여 모의 글쓰기 창을 만들어 보았습니다.

id 선택자는 태그명과 상관 없이 특정태그에 부여된 id="값"을 고려해서 css를 적용하는 선택자입니다. 이 때, 특정 id를 부여하는 경우 같은 이름을 2개 이상의 태그에 동시에 부여하지 않는 것이 원칙입니다.타입 선택자는 태그이름을

/ > / + 선택자 위 간단한 body내의 태그들, 리스트들의 가계도를 그려보겠다.개인적으로 만족스러운 그림입니다.이렇게 리스트와 태그들 사이의 관계를 가계도로 이해할 수 있게 되었다면이제 그들을 특정할 수 있습니다.ul > li > p { } 즉, ul 하위의 l

align텍스트들을 편집할 수 있는 문법들을 배워보겠습니다.width = 너비left = 왼쪽 정렬right = 오른쪽정렬center = 중앙정렬justify = 양쪽 정렬정렬 문법은 {text-align: @@@;}입니다.바로 코드로 적용해보겠습니다.이미지를 상하단

padding padding은 어떤 박스공간의 경계와 실제 내부 요소 간의 거리를 설정합니다.값을 하나만 적으면 상하좌우 4군데에 그 값이 적용됩니다.두 개 적으면 (상하, 좌우) 거리순으로 두 개의 값이 적용됩니다.네 개 적으면 12방향부터 시계방향으로 차례로 적용됩

float을 걸고 나서 해제를 할 떄float 다음 요소가 온다면 그냥 both:clear;를 주면 되지만 만약에 float이 마지막 요소여서 clear를 걸어줄다음 요소가 존재하지 않는 경우...아무 요소도 없는 빈 태그를 하나 아래에 배치하고 clear:both를

overflow레이아웃이 담을 수 없을 만큼 큰 텍스트 요소들이 넘치는 현상을overflow라고 합니다.overflow:hidden; -넘치는 컨텐츠를 그냥 숨겨버림overflow:auto; -넘치는 컨텐츠가 있으면 스크롤바 생성overflow:s

layout 작업 기초 layout 작업을 할 때 기본적으로 header, body, footer 세 부분으로 분할을 합니다. header, footer는 그냥 한 부분으로 둬도 상관없지만 보통 요즘 많이 사용하는 레이아웃은 body쪽을 2~3분할 하기 때문에

position포지션은 블록을 박스의 위치를 기준으로 배치하는 기술입니다.주로 컨텐츠를 겹치게 배열하거나 덮어씌우는 등의 상황에 유용하게 쓰입니다.position:static - 요소를 겹칠 수 없는 상태(디폴트값)를 부여합니다.position:relative - ab

Hello JavaScript를 페이지에 띄워보았습니다.지금부터는 JS에 관한 여러가지를 배우기 전에document.write(); 를 이용해 의식을 치룹시다.JS 출력코드JS 에서는 scrips태그가 main method같은 역할을 합니다.이 부분에 자바 스크립트 코

promptprompt문을 활용해 마치 자바의 스캐너처럼사용자의 입력을 받을 수 있습니다.prompt("질문내용");이렇게 사용자의 값을 입력받고 그 값은console.log();로 콘솔에 저장할 수 있습니다.prompt("질문내용", "디폴트값");으로 활용할 시 사

구구단 / 별찍기어제 배운 prompt를 이용해서구구단 스크립트를 작성해봅시다.prompt를 이용해 입력받은 수의 구구단을 화면에 출력하게만들어볼 것 입니다.별도 한 번 찍어보겠습니다.prompt를 이용해 입력받은 숫자만큼\*\*형식으로 점점 커지는 별 피라미드를 찍는

JS의 내장클래스JS 역시 new 키워드를 이용해 클래스를 만들고그 클래스의 객체를 생성해서 사용할 수 있습니다.JS클래스의 목적도 변수와 메서드를 같은 소속으로 담아사용하기 위함이며마치 자바의 java.util.\* 처럼미리 만들어져 있는 내장클래스를 쓸 수도 있습니

Math단순하게 수를 더하거나 뺄 때는 산술 연산자를 쓰지만반올림, 최대값, 최소값을 구한다던지 아니면난수를 요구하는 코드를 짤 때 Math는 중요합니다.Mate는 static 속성이 있어서 new 키워드로 생성하지 않아도바로바로 쓸 수 있습니다.실습해보겠습니다.그럼

String자바스크립트도 문자열을 다룰 수 있습니다.그래서 문자열을 다루거나 문자열을 생성하기 위해String이라는 객체를 만들어 사용합니다.교과서적으로는 아래와 같이var str1 = new String("자바 스크립트");이렇게 선언하지만var str2 = "자바스

JS의 함수는 기본적으로fuction 함수명(파라미터1, 파라미터2 ...) { 실행문 ; }형식으로 선언합니다. 호출은함수명(자료1, 자료2, 자료3....);이런 식이죠.함수선언함수호출간단합니다. 그럼 다른 함수도 선언해볼까요.greet2() 함수는 특정버튼

이미지 넘기기이미지 태그를 만들고fuction을 이용해 태그를 누르면 이미지가 넘어가도록 작동하는로직을 만들어보겠습니다.num ++ 를 이용해서 폴더 내부에 있는 img0, img1, img2 파일들을차례로 화면에 출력시켜보려고 합니다."img/img" + num +

scopeJS에도 힙, 스택, 코드 영역이 존재합니다.고로 역시 지역변수와 전역변수 개념이 존재하며지역변수와 전역변수의 개념과 기능 또한 다른 언어와대체로 유사하게 적용됩니다.theFnc()함수 안에서 var num 을 선언했습니다.그리고 그 theFnc()지역 밖에서

builtin자바스크립트는 사용자의 편의를 위해서기본적인 기능을 내장함수로 제공하고 있습니다.builtin 이란 말 그대로입니다.바로 어떤 것들이 있는지 기본적인 문법을 정리해봅시다.eval() = 문자열을 자바스크립트 코드로 변환parseInt() = 수를 정수로

locationlocation은 현재 브라우저가 위치한 url값을 제공하거나url 변경에 관여하는 기능입니다.location.hash => 주소창에 url에서 location.host => 주소창 url에서 도메인명을 반환location.hostname => url에서

historywindow.history를 이용해 우리는이전 페이지, 다음 페이지로 이동하는 기능을 추가할 수 있습니다.history는 방문했던 url 주소를 바로바로 불러와주기 때문에 유용하게 사용할 수 있습니다.history.go(i) => i 값만큼 다음, 이전 페

DOMDOM 이란Document Object Model의 약자로각 태그 하나하나를 하나의 자료로 보며계층구조를 통해 인식하는 것을 의미합니다.웹 페이지를 서버 재호출 없이 변형시킬 수 있는만큼잘 익혀두어야할 기술입니다.원거리 선택자태그에 지정한 id를 이용해서특정 태그

onclick DOMonclick을 이용해 DOM 내부 요소들에 이벤트들을 추가해보는 작업을 해보겠습니다.DOM 조작과 ONCLICK 이벤트를 같이 조합해서사용자가 특정 요소를 클릭했을 때 DOM 조작이 일어나도록 하는 것이 일반적입니다.코드를 보면서 생각해봅시다.구현

createElement텍스트를 집어 넣거나 교체하는 식의 로직을 기초적으로 연습해 보았습니다.이번에는 단순 텍스트가 아닌 element, 요소들을 집어넣는부분에 대해서 알아보겠습니다.순서를 지킵시다.createElement를 이용해 가상요소를 만들어줍니다.가상요소의

jqueryjquery는 자바스크립트를 활용한 DOM 조작을더 쉽고 간편하고 빠르게 달성하기 위해 사용하는 라이브러입니다.부트스트랩처럼 CDN형식이나 혹은 jquery.hs 파일을받아 import해야 해당 html 문서에 적용됩니다.head 태그 밑에 import해주면

jquery의 선택자jquery의 탐색 선택자 기능들을 이용하면좀 더 정교한 element 선택이 가능합니다.종류가 매우 많습니다. 하나씩 정리해보겠습니다.$("ul ii:odd:") - ul내 li중 홀수번째만 선택$("ul li:even") - ul내 li중 짝수번

event binding특정 이벤트를 DOM을 이용해 element와 연결하는 것을event binding이라고 합니다.기초적인 이벤트의 종류들은 아래와 같습니다.click(함수) - 선택 요소 클릭 시 함수 실행dbclick(함수) - 선택요소 더블 클릭 시 함수 실

effect이벤트를 통해 태그를 자유자재로 조작할 수 있게 되었습니다.하지만 단순하게 숨기고 색깔을 바꾸기만 하는 건언제부턴가 멋지지 않은 것 같습니다.좀 더 심미적이고 지루하지 않게 화면구성을 하는 것이사용자 경험을 향상시킬 수 있을 겁니다.effect를 이용해서이벤

button().text 아무런 메뉴판이나 만들어보겠습니다. 이 메뉴판은 버튼을 누르면 생기고 한번 더 누르면 사라질 겁니다. 그리고 누를 때마다 '메뉴닫기' '메뉴열기'로 버튼의 text가 변경될 것 입니다. $("요소지정").text()로 사이에 든 문

MJSES5까지 JS에ㅓ 변수를 선언할 때는오로지 var키워드를 써서 선언을 해왔습니다.var 키워드는 변수 중복 선언을 허용하며함수레벨 스코프도 중복 처리가 가능합니다.장점도 있지만 여러 문제를 야기했습니다.변수 중복 허용의 문제x에 이미 선언된 값이 있는데도같은 지

MJS - functionES6 이전에는 함수를 여러가지 형태로 사용했습니다.일반 함수, 생성자 함수, 메서드 등의 방식으로활용할 수 있었지만메모리 낭비나 실수 유발 등의 문제가 조금씩 있어왔습니다.JS에서는 함수를 '일급 객체'로 분류합니다.일급 객체 (First C

spread스프레드 (전개) 문법은 JS 내부의 리스트 자료형을펼쳐서 사용해야 할 상황일 때 유용하게 사용됩니다.for문에 인덱스 번호를 넣어서 하나하나 나열할 수 있는자료들은 전부 스프레드 문법을 받아서 쓸 수 있습니다.문법은...리스트자료이렇게 쉽게 쓰면 됩니다.리

disctructure디스트럭처링 할당(비구조화 할당, 구조분해 할당)은배열을 하나하나 쪼개서 변수에 대입하는 것 입니다.배열된 자료를 빠르게 분해할 때 유용합니다.ES5 까지는 위와 같이 하나하나 할당을 해줘야 분해할 수 있었습니다.그러나 ES6 이후 다음과 같이 할

부트스트랩부트스트랩까지 왔습니다.부트스트랩은 퍼블리싱이나 프론트 엔드 개발에 유용한프레임워크입니다.보다 쉽고 간단하며 직관적으로 페이지를 구성할 수 있게 도와주며그러기 위해서는 grid system을 잘 이해해야합니다.기본 그리드div class="low'>를 이용해

offset오프셋은 그리드 내부에 임의로 빈칸을 할당하는 것을 뜻 합니다.div class="col-md-2 offset-md-2"와 같은 문법으로이 div 클래스의 앞칸에 몇 2그리드를 비우고 싶을 때offset-md-2로 선언하면 됩니다.간단합니다.오프셋과 div

그리드 시스템을 이용하여content 클래스가 3분할이 되어있는헤더, 콘텐츠, 푸터 형식의 레이아웃을 짜보겠습니다.이렇듯 스타일 태그를 따로 작성하지 않아도class=""옆에 style=""을 지정해서스타일을 수정해줄 수 있습니다.다른 방법도 있습니다.

그리드 시스템을 이용하여content 클래스가 3분할이 되어있는헤더, 콘텐츠, 푸터 형식의 레이아웃을 짜보겠습니다.이렇듯 스타일 태그를 따로 작성하지 않아도class=""옆에 style=""을 지정해서스타일을 수정해줄 수 있습니다.다른 방법도 있습니다.

부트스트랩의 타이포그래피는 글꼴이라고 생각하시면 됩니다.h1부터 h6까지 사용 가능합니다.small은 원하는 텍스트를 한 단계 정도 더 작고 얇게 표현해줍니다.small태그를 작성한 후 그 사이에 텍스트를 적용하면 됩니다.반대로 strong은 원하는 텍스트를 더욱 강조

주소인용구목록리스트-언스타일드리스트-인라인

테이블클래스에 테이블을 부여함으로서 선을 긋거나 표를 나눌 필요없이 쉽게테이블을 만들 수 있습니다.table-stripedstriped는 테이블의 선을 벗겨줍니다.table-borderedbordered는 테이블의 끝에 선을 입혀줍니다.table-hovertable-h

button버튼태그를 이용해 할 수 있는 모든 것을 알아봅시다.먼저 기본 버튼입니다.클래스 선택자를 적용하지 않으면 회색창에 각네모의 못생긴 버튼이 생깁니다.class="btn"만 지정한 경우에는 일반 텍스트에 버튼기능이 추가되어있는 형태가 됩니다.btn-btn-색상,

input-group입력그룹은 아이디나 이메일, 금액과 같은 텍스트를 사용자에게 입력받도록 하는 도와주는 태그입니다.div class="input-gruop"을 통해 선언합니다.prepend // appendinput-group클래스 내에input-group-prepe

div class="btn-group"버튼 그룹을 작성하고자 한다면div class="btn-group"의 한 클래스 안에버튼을 모두 삽입하면 됩니다.btn-toolbar버튼을 툴바 형식으로 변환하고자 할때는duv class="btn-toolbar"로 선언한 뒤그 안에

nav네비게이션을 이용해 메뉴바를 만들거나 원하는 텍스트를 보이게 하고숨길 수도 있습니다.먼저 네비게이션을 어떻게 작성할 지 알아봅시다.보시다시피 리스트를 선언할 때 class="nav nav-tabs"로 작성하면 탭형class="nav nav-pills"로 작성하면

badge뱃지 태그를 이용해서 리스트나 메뉴바에 여러가지 효과를 나타내는 태그를 붙일 수 있습니다.뱃지는 badge bg를 이용해 선언할 수 있습니다.이렇듯 td태그 안에 span class="badge bg-\~~"으로 선언하면 secondary, danger, in

cookie웹 브라우저에서 서버로 데이터를 요청할 때, 서버측에서는 로직을 수행한 후에데이터를 웹 브라우저에 응답해줍니다.그리고 Http 프로토콜은 응답 후에 웹 브라우저와의 관계를 종료합니다.그렇게 연결이 끊겼을 때, 어떤 정보(로그인 여부, 검색기록 등)을 지속적으

response웹 브라우저의 요청에 응답하는 것을 response라고 합니다.이러한 응답의 정보를 가지고 있는 객체를 response 객체라고 합니다.response 객체의 주요 메서드getCharacterEncoding(): 응답할 때의 문자의 인코딩 형태를 구합니다

cookie_logincookie를 이용하여 로컬 서버에서 로그인 처리를 해보겠습니다.로그인 아이디는 "abc1234"인 경우만 허용비밀번호는 "1111"인 경우만 허용하겠습니다.이 경우 조건문에서 3가지로 결과로 나뉩니다.아이디가 없는 경우 -> login_id_fa