Frontend

개요 CSS 사용자 지정 속성(CSS Variables, Custom Properties)은 재사용 가능한 값을 선언하고 문서 전반에서 참조하기 위한 메커니즘 반복되는 색상, 간격, Z-index 같은 값을 의미 있는 이름으로 관리해 전역 치환 리스크를 줄이고 테마 전환 같은 요구에 유연하게 대응 가능 사용자 지정 속성은 일반 CSS 규칙에 포함되어 캐스케이딩과 상속의 영향을 받음 핵심 개념 표기 규칙: 이름은 두 개의 대시로 시작, 예) –main-color 대소문자 구분: –my-color와 –My-color는 서로 다른 속성 참조 방식: var(–name) 형태로 값 참조 기본값 지원: var(–name, fallback) 형태로 값이 없을 때 대체값 지정 가능 속성 값 위치에서만 사용 가능, 선택자나 미디어 쿼리 조건, 속성 이름에는 사용 불가 동작 원리와 스코프 사용자 지정 속성은 선언된 규칙의 선택자 범위에만 유효 상속 특성 보유, 상위에서 선언하면 하위에서 참조 가능 :root에 선언하면 문서 전역 범위의 기본값으로 동작 동일한 변수 이름을 더 구체적인 선택자나 조건에서 재정의하면 캐스케이드에 따라 해당 범위에서 우선 적용 사용법과 짧은 예시 전역 선언과 기본 참조 ...

개요 HTML 문서를 구성하는 요소들을 카테고리별로 묶어 핵심 의미와 사용 시점을 빠르게 파악하는 참고서 시맨틱 마크업과 접근성, SEO에 직접적인 영향을 주는 요소 위주로 정리 전체 목록과 세부 제약은 MDN 문서를 최종 기준으로 확인 권장 메인 루트와 구획 루트 html: 문서 루트 요소, 모든 요소의 조상이어야 함 body: 문서 본문 루트, 문서 내 하나만 존재 문서 메타데이터 head: 기계가 읽는 문서 메타데이터 컨테이너 base: 문서 내 상대 URL의 기준 URL 지정, 문서당 하나만 허용 link: 외부 리소스와의 관계 선언, CSS 연결과 파비콘 등 meta: title, style 등으로 표현 불가한 메타데이터 표현 style: 문서 범위의 스타일 선언 title: 브라우저 탭에 표시되는 문서 제목, 텍스트만 허용 콘텐츠 구획 문서 구조와 내비게이션에 쓰이는 시맨틱 컨테이너 ...

개요 CSS에서 선택자는 DOM에서 스타일을 적용할 대상 요소 집합을 정의하는 식 컴포넌트 스코프와 일관된 스타일링, 유지보수 비용에 직접 영향 핵심 유형과 매칭 원리, 명시도와 베스트프랙티스 중심 요약 핵심 개념 타입 선택자 tag 특정 태그 타깃 클래스 선택자 .class 재사용 가능한 스타일 단위에 적합 아이디 선택자 #id 고유 요소 타깃, 명시도 높음 속성 선택자 [attr], [attr=value], [attr*=substr] 속성 값 기반 매칭 가상 클래스 :hover, :focus, :active, :not(), :is() 상태나 집합 표현 가상 요소 ::before, ::after 논리적 하위 요소 생성 결합자 A B 하위, A > B 자식, A + B 인접 형제, A ~ B 일반 형제 관계 표현 그룹 A, B 동일 스타일의 대상 묶음 최신 선택자 :has() 부모가 특정 자식을 가질 때 매칭, 브라우저 지원 범위 확인 권장 동작 원리와 명시도 브라우저는 각 규칙의 선택자를 DOM 노드에 대조해 매칭된 규칙을 수집 후 명시도와 소스 순서로 충돌 해결 명시도 계산 규칙 요약 ...

