실습 회고록

웹 개발에서 시맨틱 태그를 사용하는 것은 구조적 의미를 명확히 하고, 웹 접근성을 향상시키는 데 중요한 역할을 합니다. 시맨틱 태그는 콘텐츠의 목적을 명확히 하여 검색 엔진 최적화(SEO)와 접근성 도구(스크린 리더 등)의 효율성을 높입니다.예를 들어, ul과 li는

웹 개발에서 시맨틱 태그와 적절한 속성 사용은 웹 접근성을 높이고 유지보수를 용이하게 만듭니다. 이번 글에서는 h1 태그와 alt 속성의 의미 있는 사용, 그리고 nth-child 대신 클래스를 활용한 스타일링의 중요성을 이론과 예제를 통해 정리해보겠습니다.초기 코드에

초기 코드에서는 개별 요소에 호버/포커스 효과를 적용해 전체적인 상호작용이 부자연스러웠습니다.예: 카드와 아이콘이 별도로 반응해 UX 일관성 저하.부모 요소 중심 제어: :focus-within을 사용해 자식 요소의 포커스도 캐치.상태 동기화: 카드 호버 시 모든 하위

웹 개발에서 레이아웃을 구성하는 방법은 여러 가지가 있으며, 각 방법은 고유한 특성과 장단점을 가지고 있습니다. 이번 글에서는 Flexbox, Grid, Float의 사용 사례와 예외적인 경우를 살펴보고, 이를 선택하는 기준을 정리해 보겠습니다.1차원 배열: 주로 수평

웹 개발에서 CSS 단위 선택은 디자인의 반응성과 접근성을 결정하는 중요한 요소입니다. px와 rem은 각각 고유한 특성과 장단점을 가지고 있으며, 프로젝트의 요구 사항에 맞게 적절히 선택해야 합니다. 이번 글에서는 px와 rem의 차이점과 사용 사례를 살펴보고, 이를

웹 개발에서 레이아웃을 구성할 때, 복잡한 계산식보다는 가변적이고 단순한 단위를 사용하는 것이 중요합니다. 이는 브라우저의 계산 부담을 줄이고, 팀원들 간의 코드 이해도를 높이는 데 도움이 됩니다. 이번 글에서는 박스 모델을 활용해 복잡한 계산식을 피하는 방법과, 가변

DOMContentLoaded와 window.onload의 차이는 주로 이벤트 발생 시점과 사용 사례에 따라 나뉨.이 이벤트는 브라우저가 HTML 문서를 완전히 로드하고 DOM 트리를 생성한 직후 발생스타일시트, 이미지, 서브프레임과 같은 외부 리소스는 로드되지 않아도

localStorage, sessionStorage, 그리고 Cookies는 모두 브라우저에서 데이터를 저장하는 데 사용되지만, 각각의 특성과 사용 사례가 다름특징: 영구적으로 데이터를 저장하며, 브라우저를 닫아도 데이터가 유지.사용 사례:사용자 환경설정 저장 (예:

beforeunload는 사용자가 페이지를 떠나거나 새로고침하려고 할 때 발생하는 브라우저 이벤트.이 이벤트를 활용하면 페이지를 벗어나는 시점에 특정 작업(예: 상태 저장)을 수행할 수 있음.주로 다음과 같은 경우에 사용됨:세션 상태 저장사용자 데이터를 서버에 전송사용

이벤트 위임은 부모 요소에 단일 이벤트 리스너를 추가하여 자식 요소의 이벤트를 처리하는 방식.이벤트 버블링을 활용하여 자식 요소에서 발생한 이벤트가 부모 요소로 전파되도록 함.성능 최적화:많은 자식 요소에 각각 이벤트 리스너를 추가할 필요 없이 부모에 단일 리스너만 추