exestudiary

document.title, document.body 을 호출 가능 (console 창에서) document는 우리가 javascript 에서 HTML에 접근할 수 있는 방법이다. document는 브라우저에서 그냥 사용할 수 있는 object임. document.getElementById("title") getElementById => string을 전달받는 함수 const title = document.getElementById("title") #getElementById는 HTML에서 id를 통해 element를 찾아준다. console.dir(title) Grab me! HTML을 가지고 오는거지만, 그걸 JavaScript에서 하고 있음. JavaScript는 이 HTML element를 가지고..

return > function으로 무언가를 해서 function에서 결과값을 갖고 싶을 때 > function이 function 밖과 소통하는 방법 > console.log()를 찍지 않아도 코드 내에서 반환값을 받을 수 있다. > return을 하면 function은 작동을 멈추고 결과 값을 return하고 끝나버린다. 예 1. return을 쓰지 않았을 때 const age = 21; function caculateKrAge (ageOfForeigner) { ageOfForeigner + 2; } const krAge = caculateKrAge(age); console.log(krAge); 결과값이 나오지 않는다. 2. return을 쓴다면 const age = 21; function cacula..

Object > 게임 같은 거를 생각하면 player 에다가 경험치, 이름, 인기도 이런 거를 설정할텐데 const playerName = "daesung" const playerFat = "little bit" const playerage = 23 이런 식으로 설정하면 번거롭다. 그래서 object 를 할 건데, > object는 이런 식으로 설정 // 중괄호가 들어간다는 거 기억 // object 안과 밖의 규칙은 다르다. 밖에서는 = 을 사용하지만, 안에서는 : 을 사용 // 한 개의 특성(예, name : "daesung")을 설정하면 다른 특성도 올 수 있으니깐 그 뒤에는 ,를 사용한다. // player의 name에 접근하고 싶을 때는 player.name 또는 player["name"] co..

숫자와 문자 > 자바스크립트는 숫자는 그대로 쓰면 인식한다. > 문자는 " '', ' ' 이 안에다가 써야 한다. 문자로만 이루어진 텍스트를 string이라고 부른다. 변수 설정 > 변수 앞에 const (const 대신 let, var을 붙여줘도 됨.) 를 붙여주고 자신이 원하는 변수 이름을 설정하면 된다. > 변수가 길 때 띄어쓰기를 해주고 싶으면 아래 코드 myName 과 같이 띄어쓰기 해주고 싶은 부분의 뒤에 문자를 대문자로히면 된다. const a = 5; const b = 2; const myName = "daesung"; cf. const와 let의 차이점 > const 는 constant(상수)라는 것이고, constant 는 값이 바뀔 수 없다. > let 은 새로운 것을 생성할 때 사용..

자바스크립트가 없는 브라우저는 보기 힘들다. (그만큼 많다.) 자바스크립트 제대로 배워 놓으면 나중에 편하다. 시작하기 전에 HTML과 CSS는 조금 할 줄 알아야한다. HTML이랑 CSS가 뭐고 어떤게 있는지만 알면 된다. 너무 자세하게 알 필요는 없다. 자바스크립트를 다루는 방법은 브라우저의 console을 사용하면 된다. 어떻게 하냐면 어디든지 웹 페이지에서 우클릭을 하고 제일 하단에 있는 검사를 누르면 이런 화면이 뜨는데 저기서 빨간색으로 동그라미 한 곳을 들어가면 된다. 참고로 여기서 검은색 네모칸이 HTML 부분이고 노란색 네모칸이 CSS부분이다. console에 들어가면 이렇게 나오는데 여기서 코딩을 할 수는 있지만 한 줄씩 해야해서 번거롭다. 그러니 VS code를 사용해서 하면 된다. 그..

HTML 태그 구역 문단 제목 소제목 h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아진다. https://spartacodingclub.kr/"> 하이퍼링크 >>> href는 속성 https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/logo_teamsparta.png" width="300"/> >>> src는 속성 버튼입니다. 선택자의 역할을 하는 class 와 id 1) 단 하나만 존재하는 요소를 표현하기 위한 방법 → id 2) 비슷한 종류의 요소를 묶어놓는 방법 → class CSS 1) class로 이름표 달아주기 제목 2) id로 이름표 달아주기 제목 3) 꾸며주기 부분에 이 부분을 넣어주면 된다. .mytit..

주석 > ctrl(또는 command) + / (슬래시) > 언제 사용하나 1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 사용 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용 / 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다. 파일분리 > 부분이 너무 길어지면, 보기가 어렵다. > 지금은 그다지 길지는 않지만 나중에 필요할 거 같으니 알아두자. 빨간색 네모칸이 style 부분인데 이 부분을 잘라낸다. 그리고 파일을 하나 만들건데, 이름은 style.css로 한다. style.css에 잘라낸 파일을 넣는다. 그렇게 잘했다면 위와 같이 나온다. 위와 같은 코드를 넣는다. 이렇게 하면 결과는??? 저번에 했던 거와 똑같이 나온다. 부트스트랩 > 예쁜 CSS를 미리 모아둔..

구글 폰트 적용하는 방법 이건 앞에서 했던 거에 비하면 굉장히 쉽다. 구글 폰트에 들어가서 자신이 마음에 드는 폰트를 하나 고른다. 그리고 그림에서 보는 바와 같이 1번을 클릭하고 2번을 복사해서 html의 style 부분에다가 붙여준다. 하지만 이것만 한다고 해서 웹사이트의 폰트가 바뀌지 않는다. Use on the web 이라고 적혀있는 부분에서 스크롤바를 내리면 동그라미 친 부분을 복사하고 붙여주면 된다. 로그인 페이지 아이디, 비밀번호를 입력하세요 ID : PW : 로그인하기 여기서 style 부분을 유심히 살펴보면 복붙하라고 한 부분이 보일거다. 근데 여기서 *{} 이렇게 돼있는 곳이 보일텐데 이건 폰트를 전체에 적용한다는 뜻이다. 그리고 코딩에서 *이 등장하면 모두 다 라는 뜻이니깐 참고하자...

HTML 부모-자식 구조 살펴보기 > HTML 태그는 누가 누구 안에 있느냐를 이해하는 것이 가장 중요하다. > 자신을 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다. > 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리이다. 나는 버튼 1 나는 버튼 2 여기서 복습! head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다. head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 걸 담는 것이다. 이렇게 해서 저 코드를 통해 open with live server 를 클릭해서 구현하면 이런 식으로 나온다. CSS의 기초 CSS는 안에 로 공간을 만들어 작성한다. 로그인 페이지 ID: PW: 로그인하기 이 코..

웹 브라우저 원리 브라우저는 서버에서 미리 준비해둔 걸 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할을 한다. 요청을 보내고 받은 HTML 파일을 그려주는 거. 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려준다. 예 : https://naver.com/ > 여기서 naver.com이라는 이름의 서버에 있는 / 라는 곳에 요청을 보낸 거다. > 네이버에서 요청을 보냈으니깐 그에 대한 대답으로 네이버 홈에 해당하는 HTML 파일을 준 거다. 그런데 항상 HTML 파일로 내려주는 건 또 아니다. 데이터만 내려줄 때가 더 많다. 만약 우리가 영화 티켓을 예매하고 있는 상황에서 좌석이 실시간으로 매진 될 때마다 페..