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

CSS에서 기본 배치 방식의 원리와 방향 설정 방법웹 페이지를 구성할 때 요소들이 자연스럽게 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 배치되는 걸 보신 적 있으시죠?바로 이 기본 동작이 **Normal Flow (정상 흐름)**입니다.이번 글에서는 Normal Flow가 무엇인지, 블록/인라인 요소의 배치 방식, 그리고 방향을 제어하는 속성들까지 한 번에 정리해볼게요.🧱 Normal Flow란?Normal Flow는 CSS 레이아웃의 기본 배치 규칙입니다.아무런 position, float, flex, grid 설정이 없는 상태에서 요소들이 브라우저에 자동으로 배치되는 흐름을 말해요.📦 블록 요소 (Block Elements)한 줄 전체를 차지위에서 아래로 쌓임블록 1 블록 2➡ 두 div는 위에서 ..

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가 높을수록 화면이 더 선명하고 디테일하게 표현돼요.예시:..

프론트엔드 개발을 하다 보면 자주 듣게 되는 개념 중 하나가 바로 **Separation of Concerns(관심사의 분리)**입니다.이 개념은 코드의 유지보수성과 가독성, 그리고 역할 분담에 큰 영향을 주는 핵심 원칙이에요.  🧩 Separation of Concerns란?Separation of Concerns는 이름 그대로 각각의 관심사(기능, 역할)를 분리하자는 원칙입니다.HTML, CSS, JavaScript 각각의 역할을 따로 책임지게 하는 것이 대표적인 예인데요:영역역할HTML콘텐츠 구조 작성CSS시각적 표현 (스타일링)JavaScript동작 및 로직 처리즉, 스타일은 CSS에서만, 구조는 HTML에서만, 동작은 JavaScript에서만 처리하도록 나누는 것이 핵심이에요. 이렇게 하면 코..

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

HTML의 form은 사용자로부터 데이터를 입력받아 서버로 전송하는 구조를 만들기 위한 핵심 요소입니다.이 글에서는 form, 다양한 input 타입, 그리고 서버 테스트용 툴까지 핵심 개념을 정리해볼게요! ✅ form 태그 기본 구조 action: 데이터를 전송할 서버 주소를 지정method:GET: 데이터를 URL에 포함하여 전송 (조회 시 사용)POST: 데이터를 본문에 담아 전송 (작성/수정 시 사용)기본값은 GET  🧪 리퀘스트 테스트용 사이트테스트 서버 없이도 리퀘스트 내용을 확인하고 싶다면, Pipedream RequestBin을 활용해보세요!사용 방법:접속 후 Create RequestBin 클릭간단한 가입생성된 주소(ex: https://m.pipedream.net/xxxxx)를 ac..

프론트엔드 개발 시 미디어 콘텐츠(영상, 오디오)나 외부 콘텐츠(다른 웹페이지)를 삽입할 때 사용되는 태그들입니다. 각각 어떤 속성을 사용하는지, 주의할 점은 무엇인지 정리해보겠습니다. 📽️ 태그웹페이지에 **비디오(영상)**를 삽입할 때 사용합니다.✅ 주요 속성속성설명src재생할 영상 파일의 경로controls재생 버튼, 프로그레스 바 등 기본 UI 표시autoplay자동 재생 (※ 크롬에선 muted도 함께 써야 작동)muted음소거 상태로 재생 시작 (자동재생 위해 필요)width, height영상 크기 설정🛠 예제 코드 지원하지 않는 브라우저입니다.🔎 주의: 크롬에서는 autoplay만으로는 자동 재생이 되지 않고, muted 속성도 필수입니다.  🔊 태그웹페이지에 **오디오(음성)*..

웹에서 데이터를 표 형태로 깔끔하게 보여주고 싶을 때 사용하는 것이 바로 태그입니다.테이블 태그를 잘 활용하면 정보 전달력이 높아지고, 레이아웃 구성에도 많은 도움이 됩니다.이번 글에서는 테이블 구조와 관련 태그, 그리고 기본적인 스타일링까지 정리해볼게요! 📌 테이블 구조 태그 정리태그의미설명표 전체표의 시작과 끝을 감쌉니다.table head테이블의 제목 혹은 열 영역을 정의합니다. 안에 를 넣어 구성.table body실제 데이터가 들어가는 영역입니다. 로 구성.table footer테이블의 맨 아래 요약 또는 합계 영역에 사용됩니다. 나 사용.table header테이블 헤더 셀, 기본적으로 굵은 글씨와 가운데 정렬이 적용됩니다.table row테이블의 한 행(row) 을 나타냅니다. 안에 나..

웹 페이지를 만들면서 가장 자주 쓰게 되는 태그 중 하나가 바로 태그입니다.a는 anchor(닻)라는 의미로, 문서의 다른 위치나 외부 페이지로 하이퍼링크를 걸기 위한 태그입니다.  🧭 기본 사용법예제 사이트로 이동href : 이동할 URL 주소링크 텍스트 : 사용자가 클릭할 수 있는 부분  🔍 target 속성 – 새 창에서 열기 vs 현재 창에서 열기새 창에서 열기target="_blank" : 새 탭(또는 새 창)에서 링크 열기target="_self" : 기본값, 현재 창에서 열림target="이름" : 지정된 이름의 창(또는 iframe)에서 열기  ✉️ 이메일, 전화번호 링크로 연결하기이메일 보내기 전화 걸기mailto: : 이메일 클라이언트를 열어 메일 전송tel: : 전화 앱을 통해..

웹 개발을 처음 배우는 과정에서 꼭 알아야 할 두 가지 중요한 개념이 있습니다.바로 **Hypertext(하이퍼텍스트)**와 **Markup Language(마크업 언어)**입니다.이 두 가지는 HTML과 웹의 작동 원리를 이해하는 데 큰 도움이 됩니다.📌 Hypertext (하이퍼텍스트)Hypertext란 문서와 문서를 서로 연결해주는 "링크" 기능이 포함된 텍스트를 말합니다.웹에서 우리가 자주 사용하는 **하이퍼링크(a 태그)**가 바로 이 개념을 기반으로 만들어진 겁니다.예시:Example 사이트로 이동클릭하면 다른 페이지로 이동사용자의 탐색 경험을 확장해주는 핵심 기능하이퍼텍스트는 웹의 연결성을 가능하게 하는 핵심 요소입니다.  🧩 Markup Language (마크업 언어)Markup Lan..