본문 바로가기
728x90
반응형

분류 전체보기231

js 변수 종류와 TDZ, hoisting let, const js는 그 동안 var만 존재했기 때문에 이미 만들어진 변수이름으로 재선언해도 아무런 문제가 발생하지 않았다. 그로 인해 변수 재선언 불가능한 const, let이 ES 2015 에서 추가 되었다. const : 변수 재할당, 재선언 불가능 let : 변수 재할당 가능, 재선언 불가능 but 블록이 다를 경우 가능 let a =5 //선언 let a =7 //재선언 불가능 a = 6 //재할당 가능 let vs var let은 볼록 명령문이나 let을 사용한 표현식 내로 쓸 수 있는 변수를 선언할 수 있다. var은 블록을 고려하지 않고 어디에서나 접근 가능하다 (전역 범위) let a = 6; if (true) {let a =7; console.log(a); //7 } console.. 2022. 7. 21.
js string "", '' 안에 텍스트가 들어가면 string 형입니다. string 대소문자 바꾸기 let lastName = 'Yeri Kim'; let upperLastName = lastName.toUpperCase(); let lowerLastName = lastName.toLowerCase(); console.log(lastName); // Yeri Kim console.log(upperLastName); // YERI KIM console.log(lowerLastName); // yeri kim toUpperCase() 와 toLowerCase()를 활용 문자 길이 if (phoneNumber.length !== 10 && phoneNumber.length !== 11) { alert("폰 번호 제대로 입.. 2022. 7. 21.
검색창 만들기 (html, css) 👆 위 검색창을 만들기까지 정말 오랜 시간이 걸렸다 🥹 그 과정을 기록한 블로그 html 블록 결정하기 1. weelgle 이미지 2. input 창과 3개의 아이콘 3. 2개 button 4. 태그 이렇게 4개로 크게 블록 설정을 했다. css를 최대한 간단히 하기 위해 모두 div class로 묶었다. html ※ 2번 묶음 class things 를 보면 [돋보기-input박스-마이크-키보드] 순으로 넣었는데 이는 flex 값을 주었을 때 css 지정하기 편하게 하기 위함이다. 최대한 위치에 가깝게 넣어주었다. ( 돋보기가 맨 왼쪽에 위치해 있음) body 안에 있는 div 태그들 (4묶음)들에게 한꺼번에 설정을 주기 위해 전체를 감싸는 를 주었다. 굳이 body를 쓰지 않는 이유는 body보다 더.. 2022. 7. 21.
js에서의 Scope scope javascript의 scope는 문법이 아닙니다. '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다. block block 이란 중괄호{}로 감싸진 것을 말하는데 function, if, for 등을 말합니다. function 의 내부는 하나의 block입니다. 예시) function hi() { return 'i am block'; } 지역변수 (local) {} 내부에서 변수가 정의되면 변수는 오로지 {}(block)에서만 사용할 수 있습니다. 내부에 정의된 변수를 지역 변수라 부릅니다. 전역변수 (global) scope은 변수가 선언되고 사용할 수 있는 공간입니다. scope 외부에서는 특정 변수에 접근할 수 없지만 block밖인 global scope에서 만든 변수를 전역변수라.. 2022. 7. 20.
semantic web과 semantic tag semantic web이란 한글로 해석하면 "의미론적인 웹"이라는 뜻이다. 기존의 코드들이 가진 문제점을 보완하기 위해 구상되었다. html에서 쓰이는 'div'와 같은 태그들은 어떠한 기능을 가졌는지 알기 어려운데, 이를 개선하기 위해 의미와 기능을 결합한 semantic tag가 나왔다. 예를 들어 semantic web이 만들어지기 전에는 2022. 7. 20.
css position 속성과 inline, inline-block, block css position css position 속성은 웹 문서 안의 요소들을 어떻게 배치할 지 정하는 속성입니다. css position의 4가지 설정 값 👉 fixed (고정) : 지정한 위치에 고정하여 배치 👉 absolute (절대) : 원하는 위치를 지정해 배치 👉 relative (상대) : 부모 요소에 연결하여 위치를 지정 👉 sticky (고정) : 위치에 따라 동작 방식이 달라짐 fixed 말 그대로 fixed 하는 기능입니다. 문서의 흐름과 상관없이 좌표로 위치를 지정해 고정합니다. (부모 요소가 아닌 브라우저 창 기준) 다섯 번째 있는 div에 fixed를 주었습니다 윈도우 기준 (컨테이너 기준 x) (top : 30px; left : 30px;) 에 올라갔습니다. 스크롤 내려도 정해진.. 2022. 7. 20.
728x90
반응형