프론트엔드 개발자로 성장하기

CSS에서 레이아웃을 만들 때, 세로 방향으로 margin을 줬더니 원하는 간격보다 더 좁거나 넓어지는 현상, 겪어보셨죠?바로 이 현상이 **Margin Collapsing (마진 상쇄)**입니다.이번 포스팅에서는 마진 상쇄가 왜 일어나는지, 어떤 상황에서 발생하는지, 어떻게 해결하는지 정리해드릴게요!🧩 마진 상쇄란?인접한 요소 사이의 세로 방향 margin 값이 겹치는 현상을 말해요.서로의 margin이 합쳐지는 게 아니라, 더 큰 값 하나만 적용됩니다.✅ 예시 1: 형제 요소 간 마진 .box1 { margin-bottom: 30px; }.box2 { margin-top: 20px; }📌 실제 여백은 30px만 생깁니다. (30px vs 20px → 큰 값이 우선)🧬 부모-자식 간에도 마진 상쇄..

프론트엔드 개발을 하다 보면 단위에 대한 이해는 정말 중요합니다.화면에 어떻게 표현되는지, 디바이스에 따라 어떻게 다르게 보일 수 있는지를 알고 있어야 유연하고 반응형인 UI를 만들 수 있기 때문이죠.이번 포스팅에서는 픽셀(Pixel), 해상도(Resolution) 개념부터**CSS 단위(px, %, em, rem)**까지 핵심만 깔끔하게 정리해볼게요!🟨 픽셀(Pixel)이란?**픽셀(Pixel)**은 화면에 표시되는 가장 작은 단위의 정사각형입니다.디지털 이미지나 화면이 전부 이 작은 픽셀들의 조합으로 구성되어 있다고 보면 돼요.💡 PPI (Pixels Per Inch)PPI는 1인치 안에 몇 개의 픽셀이 들어가는지를 나타내는 값입니다.PPI가 높을수록 화면이 더 선명하고 디테일하게 표현돼요.예시:..

웹 개발을 공부하다 보면 꼭 한 번은 만나게 되는 개념 중 하나가 바로 시맨틱 태그입니다.단순히 로만 웹 페이지를 구성할 수도 있지만, 의미를 명확히 전달하기 위해 시맨틱 태그를 사용하는 것은 검색 최적화(SEO : Search Engine Optimization )나 웹 접근성 (Web Accessibility) 면에서 큰 장점을 가지고 있어요.아래에서 시맨틱 태그의 개념과 왜 중요한지, 어떤 종류가 있는지 함께 정리해볼게요! 🧠 시맨틱 태그란?**시맨틱(Semantic)**은 '의미론적인'이라는 뜻으로, 태그에 '의미'를 부여하여 구조를 표현하는 방식입니다.HTML5부터 본격적으로 등장한 시맨틱 태그는 단순히 레이아웃을 나누는 것이 아니라, 각 영역의 역할과 의미를 명확히 하기 위해 사용됩니다.?..

프론트엔드 개발을 공부하면서 처음 접하게 되는 개념들을 간단히 정리해보았습니다.처음 웹사이트를 제작하려는 분들, 프로그래밍 언어가 생소한 분들께 도움이 되기를 바랍니다 🧠 프로그래밍 언어란?프로그래밍 언어는 컴퓨터에게 작업을 지시하기 위해 사용하는 언어입니다.즉, 컴퓨터 프로그램을 만들기 위해 사람이 작성하는 일종의 "컴퓨터와의 약속된 언어"라고 할 수 있어요. 🧾 소스 코드(Source Code)란?소스 코드, 혹은 코드란프로그래밍 언어로 작성된 명령어들의 집합입니다.우리가 작성한 코드들은 컴파일되거나 해석되어 컴퓨터가 실행할 수 있는 형태가 됩니다.  🌐 웹사이트 제작에 사용하는 대표적인 프로그래밍 언어웹사이트를 만들기 위해 가장 기본적으로 사용하는 언어는 다음과 같습니다:HTML (HyperT..

🌐 WWW (World Wide Web)란?웹은 기본적으로 정보를 주고받는 시스템, 이때 정보를 주고받는 역할을 하는 주체는 크게 클라이언트와 서버.서버(Server): 정보를 저장하고, 요청이 오면 응답해주는 프로그램이나 컴퓨터.클라이언트(Client): 정보를 요청하는 프로그램 (ex. 웹 브라우저) 또는 그 요청을 보내는 컴퓨터. 👨‍🔬 웹의 아버지, 팀 버너스리(Tim Berners-Lee)팀 버너스리는 1989년, 스위스의 유럽 입자 물리 연구소 CERN에서 근무하던 중“정보를 자유롭게 공유할 수 있는 시스템”이 필요하다고 판단해 World Wide Web을 고안했습니다.그는 최초의 웹 브라우저이자 편집기인 WorldWideWeb을 개발하고,최초의 웹사이트를 1991년에 공개하며 웹의 문을..