mirabo01 님의 블로그

HTML에서 **form(폼)**은 단순히 정보를 입력받는 도구가 아니라,사용자와 웹을 연결하는 핵심 인터페이스다.회원가입, 로그인, 검색창, 주문서 등대부분의 웹서비스가 폼을 통해 데이터를 주고받는다.이번 글에서는 폼의 구조, 입력요소, 유효성 검증까지한 번에 이해할 수 있도록 단계별로 정리한다.💡 1. Form의 기본 구조 이해하기“폼(form)은 데이터를 입력받아 서버로 전송하는 HTML 영역이다.”기본 문법 👇 이름: 제출 속성 설명action데이터를 전송할 서버 주소method전송 방식 (get 또는 post)name서버에서 데이터를 식별하는 이름required필수 입력 지정💬 method="get"은 URL에 데이터를 포함하고,method="post"는 본문(body)..

HTML을 ‘잘’ 쓴다는 건 단순히 화면에 보이는 걸 만드는 게 아니다.검색엔진, 보조기기, 개발자, 브라우저가 모두 이해할 수 있는 구조로 작성해야 한다.이번 글에서는 HTML5의 핵심 개념인 시맨틱(Semantic) 태그를 중심으로,의미 기반의 문서 설계 방법을 완벽히 정리해본다.💡 1. 시맨틱 태그란 무엇인가?“시맨틱(semantic)”이란 ‘의미 있는’이라는 뜻이다.HTML5 이전에는 모든 영역이 와 으로만 구분됐다.하지만 이렇게 작성된 페이지는 컴퓨터가 내용을 이해하지 못한다.예를 들어 👇 이건 브라우저에게 “여기가 무엇을 의미하는지” 아무런 정보를 주지 않는다.반면에 👇 이 코드는 구조적 의미를 전달한다.검색엔진, 스크린리더, 크롤러가“이건 페이지의 상단 / 본문 / 하단”임을..

이전 편에서 HTML의 기본 구조를 배웠다면,이번에는 웹을 ‘보이게’ 만드는 핵심인 콘텐츠 태그를 다뤄보자.HTML의 본질은 콘텐츠를 구조화하고 표현하는 것이다.이 글에서는 텍스트, 이미지, 링크, 목록 등가장 자주 쓰이는 태그들을 실무 중심으로 완전히 정리한다.💡 1. 텍스트 관련 태그 — 웹페이지의 뼈대를 이루는 요소웹의 모든 콘텐츠는 텍스트에서 시작된다.HTML은 단순한 문단부터 제목 구조까지 다양한 텍스트 태그를 제공한다.🔹 제목 태그 ~ 문서의 계층 구조를 나타내는 태그로,이 가장 중요하고 로 갈수록 하위 단계다.HTML 기본 태그 완전 정리 텍스트 관련 태그 문단과 줄바꿈 💡 SEO 핵심 포인트한 페이지에는 은 1개만제목 구조는 문서 계층을 명확히 보여줌검색엔진은 h1~h3까지를 주요 ..

“HTML은 웹의 시작이자 끝이다.”모든 웹사이트, 블로그, 앱 화면의 기본 구조는 HTML로 만들어진다.이번 글에서는 HTML이 무엇이고, 어떻게 동작하며,실무에서 HTML을 ‘잘’ 쓰려면 어떤 점을 알아야 하는지기초부터 완벽히 정리해본다.💡 1. HTML이란 무엇인가?“HTML은 웹페이지의 구조를 정의하는 언어다.”HTML은 HyperText Markup Language의 약자다.HyperText: 링크를 통해 문서끼리 연결되는 구조Markup: 태그(tag)로 문서의 의미를 표시Language: 웹 브라우저가 이해할 수 있는 문법💬 즉, HTML은 “웹페이지의 뼈대와 의미”를 담당한다.디자인은 CSS가, 동작은 JavaScript가 맡는다.HTML은 ‘내용을 구조화’하는 언어다.🧱 2. HTM..

이제 당신은 Git을 이용해 브랜치를 만들고, 병합하고, PR 리뷰까지 할 줄 안다.그렇다면 다음 단계는 **“자동화”**다.이번 편에서는✅ Git Hooks — 로컬에서 자동 검증 및 실행✅ GitHub Actions — 클라우드에서 자동 빌드·배포두 가지를 활용해 실무 수준의 CI/CD(Continuous Integration / Continuous Deployment) 환경을 구축하는 방법을 완전 정리한다.💡 1. CI/CD란 무엇인가?“코드를 자동으로 테스트·빌드·배포해주는 자동화 개발 흐름”단계 의미 설명CI (Continuous Integration)지속적 통합코드 변경을 자동 테스트 및 병합CD (Continuous Deployment)지속적 배포테스트 통과 시 자동으로 배포 진행💬 간단..

