[JS] 렉시컬 스코프(Lexical Scope) 란??

스코프란?스코프(Scope)란, 유효범위란 뜻으로 자바스크립트를 포함한 모든 프로그래밍 언어에서 사용하는 중요한 개념입니다.  스코프의 개념을 잘 알아야 자바스크립트의 let, const와 var 선언자의 차이 등을 이해하는데 어려움을 덜 수 있습니다.  [추가 글 작성 예정입니다.] 스코프의 종류코드는 크게 두 가지의 스코프로 구분할 수 있습니다. 코드의 가장 바깥 영역, 전역 스코프함수 몸체 내부 영역, 지역 스코프 간단한 예제를 살펴보면,  예제 코드 내부에 위와 같은 스코프가 있는 것을 볼 수 있습니다. [추가 글 작성 예정입니다.] 렉시컬 스코프아래 코드를 예측 해보려고 합니다. 잠시 스크롤을 멈추고 생각해보길 권해드립니다.var x = 1;function foo() { var x = 10; ..

• format_list_bulleted WEB/JavaScript
• · 2024. 6. 22.
• textsms

[개념] CSS - Position 속성

이 글은 MDN의 내용을 공부하여 개인적인 해석을 한 내용입니다.틀린 부분이 있다면 댓글로 남겨주세요 😆 CSS - Position Attribute문서 상에 요소를 배치하는 방법에 대한 정의이며, top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.    Static - Default요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. Relative 요소를 일반적인 문서 흐름에 따라 배치하며, 자기 자신 기준으로 top, right, bottom, left의 값에 따라 위치를 적용합니다.다른 요소에는 영향을 주지 않으며, 페이지 레이아웃에서 요소가 차지..

• format_list_bulleted WEB/CSS
• · 2024. 5. 31.
• textsms

[개념] HTML - Semantic Element

이 글은 w3school과 MDN의 내용을 공부하여 개인적인 해석을 한 내용입니다.틀린 부분이 있다면 댓글로 남겨주세요 😆 시맨틱 요소(Semantic Element)란?시맨틱(Semantic)이라는 단어에서 알 수 있 듯, 의미를 담고 있는 요소들을 말합니다. 이 개념은 HTML 뿐만 아니라 CSS, JavaScript에서도 적용되는 개념이며, 이번 글은 HTML 위주로 다룹니다.  W3School에서 소개하는 정의는   "A semantic element clearly describes its meaning to both the browser and the developer."브라우저에서 보여지는 단계와 개발 단계에서 모두 의미를 명확히 알 수 있는 요소   쉽게 말하면, 사용자가 보는 화면과 개발..

• format_list_bulleted WEB/HTML
• · 2024. 5. 31.
• textsms

[개념] CSS - Cascading이란?

이 내용은 MDN에서 소개한 CSS Cascading을 해석하여 제 방식대로 이해한 내용을 정리한 것입니다.틀린 부분이 있다면 댓글로 남겨주세요 😆CSS?CSS는 Cascading Style Sheets의 약자로 웹페이지를 꾸미려고 작성하는 코드입니다.이름에서도 알 수 있듯, Cascading은 CSS의 기본 개념입니다. Cascading이란?Cascade의 사전적 의미 : 종속 공식문서인 MDN에서 소개하는 CSS에서의 Cascading 은 다음과 같습니다. "The cascade is an algorithm that defines how user agents combine property values originating from different sources.""캐스케이드는 서로 다른 소스에서 ..

• format_list_bulleted WEB/CSS
• · 2024. 5. 26.
• textsms

HTML(3) - 속성(Attribute)

2023.03.19 - [WEB/HTML] - HTML(2) - 요소(Element) HTML(2) - 요소(Element) 이전 글과 내용이 이어집니다! HTML(1) - 기본 구조 HTML의 개념을 잡았으니 자세히 알아보자! 개념이 궁금하시면 이전 글을 추천드립니다! HTML이란?(개념 이해) 개발자 농담 중엔 이런 글이 있다. A: l1m3kun.tistory.com 이전 글과 이어집니다! HTML을 이용하여 블로그나 Notion같은 프로그램을 쓰다보면, 부분부분 색을 바꾸거나 하이퍼 링크를 넣는 등 다양한 기능들이 포함되어있는 것을 볼 수 있다. 이런 기능들을 사용할 수 있는 것이 바로 속성이다! 속성 속성을 통해 태그의 부가적인 정보를 설정할 수 있음 요소는 속성을 가질 수 있으며, 경로나 크기..

• format_list_bulleted WEB/HTML
• · 2023. 3. 19.
• textsms

HTML(2) - 요소(Element)

이전 글과 내용이 이어집니다! HTML(1) - 기본 구조 HTML의 개념을 잡았으니 자세히 알아보자! 개념이 궁금하시면 이전 글을 추천드립니다! HTML이란?(개념 이해) 개발자 농담 중엔 이런 글이 있다. A: 어떤 걸로 코딩하는 걸 좋아하세요? B: 저는 HTML로 l1m3kun.tistory.com 요소(Element) 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성 컨텐츠(내용)를 감싸는 것으로 그 정보의 성격과 의미를 정의 내용이 없는 없는 태그 닫는 태그 없이 사용 태그(요소) 용도 줄 바꿈 구분선 이미지 삽입, scr 속성을 활용하여 이미지 표현 입력창 head 태그에 나타내며 외부 리소스 연결 검색 엔진을 위한 키워드, 웹페이지 설명, 저자 정의 등 메타데이터를 정의할 때..

• format_list_bulleted WEB/HTML
• · 2023. 3. 19.
• textsms