개요 CSS :nth-child() 의사 클래스는 같은 부모를 공유하는 형제 요소들 가운데 순서를 기준으로 요소를 선택하는 선택자임 인덱스는 1부터 시작함 참고로 nth는 n-th 서수 개념을 뜻함 핵심 개념 odd, even 키워드 지원 odd는 1, 3, 5처럼 형제 중 홀수번째 요소를 의미함 even은 2, 4, 6처럼 형제 중 짝수번째 요소를 의미함 함수형 표기 <An+B> 지원 A는 정수 계수로 증가 간격을 의미함 B는 정수 오프셋 의미 n은 0 이상 정수 전체를 순회하는 변수 의미 An+B가 1 이상인 자연수로 평가되는 위치만 선택됨 :nth-child()는 요소 타입과 무관하게 형제 목록 전체를 기준으로 순서를 계산함 즉 span:nth-child(2n+1)에서 카운팅은 모든 자식 요소를 포함하고, 선택 자체만 span에 한정됨 타입별 순서를 기준으로 선택하려면 :nth-of-type() 사용 p:nth-child(n)은 형제 그룹 내 모든 p와 동일한 집합을 선택하나, 단순 p보다 명시도는 더 높음 p:nth-child(1) 또는 p:nth-child(0n+1)은 :first-child와 동일한 의미와 명시도를 가짐 동작 원리 An+B가 만드는 수열이 매칭 인덱스를 결정함 예) 5n은 0, 5, 10, 15, …를 생성하나 인덱스는 1부터 시작하므로 0은 매칭되지 않음 예) n+7은 7, 8, 9, …로 7번째 이후 전부 매칭됨 예) 3n+4는 4, 7, 10, 13, … 매칭됨 예) -n+3은 3, 2, 1 순으로 해석되어 결과적으로 앞의 3개가 매칭됨 카운팅 단위는 요소 노드 기준임 공백 텍스트 노드 등은 포함하지 않음 선택자 예시 tr:nth-child(odd) 또는 tr:nth-child(2n+1) HTML 표의 홀수번째 행 선택 tr:nth-child(even) 또는 tr:nth-child(2n) HTML 표의 짝수번째 행 선택 :nth-child(7) 임의의 7번째 요소 선택 :nth-child(5n) 5, 10, 15, …번째 요소 선택 0은 선택되지 않음 :nth-child(n+7) 7번째부터 끝까지 선택 :nth-child(3n+4) 4, 7, 10, 13, …번째 요소 선택 :nth-child(-n+3) 앞에서 3개 요소 선택 p:nth-child(n) 형제 그룹 내 모든 p 선택 단순 p보다 명시도 높음 p:nth-child(1) 또는 p:nth-child(0n+1) 형제 그룹 내 첫 번째 p 선택 :first-child와 동일 짧은 스니펫 /* 목록의 두 번째 <li> 선택 */ li:nth-child(2) { color: lime; } /* 4의 배수 번째 요소 선택 */ :nth-child(4n) { color: lime; }주의사항 :nth-child()는 형제 전체를 기준으로 순서를 매김 타입이 섞여 있으면 카운트에 모두 포함됨 타입에 따라 카운트를 분리하고 싶다면 :nth-of-type() 사용 A, B는 정수만 허용 공백과 부호 위치는 CSS 구문 규칙을 따름 0 또는 음수로 평가되는 위치는 매칭되지 않음 명시도는 타입 선택자보다 높고, 클래스와 동일 계층의 의사 클래스 수준으로 취급됨 최신 사양에서는 of 구문을 통해 :nth-child(An+B of S)처럼 선택자 리스트를 한정하는 패턴이 가능함 브라우저 호환성은 문서와 지원 현황 확인 권장 베스트 프랙티스 단순 패턴은 odd, even으로 표현해 가독성 확보 복잡한 패턴은 An+B를 사용하되, 수열을 1 이상 범위로 명확히 환산해 주석으로 의도 기록 섞인 타입 환경에서의 혼동을 피하려면 가능하면 :nth-of-type() 우선 검토 특정 구간 필터링은 교집합 패턴을 사용 예 p:nth-child(n+8):nth-child(-n+15)로 8~15 범위를 표현 접근성 측면에서 시각 강조용 스타일만 바꾸는 경우 DOM 순서 의존 로직과 결합하지 않도록 주의 간단 비교 nth-child vs nth-of-type nth-child 형제 전체 기준 카운트 타입 섞임에 영향 받음 nth-of-type 동일 태그 타입만 카운트 다른 타입은 건너뜀 마무리 :nth-child()는 CSS에서 반복적 패턴과 구간 선택을 간결하게 표현하는 기본 도구임 An+B를 수열 관점으로 해석하고, 타입 혼재 여부에 따라 nth-child와 nth-of-type을 구분 적용하면 예측 가능한 스타일링이 가능함 필요 시 최신 of 구문과 명시도 특성을 함께 고려해 유지보수 비용을 낮추는 전략 추천 ...

개요 반응형 레이아웃과 접근성 요구가 커지면서 px 고정값 대신 em, rem 같은 상대 단위 사용 빈도 증가 두 단위 모두 글꼴 크기(font-size)를 기준으로 동작하지만 기준점이 다름 핵심은 기준이 어디인지 명확히 이해하고 일관된 스케일로 적용하는 것 콘텐츠가 없어도 블록 요소 높이를 유지해야 하는 경우 같은 실무 이슈에서 min-height를 em이나 rem로 정의해 타이포 스케일에 연동하는 방식 유용함 상대 단위 개념 상대(relative) 단위는 주어진 기준에 따라 유동적으로 값이 변하는 길이 단위 em, rem, %, vw, vh 등이 대표 절대(absolute) 단위는 상황과 무관하게 고정된 길이로 취급하는 단위군으로 px, pt, cm, in 등이 포함됨 참고 기준으로 CSS에서 1px는 1/96in에 해당하는 길이로 정의됨. 실제 디바이스의 물리 픽셀과는 분리된 개념 ...

