Object와 Array의 차이 object와 array의 가장 큰 차이점은 우리가 원하는 것을 찾고자 할 때, object에서의 value 순서는 문제가 되지 않지만 array에서는 순서가 매우 중요하다는 점이다. 접근 방법이 다르기 때문인데, array에서는 number를 이용해서 접근하기 때문이다. 그렇기에 순차적인 데이터는 array를 쓰고, 그렇지 않은 데이터는 object를 쓰는 것이 좋다. 또한, 데이터를 접근할 때 보통 이름을 통해 찾는데 object는 기본적으로 name 기반이라는 장점이 있다. Object 사용 방법 console.log(seulgi.lastName); 괄호 안에는 (object. property) 순으로 쓰여진다. . 은 연산자Operator의 역할을 한다. [ ] B..

Display Display 속성은 각 요소들이 렌더링 되어지는 화면 표기 방법을 결정할 수 있다. 속성들 중 none, inline, inline-block, block 4가지가 주로 쓰인다. HTML에서 기본 표시 값은 HTML 사양이나 브라우저나 유저의 기본 스타일 시트에서 가져오는데, XML의 기본값은 SVG 요소를 포함한 inline이다. 💡 XML ? : eXtensible Markup Language로 W3C에서 개발된 다목적 마크업 언어이다. 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 HTML의 한계를 극복할 목적으로 만들어 졌다. 💡 SVG ? : Scalable Vector Graphics. XML에 기반하여 벡터 그래픽을 표현하기 위해 개발된 그래픽 파일 형식이다. ..

Position Position 속성은 요소의 위치 지정 방법(static, relative, fixed, absolute, sticky)을 지정한다. 지정 후에는 top, bottom, left, right 속성을 통해 배치할 수 있으며, 지정 된 속성에 따라 해당 값들은 다르게 작동한다. (1) static HTML의 요소들은 static이 기본으로 배치되어 있다. position: static; 으로 지정 된 값들은 딱히 특별한 기능을 하지 않으며, 페이지에 의한 기본적인 흐름에 따라 배치된다. div.static { position: static; border: 3px solid #73AD21; } (2) relative position: relative;로 지정 된 요소는 기존의 위치를 기준으로..

Semantic Semantic 자체의 영어 뜻은 다음과 같다. 프로그래밍에서는 코드 조각의 의미를 나타낸다고 한다. "이게 어떻게 시각적으로 보여질까?" 가 아닌 "이 JS 코드 라인을 실행하는 것은 어떤 효과가 있는가?" 혹은 "이 HTML 요소가 가진 목적/역할은 무엇인가?" 에 대한 것이다. Semantic Web ? 그럼 Semantic Web이 뜻하는 바는 무엇일까? 해당 사이트에 따르면 현재 인터넷 사용자 수는 52억이고, 웹사이트는 19억개가 넘는다. www.internetlivestats.com 에 들어가면 실시간으로 움직이는 숫자들을 볼 수 있다. 그럼 이 수많은 사용자와 사이트들 사이에서 살아남기 위해선 어떻게 해야할까? 바로 검색이다. SEO Search Engine Optimiza..

CS50 Sandbox https://sandbox.cs50.io/ CS50 Sandbox Temporary programming environments for students and teachers. sandbox.cs50.io 폴더 아이콘 옆의 +버튼을 눌러서 파일을 생성해주자 int main(void) { } 의 뜻은 시작한다의 의미를 가지고 있다. 앞으로 작성할 코드는 모두 이 코드 안에 쓰게 될 것이다. printf("hello,world"); C언어에서 printf는 say와 동일하다. 출력하고 싶은 것이 있을 때 사용한다. 코드의 끝에는 항상 ; 을 적어줘야 하며, 글자나 단어, 문장을 적을 때는 항상 ""으로 감싸줘야 한다. 컴파일러 Compiler 이렇게 작성한 코드는 소스코드라 불리며,..

Book List 개발자의 글쓰기 김철수 모던 자바스크립트 Deep Dive 이웅모 코어 자바스크립트 정재남 프레임워크 없는 프론트엔드 개발 프란세스코 스트라츨로 모두의 네트워크 미즈구치 카츠야

display:none과 visibility:hidden는 둘 다 요소를 안 보이게 하는 한다. 그럼 어떤 점이 다를까? 아래 박스를 가지고 테스트를 해보자 .box { border: 10px solid #3498db; padding: 20px; width: 100px; margin: 20px; display: inline-block; } .green { border-color: green; } .red { border-color: red; } Box2에 display:none 적용 .green { border-color: green; display: none; Box2에 visibility:hidden 적용 .green { border-color: green; visibility: hidden; } 적..

body 태그에 속한 부분을 JavaScript를 통해 변경을 하려고 한다. 그러면 어떻게 body태그를 선택할 수 있을까? 다시 한번 정확히 정리를 해보자면, 우리가 하고 싶은 것은 CSS의 선택자를 이용해서 JavaScript에서 태그를 선택하고 싶은 것이다. 구글에다가 javascript select tag by css selector를 검색하여 어떻게하면 CSS를 선택할 수 있는지 찾아보자 https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Elem..

function makeBurger(){ console.log("빵두기") console.log("상추두기") console.log("고기패티두기") console.log("뚜겅덮기") } makeBurger() function makeBurger(type,size,num){ if(num false if(date){ return `${year}/${month}/${date}` } else if(month){ return `${year}년 ${month}월` } else if(year){ return `${year}년` } } console.log(meetAt(2021,1))

// for문 for(let i=1; i