Git을 혼자 쓸 땐 단순하지만,팀으로 협업하기 시작하면 GitHub의 진짜 힘이 드러난다.오늘은 실무에서 꼭 알아야 할 3가지 협업 핵심 도구 —✅ Pull Request (PR)✅ Issue✅ Code Review를 중심으로, 효율적인 협업 흐름을 단계별로 정리해본다.💡 1. 협업의 기본: “main을 건드리지 않는다”“팀 프로젝트의 첫 번째 규칙: main 브랜치는 절대 직접 수정하지 않는다.”main은 서비스가 실제로 배포되는 가장 안정적인 버전이다.따라서 모든 변경은 별도의 브랜치에서 작업 → PR로 병합 요청이라는 과정을 반드시 거쳐야 한다.💬 쉽게 말하면,“main은 교본이고, 나머지 브랜치는 실험실이다.”🌱 2. 작업 전 기본 플로우협업은 아래 순서를 습관처럼 반복한다 👇git cl..

Git을 좀 다뤄봤다면 이런 상황이 있었을 것이다 👇“지금 급하게 다른 브랜치로 이동해야 하는데,아직 작업 중인 코드는 커밋하면 안 돼요!”또는,“예전에 특정 커밋 하나만 가져오고 싶은데전체 코드를 합치긴 싫어요.”이럴 때 필요한 것이 바로 stash, tag, cherry-pick이다.이 세 가지는 실무 개발자가 꼭 알아야 하는 “생산성 3대 명령어”다.💡 1. Git Stash — 작업을 임시로 저장하기“커밋하지 않고 현재 작업 상태를 잠시 숨겨두는 기능”🔹 상황 예시로그인 기능을 수정 중인데, 갑자기 다른 브랜치 버그를 고쳐야 할 때!👉 커밋은 아직 하기 이르고, 그렇다고 코드를 버릴 수도 없다.이럴 때 쓰는 게 바로 git stash⚙️ 사용법git stash ✅ 결과Saved workin..

“분명 잘되던 코드인데, 갑자기 merge conflict 떴어요!”협업을 시작하면 누구나 처음 마주하는 벽이 바로 Git 충돌(conflict) 이다.이 문제는 피할 수는 없지만, 이해하면 쉽게 해결할 수 있다.이번 글에서는✅ 충돌이 왜 생기는지✅ 어떤 방식으로 해결하는지✅ 실무에서 가장 깔끔한 정리 루틴은 무엇인지단계별로 완벽히 정리해보자.💡 1. 충돌(conflict)이란?“Git이 두 개의 수정 내용을 동시에 병합할 수 없을 때 발생하는 현상”Git은 보통 자동으로 merge를 해준다.하지만 두 브랜치에서 같은 파일의 같은 줄을 수정했다면,Git은 “어느 쪽이 맞는지” 판단할 수 없기 때문에 충돌이 발생한다.예를 들어 👇main 브랜치console.log("Hello world!");featu..

“브랜치는 알겠는데,실무에서는 브랜치를 어떻게 나누고, 언제 병합해야 할까?”입문자 단계에서는 main과 feature 정도만 사용하지만,팀 프로젝트나 서비스 운영 단계로 가면명확한 브랜치 전략(Workflow) 이 필요하다.이번 글에서는 실무에서 가장 널리 쓰이는 두 가지 전략,✅ Git Flow 와 ✅ Trunk Based Development를 비교하고, 실제 예시와 함께 최적의 선택 기준을 알려준다.💡 1. 브랜치 전략이 중요한 이유“팀 프로젝트는 코드를 나누는 게 아니라, 책임을 나누는 것이다.”프로젝트 규모가 커질수록누가 어디서 개발 중인지어느 브랜치가 배포 가능한지어떤 버전이 안정적인지이 모든 걸 관리해야 한다.브랜치 전략은 이런 협업의 혼란을 방지하고,안정적인 배포 파이프라인을 만드는 설..

“커밋 잘못했어요. 코드가 다 망가졌어요…”모든 개발자가 한 번쯤 외치는 말이다.하지만 걱정할 필요 없다.Git은 바로 이런 순간을 대비한 되돌리기 기능의 제왕이다.이번 글에서는 reset / revert / restore 세 가지 명령을 비교하며,실무에서 어떤 상황에 어떤 명령을 써야 하는지 완벽히 정리한다.💡 1. Git의 ‘되돌리기’ 개념Git은 모든 변경 이력을 커밋 단위로 저장한다.즉, 코드를 실수로 지워도“그 이전 상태로 돌아갈 수 있는 스냅샷”이 존재한다.📘 되돌리는 방법은 크게 두 가지다:구분 방식 설명reset / restore과거 상태로 ‘돌려버림’기록 자체를 변경revert과거 상태를 ‘새 커밋으로 복원’기록은 유지💬 즉,reset = 과거로 시간여행 (이전 커밋으로 덮어쓰기)r..