본문 바로가기

전체 글540

[JavaScript] Chapter 26. 변수란_2 - var, let, const의 차이 var, let, const의 차이 앞에서 발견한 var 키워드의 문제점은 크게 세 가지가 존재한다. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ES6에서 나온 let과 const 키워드는 위의 세 가지 문제점을 해결했다. 1. 변수 중복 선언 불가 (1) let let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다. let name = 'kmj' console.log(name) // output: kmj let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'na.. 2023. 1. 9.
[JavaScript] Chapter 25. 변수란_1 - 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트에서 var로 변수 선언이 가능했는데, 왜 const와 let이 나왔으며 이 둘의 사용을 권장할까? 이를 정확하게 알기 위해서는, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아야한다. 변수 먼저 자바스크립트에서 변수가 무엇인지 알아보자. 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. const myNumber = 23 // 변수명(식별자): myNumber // 해당 값의 위치(메모리 주소): 0012CCGWH80 // 변수 값(저장된 값): 23 자바스크립트는 매니지드 언어(managed language)이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해.. 2023. 1. 9.
[SASS] Chapter 01. sass(scss) sass(scss) : css의 확장 언어 css보다 조금 더 높은 자유도를 개발자들에게 부여 변수, 반복문, 가정문 등 다양하고 강력한 기능을 제공 그래서 기능적으로 자유도는 높지만, 역설적이게도 그만큼 많은 학습이 요구된다. 브라우저가 읽을 수 있는 언어는 3가지 뿐이다. (html, js, css) sass, scss는 브라우저가 읽을 수 없는 확장자다. 그래서 sass(scss) 확장자로 된 파일을 css 파일로 컴파일(변환)시켜주는 과정이 필요하다. 2023. 1. 9.
[CSS] Chapter 13. 브라우저 크기마다 CSS가 바뀌는 Media Query .box { width: 100%; height: 100px; border: 4px solid red; } @media screen and (max-width: 1260px) { .box { width: 90%; background-color: red; } } // 테블릿 화면 @media screen and (max-width: 768px) { .box { width: 80%; background-color: blue; } } // 모바일 브라우저 @media screen and (max-width: 576px) { .box { background-color: greend; } } media query는 css 맨 마지막에 사용된다. 왜 그러느냐? css는 맨 마지막에 있는 것들이 적용되기 때문에. 2023. 1. 7.
[CSS] Chapter 12. Position(static, relative, absolute, fixed, sticky), z-index, overflow position 요소를 어떻게 배치할지 결정하는 CSS 속성 우선 Normal Flow 개념을 이해하는 것이 중요함 Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름 Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음 즉 요소의 특성에 따라 Normal Flow가 정해져 있는 것 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다. positon 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는 대로 제어하여 배치할 수 있음 position 속성은 top, bottom, left, right 속성과 함께 사용함 position의 종류에 따라 top, bottom, left.. 2023. 1. 6.
지금 회사에 남아서 공부중. 원래 5시30분에 퇴근하고 2~3시간 운동한 다음, 집에서 공부했는데 하루 3~4시간 자니까 피곤해죽어서 공부도 못하고 바로 뻗거나 집중도 못하게 됨.. 그래서 그냥 5시30분부터 10시까지 회사에서 억지로라도 공부하기로 함. 회사에서 하니 집중이 잘된다. 그리구 운동은 맨날 나가긴 할건데 유산소는 맨날하고, 웨이트는 2일 주기로 했다. 운동은 포기 못함 하필 요새 회사일도 바빠지고 좀 복잡하고 어려운 거를 파트장님이 날 줘가지고, 공부 시간도 빡센데 더 바빠져서 큰일이다 그래도 해봐야지. 하루 루틴을 아침 출근전, 업무전에 코딩테스트 1~2문제를 풀고 저녁에는 회사에서 3~4시간 학습, 프로젝트하구 집에서 자기 전에 코딩테스트 1문제를 푸는 걸로 해야겠다. 어서 이직하자ㅅㅅ 2023. 1. 4.
[HTML] Chapter 10. 이모티콘_svg(vector data), fontawesome, bootstrap 버튼 보이기엔 둘 다 같지만, 차이점이 있다. button 태그의 컨텐츠로 "버튼"을 주는 것 input 태그의 value로 "버튼"을 주는 것 무슨 뜻이냐 하면 input 태그에는 value 안에 "버튼" 이라는 속성을 통해서 text를 전달해야 한다. 그런데 button 태그는 여는 태그와 닫는 태그로 이루어져 있고, 컨텐츠를 받을 수 있기 때문에 다른 태그가 들어가도 무방하다. (일반적으로 잘 사용하진 않는다) 그 말은 button 태그에 img가 들어가도 되는 것이다. 그래서 어떤 이미지를 버튼처럼 만들고 싶을 때 input 태그에 버튼을 사용하는 것이 아니라, button 태그를 통해서 img 태그를 넣어 만들 수 있다. 하지만 button 안에 img를 넣을 때는 일반적인 이미지가 아니라 이모.. 2023. 1. 4.
[HTML] Chapter 09. 웹 어플리케이션과 정보를 제출할 땐 form 웹 어플리케이션 웹 페이지라 하는 것은 html, css를 통해서 정적인 콘텐츠를 웹 페이지에 방문하는 사용자들에게 단순히 보여주기만 한다. 그런데 우리가 사용하는 웹 어플리케이션이라고 하는 것은 정적이 아닌 동적인 콘텐츠로서 글에 댓글을 쓴다거나 좋아요를 누르는 등, 사용자와 소통할 수 있는 방법이 있다. 그런 의미에서 우리가 단순하게 콘텐츠를 보여주게 되는 것은 우리의 웹 페이지가 웹 사이트로 분류되고, 우리의 웹 페이지에서 사용자와 소통할 수 있게 되면 그 때부터 웹 어플리케이션이라고 부를 수 있는 것이다. 그래서 필요 시 javascript를 배우는 것이다. 프로그래밍을 배울 때, Front-End 영역이 진입장벽이 낮다, 쉽다 라는 말을 한 번 쯤은 들어본 적이 있을 것이다. 나는 그런말이 나오.. 2023. 1. 4.
[HTML] Chapter 08. head 태그를 구성하는 요소들 1. css 파일들 2. style 3. title 타이틀 4. meta 어떤 방식으로 렌더링되는지 설정 웹 사이트에 대한 일방적인 설명 웹 사이트에서 담고있는 내용이 어떤 keyword에 대한 설명 누가 만들었는지 기기 별로 비율이 다른데, 비율을 맞추는 용도 사용자 눈에 보이지는 않지만, html 파일에 대한 부가적인 설명을 담고있다. 배포된 html 파일 url을 다른 곳에 첨부했을 때, 나오는 내용들을 정의해줄 수 있고, 검색 솔루션(구글, 네이버 등)에서 어떤 웹사이트인가 판단할 수 있게 도와주는 SEO(검색 최적화)에 도움을 주는 태그이다. 5. favicon ico 2023. 1. 4.
[CSS] Chapter 11. 레이아웃 만들기 - grid 3. grid .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } grid로 정렬하는 방법은 제일 최신에 나온 방법이다. grid 같은 경우는 공간을 이미 다 격자로 나누어놓은 다음에 그 격자에 해당하는 것만큼 채워주는 방식으.. 2022. 12. 29.

티스토리툴바