개념/배경 Unobtrusive JavaScript는 HTML 구조와 JS 동작을 분리하는 접근 철학 HTML은 의미와 콘텐츠, CSS는 표현, JS는 상호작용과 상태 제어 담당 인라인 스크립트와 이벤트 속성 제거, 외부 스크립트에서 안전하게 바인딩하는 방식 지향 핵심 목표는 접근성 보장, 점진적 향상, 유지보수성과 테스트 용이성 개선, 캐시 효율 상승, 보안 취약점 노출 감소 핵심 원칙 HTML은 의미 중심 마크업 유지 CSS는 표현만 담당 JS는 DOMContentLoaded 이후 동작 주입 인라인 onclick 등 이벤트 속성 사용 금지 기능 감지 우선, UA 스니핑 지양 데이터 훅은 data-* 속성 사용, 스타일 훅과 분리 JS 미동작 상황에서도 기본 기능 유지, 점진적 향상 고려 모듈 분리와 의존성 최소화 동작 방식 마크업은 링크와 폼이 기본 동작을 스스로 제공하도록 설계 JS는 존재하면 기본 동작을 확장하거나 향상 이벤트 바인딩은 외부 스크립트에서 선택자 기반으로 수행, 인라인 스크립트 제거 ...

개요 링크를 새 탭에서 열 때 a 태그에 target="_blank"를 많이 사용함 이 경우 window.opener로 원본 페이지에 접근 가능한 취약점과 리소스 간섭 이슈가 발생할 수 있음 rel=“noopener noreferrer"를 함께 지정해 리버스 태브내빙(reverse tabnabbing) 방지와 리퍼러 차단을 적용하는 것이 권장됨 핵심 개념 target: 링크 대상 브라우징 컨텍스트 지정 window.opener: 새 탭에서 원본 창을 참조하는 브라우저 객체 rel=noopener: 새 탭에서 window.opener를 끊어 원본 페이지 접근 불가로 만듦, 리버스 태브내빙 방지 rel=noreferrer: 새 탭으로 이동 시 Referer 헤더 전송 차단, 원본 페이지 URL 비공개 target 값 정리 _self: 현재 탭에서 열기, 기본값이라 명시 생략 가능 _blank: 새 탭에서 열기 target="_blank"만 사용할 때의 문제 보안 취약점 발생 가능 악성 페이지가 window.opener를 통해 부모 창의 location을 임의 변경하여 피싱 페이지로 리디렉션하는 리버스 태브내빙 위험 존재 원본 페이지의 데이터 접근 시도 등 추가 피해 가능성 있음 성능 간섭 가능성 새 탭이 원본과 같은 브라우징 컨텍스트 그룹에서 실행될 수 있어 이벤트 루프나 리소스 경쟁으로 지연이 커질 수 있음 무거운 스크립트가 열린 탭 간에 체감 성능 저하를 유발할 수 있음 해결책 rel=“noopener” 새 탭의 window.opener를 null로 만들어 원본 페이지 참조 차단 탭 간 연결이 끊겨 보안 위험과 리소스 간섭 완화 rel=“noreferrer” 이동 시 Referer 헤더를 제거해 원본 URL과 경로 노출 방지 분석이나 리퍼러 기반 측정이 필요한 경우에는 생략을 고려 사용 예시 필수 최소 속성만 명시 ...

개요 차세대 프론트엔드 빌드 도구 Vite 요약 Vue.js 창시자 Evan You가 만들었고, 개발 중 대기 시간을 줄이는 데 초점 맞춤 프랑스어로 vite는 빠름을 의미함 핵심 가치 개발 서버 즉시 기동에 가까운 체감 속도 HMR이 가볍고 빠르게 동작 의존성 프리번들을 esbuild로 처리해 개발 경험 가속 프로덕션 빌드는 Rollup으로 안정적 번들 생성 배경과 문제 기존 번들러(Webpack) 방식은 시작 시 전체 그래프를 사전 번들링하는 구조 프로젝트 규모가 커질수록 첫 기동이 지연 코드 변경 반영 또한 번들 재생성 비용으로 지연 발생 개발 체감 문제 ...

개념/배경 Array.prototype.map은 배열의 각 요소에 대해 콜백을 호출해 변환된 결과로 새 배열을 만드는 메서드임 원본 배열 불변 유지, 동일 길이의 새 배열 생성이 핵심 특징임 기본 문법 const newArray = array.map((element, index, array) => { return element; }); element 현재 요소 index 현재 인덱스 array 원본 배열 참조 콜백은 요소 수만큼 호출되고, 콜백의 반환값이 새 배열의 같은 위치에 배치됨 사용 예시 숫자 배열 변환 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10] 객체 배열에서 특정 속성 추출 ...