Today Hailie Learned

논리연산자 NOT 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다. !false // true !(3>2) // false !undefined // true (undefined를 false로 취급-falsy) !"hello" // false ("hello"를 true로 취급-truthy) !0; // true 기억해야 할 9가지 falsy 값 if 문에서 false로 변환되기 때문에, if 구문이 실행되지 않습니다. if (false) if (null) if (undefinded) if (0) if (-0) if (NaN) if ('') if ("") if (``) 선언과 호..

HTML(Hyper Text Markup Language) = 웹을 구성하는 가장 기초가 되는 뼈대 HTML을 구성하는 기본 단위는 태그입니다. 여는 태그와 텍스트 문구 그리고 닫는 태그를 이용하여 만든 것들을 하나의 element(엘레먼트 혹은 요소)라고 부릅니다. : 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다. : 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다. : 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다. 이미지 태그는 src라고 부르는 하나의 속성을 갖고 있습니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. 이미지 주소 얻는 방법 1. 웹에서..

let 키워드와 const 키워드의 차이 const - always let - sometimes var - never const 재선언 금지, 재할당 금지 let 재선언 금지, 재할당 가능 var 재선언 가능, 재할당 가능 const a = b; const a = c; //재선언 금지 const a = b; a = c; //재할당 금지 let a = b; let a = c; //재선언 금지 let a = b; a = c; //재할당은 가능 var a = b; var a = c; a = d; //재선언, 재할당 가능 함수 선언 방법 함수 선언식 => 호이스팅에 영향을 받는다. - 선언 전에 호출되도 정상적으로 동작! (호이스팅: 자바스크립트의 특징으로, 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올..

아래 사이트 참고해서 해결했습니다! 👇👇👇👇👇 https://stackoverflow.com/questions/41255861/how-to-pass-variable-from-one-javascript-to-another-javascript-file How to pass variable from one Javascript to another Javascript file I tried the following, trying to pass a variable from one JavaScript file to another JavaScript variable. My first JavaScript file: var x = "sachin"; My other JavaScript file can't access tha..

오늘은 javascript로 html 안에 있는 body 요소를 찾고 추가하는 방법에 대한 포스팅입니다. 나의 목표! html에 있는 버튼을 누르면 js에 쓴 함수인 function 실행하고 이걸 html에 넣기! 1. html 요소를 가져오자. 나는 html - body - button을 가져올겁니다. const button = document.querySelector("button"); // html의 button을 불러오고, 이걸 js에서 button이라고 부를거야! const body = document.querySelector("body"); // html의 body을 불러오고, 이걸 js에서 body라고 부를거야! 2. js에 button을 누르면 기능이 나타나게 하자. button.addEv..

1. 디스플레이 크기에 따른 body요소의 background-color 변경하기 0~767px 이면 : gold 768px~1024px 이면 : lightblue 1025px~ 이면 : lightpink @media screen and (max-width: 767px) { body {background-color: gold;} } @media screen and (min-width: 768px ) and (max-width: 1024px) { body {background-color: lightblue;} } @media screen and (min-width: 1025px) { body {background-color: lightpink;} } ⬆️위 식처럼 정직하게 크기별로 3가지 색상에 대한 식을..

어린이날을 기준으로 카운트다운 웹페이지를 만들어봤어요! const clockTitle = document.querySelector(".js-clock"); function getClock() { const dday = new Date("December 25, 22 00:00:00").getTime(); const today = new Date().getTime(); const gap = dday - today; console.log(gap); const day = Math.floor(gap / (1000 * 60 * 60 * 24)); const hour = String(Math.floor((gap / (1000 * 60 * 60)) % 24)).padStart( 2, "0"); const min = S..

미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것이다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다. @media(at media) 미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일하다. @media mediaqueries { /* style rules */ } @media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻이다. 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어간다. 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나..

HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 합니다. 유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 됩니다. https://validator.w3.org The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org

요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다. 이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다. 이것을 정하는 것이 바로 z-index의 역할입니다. 쌓임 순서는 z-index 속성 값을 설정하여 바꿀 수 있다. z-index 속성 기본 값 : auto 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다. z-index: auto | number | initial | inherit; auto 쌓임 순서를 부모와 동일하게 설정(기본값) number 해당 수치로 쌓임 순서를 설정(음수 허용) /z축의 순서를 지정/ z-index: 1;​ position 값이 static이 아닌 경우 지정가능 순서 ..