프리스쿨

HTML에서 요소는 크게 block 요소와 inline 요소로 나눌 수 있다. 이 두 가지의 주요 차이점은 디스플레이 방식에 있다.block 요소는 기본적으로 새로운 줄에서 시작하며, 전체 너비를 차지한다. 다른 block 요소와 함께 있을 경우, 각 요소는 수직으로

시멘틱 마크업(Semantic Markup)은 웹 페이지의 내용과 구조를 명확하게 정의하고, HTML 태그를 의미에 맞게 사용하는 방식이다. 즉, 태그가 그 역할을 명확히 나타내도록 함으로써, 코드의 가독성을 높이고 SEO(검색 엔진 최적화)와 접근성(Accessibi

Emmet은 HTML, CSS, JSX 등에서 빠르게 코드 작성을 도와주는 코딩 단축키(Snippet) 및 자동 완성 기능이다.주로 VS Code, Sublime Text, WebStorm 같은 코드 편집기에서 지원되며, 복잡한 HTML 구조를 짧은 코드로 작성할 수

CSS에서 모든 요소는 박스 형태로 구성되며, 이 박스 모델(Box Model)은 요소가 화면에서 차지하는 공간을 결정하는 기본 개념이다. 박스 모델은 아래와 같은 4가지 주요 영역으로 이루어져 있다.요소의 실제 콘텐츠(텍스트, 이미지 등)가 들어가는 부분이다.widt

CSS에서 position 속성은 요소의 위치를 지정하는 데 사용된다. 요소의 배치 방법을 정의하며, 다양한 레이아웃을 만들 때 중요한 역할을 한다. position 속성에는 5가지 주요 값이 있으며, 각 값에 따라 요소의 위치가 어떻게 결정되는지가 달라진다.posit

display 속성은 HTML 요소가 화면에서 어떻게 배치될지 결정하는 속성이다. 웹페이지의 레이아웃을 만들 때 가장 중요한 속성 중 하나이며, 요소를 블록 요소, 인라인 요소, 플렉스 박스, 그리드 등으로 설정할 수 있다.한 줄 전체를 차지하며, 줄 바꿈이 발생한다.

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 방법을 정의한다. 선택자는 HTML 문서 내에서 원하는 요소를 선택하고, 그 요소에 특정 스타일을 적용하기 위해 사용된다. 선택자는 다양한 방식으로 요소를 지정할 수 있으며, 이를 통해 원하는 스타일을 정확하게

CSS에서 단축 속성(shorthand properties)은 여러 개의 CSS 속성을 한 줄로 축약하여 작성할 수 있도록 도와주는 속성이다. 이를 사용하면 코드가 간결하고 읽기 쉬워지며, 스타일 시트를 더욱 효율적으로 관리할 수 있다.margin은 요소의 바깥 여백을

Emmet은 HTML, CSS, JavaScript 등의 코드를 더 빠르고 효율적으로 작성할 수 있게 도와주는 코드 자동 완성 도구이다. 주로 텍스트 편집기나 IDE(예: Visual Studio Code, Sublime TExt, Atom 등)에서 사용되며, 코드 스

Sass(Syntactically Awesome Stylesheets)는 CSS의 확장(Superset)으로, 스타일 시트를 더 효율적으로 작성할 수 있도록 도와주는 CSS 전처리기(Preprocessor) 중 하나이다. CSS보다 더 강력한 기능(변수, 중첩, 믹스인

7-1 패턴(7-1 Pattern)은 Sass(SCSS) 스타일 파일을 모듈화하여 관리하는 구조적인 방법이다. 프로젝트의 규모가 커질수록 스타일 파일이 복잡해지는데, 이를 정리하고 유지보수하기 위해 사용하는 방식이다.이 패턴의 이름은 "7개의 폴더 + 1개의 메인 SC

@import는 Sass에서 여러 개의 SCSS 파일을 하나의 스타일 시트로 합칠 때 사용하는 기능이다. CSS에서도 @import가 있지만, Sass의 @import는 빌드 타임에 파일을 병합하기 때문에 성능이 더 좋다.확장자(.scss)는 생략 가능\_(언더스코어)

Sass의 변수(Variables)는 CSS에서 반복적으로 사용되는 값(색상, 글꼴, 크기 등)을 재사용 가능하도록 저장하는 기능이다.변수를 사용하면 유지보수성이 좋아지고, 스타일을 일관성 있게 관리할 수 있다.Sass에서 변수는 $ 기호를 사용하여 선언한다.$prim

@mixin은 재사용 가능한 스타일 블록을 정의하는 Sass의 기능이다.CSS에서 반복적으로 사용되는 스타일(예: 버튼, 박스 쉐도우, 반응형 미디어 쿼리 등)을 한 곳에 모아서 관리할 수 있다.코드 재사용: 중복 코드 감소유지보수 편리: 한 곳에서 수정하면 전체 적용

Sass의 @function은 반환 값이 있는 재사용 가능한 스타일 함수를 정의하는 기능이다.일반적인 @mixin은 스타일을 출력하지만, @function은 값을 계산해서 반환하는 것이 차이점이다.색상, 크기, 간격 등의 동적인 값 계산복잡한 계산을 재사용하여 코드 유

자바스크립트에서 제어문(control statement)과 블록(block)은 프로그램의 흐름을 제어하고 구조를 명확하게 만드는 핵심 요소이다.블록은 {} 중괄호로 묶인 코드 집합이다. 여러 문(statement)을 하나로 묶어서 제어문, 함수, 클래스 등의 내부에서

자바스크립트에서 식별자(identifier)는 매우 중요한 개념으로, 변수, 함수, 클래스 등 모든 이름을 정의할 때 사용되며, 코드의 가독성과 유지보수성에도 큰 영향을 준다.식별자(identifier)는 변수, 함수, 클래스, 매개변수 등 프로그래밍 요소를 식별하기

리터럴(literal)은 고정된 값 자체를 의미한다.즉, 변수나 계산이 아닌 코드에 직접 작성된 값을 말한다.위 예시에서 10, "hello", true는 모두 리터럴이다.큰 따옴표 ", 작은 따옴표 ', 백틱 ̀ 모두 문자열 정의 가능템플릿 리터럴은 문자열 내 변수

자바스크립트에서 "use strict"는 코드 실행 방식에 영향을 주는 특별한 지시문(directive)이다. 오류를 더 엄격하게 감지하고, 일부 잠재적인 버그를 방지하기 위한 안전 장치 역할을 한다."use strict"는 자바스크립트에서 Strict Mode(엄격

자바스크립트는 동적 타입(dynamically typed) 언어이다. 즉, 변수에 어떤 타입의 값이든 할당할 수 있고, 실행 중에 타입이 바뀔 수도 있다. 정적 타입 언어(Java, TypeScript 등)와 달리, 컴파일 타임에 타입 검사가 이뤄지지 않는다.다음은 자

원시 값은 더 이상 나눌 수 없는, 기본적인 데이터 단위이다.값 자체가 변수에 저장되며, immutable (불변)하다. 즉, 한 번 만들어진 원시 값은 변경될 수 없다.자바스크립트에는 총 7가지 원시 타입이 있다:문자열을 바꾸는 것처럼 보여도, 실제로는 새로운 문자열

참조 타입은 값 자체가 아닌 메모리 주소(참조)를 통해 데이터를 다루는 타입이다.객체, 배열, 함수 등 복잡한 구조의 데이터가 여기에 속한다.변수에는 실제 값이 아닌 객체가 저장된 메모리 주소(참조)가 저장된다.→ obj1과 obj2는 같은 객체를 가리키고 있기 때문에

"값이 할당되지 않은 상태"를 나타낸다.자바스크립트 엔진이 자동으로 부여하는 값이다."명시적으로 값이 없음"을 나타낸다.즉, 프로그래머가 의도적으로 "비어 있음"을 표현할 때 사용한다.undefined는 암묵적이며 엔진이 부여하는 값이므로, 직접 할당하는 건 권장되지

자바스크립트에서 문자열, 숫자, 불리언 같은 원시 값(primitive value)도 객체처럼 메서드나 속성을 사용할 수 있는데,그게 가능한 이유는 자바스크립트 엔진이 일시적으로 원시 값을 래퍼 객체로 변환하기 때문이다.이때 생성되는 객체가 바로 래퍼 객체이다.str.

자바스크립트에서 타입 변환(Type Conversion)은 매우 중요한 개념이다. 자바스크립트는 동적 타입 언어이기 때문에, 타입이 자동으로 또는 명시적으로 바뀌는 경우가 자주 발생한다.암시적 변환 (Implicit Conversion)JS 엔진이 자동으로 타입을 변환