개발 일지

함수 스코프 Scope : 범위, 유효공간, 유효 범위 함수 스코프 : 함수에 의해서 생기는 범위. 변수의 유효범위. 블록 스코프 : Block Scope : 블락에 의해 생기는 유효범위 { }에 의해서 변수의 유효범위가 결정된다. 변수 선언 방식 종류 var, let, const ✔ 예제 1번 { let a = 10; { let a = 20; console.log(a) //20 } console.log(a) //10 } console.log(a) //reference error ✔ 예제 2번 function hasValue(p) { console.log(v) //undefined if (p) { //truthy var v = 'blue'; console.log(v); //blue } el..

개발자 도구란? 개발자도구는 브라우저에 제공하는 하나의 Tool이다. 개발 환경을 개선할 수 있고, 웹 사이트를 즉각적으로 수정하고 문제발생시 원인 파악하고 해결하기에도 좋다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있습니다. 개발자 도구에는 여러개의 패널 존재한다! 이 중에서 가장 자주 사용하게 될 패널들에 대해 알아보자! 1. Element Panel CSS(스타일 속성), 웹 페이지의 구성(DOM)을 확인하고 수정할 수 있는 패널이다. 수정한 내용을 실시간으로 확인할 수 있기 때문에 프론트엔드 개발자에게는 필수적이다. 💡 Styles 부분의 순서가 의미하는 것은? 하나의 element에도 여러개의 css가 적용될 수 있다. 예를 들면, div tag에..

1. 모바일 웹 구현시 이미지 파일의 이해 SVG : ✔ 확장 가능한 벡터 그래픽(Scalable Vector Graphics). ✔ 그래픽을 마크업 하기 위한 xml의 일종의 형식. ✔ 벡터 기반의 형식이므로 크기를 조절했을 때 해상도가 깨지지 않는 장점이 있음 ✔ HTML, CSS, JS와 함께 동작 가능하다는 점 📍 로고 또는 단순화 이미지에 활용 2. 모바일 웹 화면 크기 보통 이미지 시안을 잡게 되면 모바일은 다음의 모바일 크기에 최적화된 이미지를 제작한다. 화면크기 최소크기 320px 보편적 크기 360px wide하게 잡은 크기 400px 시안(× 2배) 640px 720px 800px 📍 웹 pc 화면에서 구현되는 이미지는 모바일에서는 굉장히 wide하게 보일 것이다. 따라서 모바일 siz..