📌Language 129

TIL) JS 기초, let vs const vs var, 함수 선언 3가지 방법, 원시형, 객체형, undefined 와 null의 차이

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; //재선언, 재할당 가능 함수 선언 방법 함수 선언식 => 호이스팅에 영향을 받는다. - 선언 전에 호출되도 정상적으로 동작! (호이스팅: 자바스크립트의 특징으로, 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올..

Javascript에서API키를 숨기는 방법

아래 사이트 참고해서 해결했습니다! 👇👇👇👇👇 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 요소 찾기, 추가하기 // js에서 linear-gradient 사용하기

오늘은 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 유효성 검사 사이트

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, 쌓임 순서, 툴팁 박스 (tool tip)

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

css position & offset / static, relative, absolute, fixed / css 공부할 때 보면 좋은 사이트

position 속성 요소의 위치를 정하는 방법을 지정하는 속성입니다. 기본 값 : static position: static | absolute | fixed | relative | sticky | initial | inherit; static Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값) absolute 부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어나고, display를 block으..

css display float과 clear

float 속성 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다. 레이아웃을 만들 때 영역을 좌우로 분할할 때 사용하는 용도로 선언한다. 기본 값 : none float: none | left | right | initial | inherit; none float 시키지 않음(기본값) left 좌측으로 float 시킴 right 우측으로 float 시킴 요소를 보통의 흐름에서 벗어나 띄어지게 함 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등) https://codepen.io/yongwon/pen/VjgqgN float ... codepe..