웹 퍼블리싱, JavaScript, React, TypeScript, Figma, AI 웹개발을 공부하고 계신 분들을 위해 인프런 강의 할인 이벤트를 준비했습니다. 🎉

참여 방법도 어렵지 않습니다.

유튜브 채널 구독 + 영상 좋아요 + 댓글 작성 후 인증하면 제가 운영하는 인프런 강의 중 원하는 강의를 최대 2개까지 50% 할인받을 수 있는 쿠폰을 제공합니다.

웹개발 공부를 시작하려고 했던 분이나 관심 있었던 강의를 조금 더 부담 없이 수강하고 싶었던 분이라면 이번 이벤트를 활용해보세요.

🎁 이벤트 혜택

이벤트에 참여하고 인증해주신 분께

🔥 인프런 강의 50% 할인 쿠폰 제공

🔥 원하는 강의 최대 2개 선택 가능

즉, 한 강의만 선택해도 되고 공부하고 싶은 강의가 여러 개라면 최대 2개의 강의를 각각 50% 할인된 가격으로 수강할 수 있는 기회입니다.

웹 퍼블리싱부터 React, TypeScript, Figma 그리고 AI 웹개발까지 자신의 학습 단계에 맞는 강의를 선택해보세요.

📌 이벤트 참여 방법

참여 방법은 간단합니다.

STEP 1. 유튜브 채널 구독하기

먼저 유튜브 채널을 구독해주세요.

http://www.youtube.com/@Ezweb

이미 구독 중이신 분도 이벤트에 참여하실 수 있습니다.

STEP 2. 영상 좋아요 👍

관심 있는 강의 또는 도움이 되었던 영상을 시청하고 좋아요를 눌러주세요.

STEP 3. 영상에 댓글 작성하기 💬

영상을 시청한 후 간단한 댓글을 남겨주세요.

예를 들면

“React 공부 시작했는데 영상 잘 보고 있습니다!”

“웹 퍼블리싱 공부에 도움이 많이 됐습니다.”

“TypeScript 강의도 공부해보고 싶어요.”

처럼 영상에 대한 의견이나 학습하면서 느낀 점을 자유롭게 작성해주시면 됩니다.

STEP 4. 참여 인증하기

구독, 좋아요, 댓글 작성을 완료했다면 아래 이벤트 신청 페이지에서 인증해주세요.

👉 이벤트 참여 및 쿠폰 신청

https://forms.gle/wcD2wRVeaG7B7fSj7

신청 내용을 확인한 후 인프런 강의 50% 할인 쿠폰을 이메일로 보내드립니다.

📚 어떤 강의를 선택할 수 있나요?

웹개발을 처음 시작하는 분부터 React와 AI 웹개발까지 공부하려는 분들을 위한 다양한 강의가 준비되어 있습니다.

🔰 웹개발 입문

코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초 [무료]
https://inf.run/dgp3h

코딩은 처음이라 with 웹 퍼블리싱 - CSS [무료]
https://inf.run/mhMvf

HTML과 CSS를 처음 접한다면 무료 강의부터 시작하는 것을 추천합니다.

💻 JavaScript 기초

웹프로그래밍의 꽃! 자바스크립트 기초
https://inf.run/1WVtB

HTML/CSS 다음 단계로 JavaScript를 공부하고 싶은 분들에게 추천합니다.

🎨 Figma + 웹 퍼블리싱 실전

Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드
https://inf.run/u3qkb

모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
https://inf.run/CFwhX

CSS GRID 마스터: FIGMA 디자인 웹구현 실전
https://inf.run/e2Scb

웹 퍼블리싱 마스터 하기 - figma to web with javascript
https://inf.run/u2Qg4

Figma 디자인을 보고 실제 웹사이트로 구현하는 능력을 키우고 싶은 분들에게 추천합니다.

⚙️ jQuery

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지
https://inf.run/XXEu6

웹 퍼블리싱 실무나 기존 웹사이트 유지보수까지 고려하고 있다면 JavaScript와 함께 공부해두면 좋습니다.

⚛️ React + TypeScript

처음 만나는 React: 퍼블리셔를 위한 실전 가이드
https://inf.run/DYqtP

타입스크립트 입문 - 기초부터 탄탄하게
https://inf.run/ms5VD

React + TypeScript TodoList App - 실무형 타입스크립트 프로젝트 입문
https://inf.run/GhzkQ

웹 퍼블리셔에서 프론트엔드 개발자로 학습 영역을 확장하고 싶다면

JavaScript → React → TypeScript → React + TypeScript 프로젝트

순서로 공부하는 것을 추천합니다.

🔥 React + Firebase 실전 프로젝트

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트
https://inf.run/1GzoT

React에서 한 단계 더 나아가 인증, 데이터 저장 등을 활용하는 실제 웹서비스 제작을 경험하고 싶은 분들에게 추천합니다.

🤖 AI 웹개발

AI 웹개발 실전 프로젝트 (Stitch · Figma Make · React)
https://inf.run/P8KsU

생성형 AI로 웹서비스 만들기 – 기획·디자인·코드·배포까지 올인원 프로젝트
https://inf.run/etRdk

AI를 단순히 질문하는 도구가 아니라 실제 웹개발 과정에 활용하고 싶다면 이 단계까지 도전해보세요.

기획 → 디자인 → 개발 → 배포까지 생성형 AI를 활용하는 웹개발 워크플로를 경험할 수 있습니다.

🗺️ 어떤 강의를 선택해야 할지 모르겠다면?

현재 실력에 따라 선택하면 어렵지 않습니다.

코딩 완전 초보

HTML → CSS → JavaScript

웹 퍼블리셔 준비

HTML/CSS → JavaScript → Figma → 반응형 웹 → CSS Grid → 웹 퍼블리싱 실전

프론트엔드 개발자 준비

JavaScript → React → TypeScript → React + TypeScript → Firebase

AI 웹개발 관심

JavaScript → React → AI 웹개발 → 생성형 AI 웹서비스 프로젝트

처음부터 모든 기술을 공부할 필요는 없습니다.

현재 자신의 실력보다 한 단계 높은 강의를 선택해서 프로젝트를 완성해보는 것을 추천합니다.

🎉 구독과 댓글도 남기고, 강의도 50% 할인받으세요!

평소 웹개발 공부에 관심이 있었거나 수강하고 싶었던 강의가 있었다면 이번 기회를 활용해보세요.

참여 방법을 다시 정리하면

① 유튜브 채널 구독
↓
② 영상 좋아요 👍
↓
③ 영상 댓글 작성 💬
↓
④ 이벤트 신청 페이지에서 인증
↓
⑤ 원하는 인프런 강의 최대 2개 50% 할인 쿠폰 받기 🎁

👉 이벤트 참여 및 50% 할인 쿠폰 신청

https://docs.google.com/forms/d/e/1FAIpQLSfA2ruZN0o62cBO7KiMrHJd0G6-CCZ96-4rIc_tn7mFQCq_hg/viewform

웹 퍼블리싱부터 JavaScript, React, TypeScript, Firebase 그리고 AI 웹개발까지.

관심 있었던 분야가 있다면 이번 이벤트와 함께 공부를 시작해보세요! 🚀

“코딩을 배워보고 싶은데 HTML부터 해야 하나요?”

“JavaScript를 먼저 공부해야 하나요?”

“React까지 배우려면 얼마나 공부해야 할까요?”

“요즘 AI로 웹사이트를 만든다는데, 기초 공부 없이 바로 AI부터 시작해도 될까요?”

처음 웹 개발을 공부하면 가장 어려운 것이 무엇을 배우느냐보다 어떤 순서로 배우느냐입니다.

HTML, CSS, JavaScript, Figma, React, TypeScript, Firebase, 생성형 AI….

검색할수록 공부해야 할 기술은 계속 늘어나고, 결국 무엇부터 시작해야 할지 막막해집니다.

그래서 이번 글에서는 코딩을 처음 시작하는 분을 기준으로 웹 퍼블리싱부터 프론트엔드 개발, 그리고 AI를 활용한 웹서비스 제작까지 이어지는 학습 로드맵을 정리해보겠습니다.

전체 학습 로드맵

추천하는 순서는 다음과 같습니다.

HTML → CSS → JavaScript → Figma 기반 웹 퍼블리싱 → jQuery/CSS Grid → 실전 웹사이트 제작 → React → TypeScript → React 프로젝트 → Firebase → AI 웹개발

크게 나누면 5단계입니다.

STEP 1. 웹의 기본기
HTML → CSS → JavaScript

STEP 2. 웹 퍼블리싱 실전
Figma → 반응형 웹 → 모바일 웹 → jQuery → CSS Grid

STEP 3. 웹 퍼블리싱 포트폴리오
Figma 디자인을 실제 웹사이트로 완성

STEP 4. 프론트엔드 개발
React → TypeScript → React + TypeScript

STEP 5. 백엔드 서비스와 AI 웹개발
Firebase → 생성형 AI → AI 기반 웹서비스

처음 시작한다면 모든 강의를 한꺼번에 공부하려 하지 않아도 됩니다.

자신의 현재 수준에 맞는 단계부터 시작하면 됩니다.

STEP 1. 코딩이 처음이라면 HTML부터 시작하세요

웹사이트를 만드는 가장 기본적인 언어는 HTML과 CSS입니다.

HTML은 웹페이지의 구조, CSS는 웹페이지의 디자인을 담당합니다.

집을 짓는 것에 비유하면 HTML이 뼈대를 만드는 과정이라면 CSS는 벽의 색상, 가구 배치, 인테리어 등을 담당한다고 볼 수 있습니다.

① 코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초 [무료]

👉 https://inf.run/dgp3h

코딩을 한 번도 해본 적이 없다면 가장 먼저 추천하는 강의입니다.

HTML 문서의 기본 구조부터 제목, 문단, 이미지, 링크, 목록, 폼 등 웹페이지를 구성하는 기본적인 요소를 익힐 수 있습니다.

무엇보다 무료 강의이기 때문에 웹 개발이 나에게 맞는지 부담 없이 시작해보기 좋습니다.

추천 대상

• 코딩을 처음 시작하는 분
• 웹 퍼블리싱에 관심 있는 분
• HTML을 처음 배우는 분
• 프론트엔드 개발 공부를 시작하려는 분

HTML을 익혔다면 바로 CSS로 넘어갑니다.

STEP 2. CSS로 내가 원하는 디자인을 구현해보세요

② 코딩은 처음이라 with 웹 퍼블리싱 - CSS [무료]

👉 https://inf.run/mhMvf

HTML만 작성하면 웹페이지의 구조만 만들어진 상태입니다.

실제 우리가 보는 웹사이트처럼 만들기 위해서는 CSS가 필요합니다.

글자의 크기와 색상부터 여백, 배치, 레이아웃, 이미지 표현 등 웹페이지의 시각적인 부분을 CSS로 구현합니다.

HTML과 CSS는 따로 공부하기보다 함께 익히는 것이 좋습니다.

HTML → CSS까지 학습했다면 이제 간단한 웹페이지를 직접 만들어볼 수 있는 단계에 도달합니다.

그리고 여기서부터 다음 단계인 JavaScript가 중요해집니다.

STEP 3. 움직이는 웹사이트를 만들고 싶다면 JavaScript

③ 웹프로그래밍의 꽃! 자바스크립트 기초

👉 https://inf.run/1WVtB

HTML과 CSS가 웹사이트의 구조와 디자인을 담당한다면 JavaScript는 웹사이트에 동작과 기능을 추가합니다.

예를 들어 메뉴 버튼을 클릭했을 때 메뉴가 나타나거나, 탭 메뉴가 변경되거나, 이미지 슬라이드가 움직이는 기능 등을 구현할 수 있습니다.

JavaScript를 배우기 시작하면서 단순한 웹페이지 제작에서 한 단계 더 나아가 프로그래밍의 개념을 배우게 됩니다.

특히 앞으로 React를 배우고 싶다면 JavaScript 기본기는 반드시 필요합니다.

따라서 React를 빨리 배우고 싶더라도 JavaScript를 건너뛰는 것은 추천하지 않습니다.

HTML → CSS → JavaScript

이 세 가지가 앞으로 배우게 될 모든 웹 프론트엔드 기술의 기초입니다.

STEP 4. 이제 Figma 디자인을 실제 웹사이트로 만들어봅시다

기초 문법을 공부했다면 다음부터는 결과물을 만들어보는 것이 좋습니다.

이 단계부터는 단순히 CSS 속성이나 JavaScript 문법을 외우는 것이 아니라,

Figma 디자인을 보고 실제 웹사이트를 구현하는 연습을 시작합니다.

④ Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드

👉 https://inf.run/u3qkb

실무에서는 완성된 디자인을 전달받아 HTML/CSS/JavaScript로 구현해야 하는 경우가 많습니다.

따라서 Figma 디자인을 분석하고 실제 웹사이트로 옮기는 과정에 익숙해지는 것이 중요합니다.

특히 PC 화면만 만드는 것이 아니라 태블릿과 모바일에서도 자연스럽게 보이는 반응형 웹사이트 제작 능력을 함께 키우는 것을 추천합니다.

STEP 5. 모바일 웹 제작까지 경험해보세요

⑤ 모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript

👉 https://inf.run/CFwhX

요즘 웹사이트에서 모바일 환경은 선택이 아니라 필수입니다.

Figma에 제작된 모바일 디자인을 분석하고 HTML/CSS로 구현하면서 JavaScript를 이용해 실제 인터랙션까지 추가하는 과정을 경험해보세요.

이 단계에서는 앞에서 공부했던 HTML, CSS, JavaScript가 각각 따로 존재하는 기술이 아니라 하나의 웹사이트를 만들기 위해 함께 사용되는 기술이라는 점이 보이기 시작합니다.

STEP 6. jQuery도 공부해야 할까요?

⑥ 아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

👉 https://inf.run/XXEu6

React 시대에 jQuery를 왜 배우냐고 생각할 수도 있습니다.

신규 프론트엔드 프로젝트에서는 React, Vue 같은 기술의 비중이 높아졌지만 웹 퍼블리싱 실무와 기존 웹사이트 유지보수에서는 여전히 jQuery 코드를 만날 가능성이 있습니다.

따라서 웹 퍼블리셔를 목표로 한다면 JavaScript를 먼저 공부한 후 jQuery까지 경험해두는 것을 추천합니다.

중요한 것은 순서입니다.

jQuery → JavaScript가 아니라 JavaScript → jQuery 순서로 공부하는 것을 추천합니다.

STEP 7. CSS 레이아웃 실력을 한 단계 올려보세요

⑦ CSS GRID 마스터: FIGMA 디자인 웹구현 실전

👉 https://inf.run/e2Scb

CSS를 어느 정도 공부했는데도 실제 디자인을 구현하려고 하면 막히는 경우가 있습니다.

대표적인 원인이 바로 레이아웃입니다.

CSS Grid를 활용하면 카드 UI, 갤러리, 상품 목록처럼 복잡한 레이아웃을 보다 체계적으로 구현할 수 있습니다.

단순히 Grid 문법만 암기하기보다는 Figma 디자인을 실제 웹페이지로 옮겨보면서 학습하면 훨씬 효과적입니다.

STEP 8. 웹 퍼블리싱 실력을 하나의 프로젝트로 완성하세요

⑧ 웹 퍼블리싱 마스터 하기 - figma to web with javascript

👉 https://inf.run/u2Qg4

여기까지 왔다면 HTML/CSS/JavaScript의 개별 문법보다는 전체 웹사이트를 완성하는 경험이 중요합니다.

Figma 디자인 분석부터 HTML 구조 작성, CSS 스타일링, JavaScript 인터랙션 구현까지 하나의 흐름으로 연결해보세요.

특히 취업이나 이직을 준비한다면 단순히 “HTML을 공부했습니다”보다

“Figma 디자인을 분석해서 반응형 웹사이트를 직접 구현할 수 있습니다.”

라고 말할 수 있는 실력을 만드는 것이 중요합니다.

웹 퍼블리셔를 목표로 한다면 여기까지를 하나의 1차 목표로 잡아도 좋습니다.

STEP 9. 웹 퍼블리셔에서 프론트엔드 개발자로

웹 퍼블리싱에 익숙해졌다면 이제 React에 도전해볼 차례입니다.

⑨ 처음 만나는 React: 퍼블리셔를 위한 실전 가이드

👉 https://inf.run/DYqtP

React를 처음 배우면 Component, Props, State, Hook 등 생소한 개념이 한꺼번에 등장합니다.

특히 HTML/CSS 중심으로 공부했던 웹 퍼블리셔라면 처음에는 React의 코드 작성 방식이 상당히 다르게 느껴질 수 있습니다.

따라서 처음부터 복잡한 React 프로젝트를 따라가기보다 기존 HTML/CSS/JavaScript 지식을 React의 개념과 연결하면서 공부하는 것이 좋습니다.

이 과정을 거치면 웹 퍼블리싱에서 프론트엔드 개발로 자연스럽게 학습 범위를 넓힐 수 있습니다.

STEP 10. React 다음에는 TypeScript

⑩ 타입스크립트 입문 - 기초부터 탄탄하게

👉 https://inf.run/ms5VD

JavaScript와 React에 익숙해졌다면 TypeScript를 공부할 차례입니다.

TypeScript는 JavaScript에 타입 시스템을 추가해 코드에서 발생할 수 있는 여러 오류를 개발 단계에서 확인할 수 있도록 도와줍니다.

처음에는

“JavaScript도 어려운데 TypeScript까지 배워야 하나?”

라는 생각이 들 수 있습니다.

그래서 처음부터 JavaScript와 TypeScript를 동시에 공부하기보다는

JavaScript → React → TypeScript

순서로 접근하는 것을 추천합니다.

STEP 11. React + TypeScript를 프로젝트로 연결하기

⑪ React + TypeScript TodoList App - 실무형 타입스크립트 프로젝트 입문

👉 https://inf.run/GhzkQ

TypeScript 문법을 공부했다면 실제 React 프로젝트에 적용해봐야 합니다.

React에서 TypeScript를 사용할 때는 Props, State, 이벤트 객체, 데이터 구조 등에 타입을 지정해야 합니다.

이론만 공부하면 어렵게 느껴질 수 있기 때문에 작은 프로젝트를 완성하면서 익히는 것이 좋습니다.

TodoList는 규모가 지나치게 크지 않으면서도 React의 핵심 기능을 연습하기 좋은 프로젝트입니다.

STEP 12. React에서 실제 웹서비스로 확장하기

프론트엔드 화면만 만드는 것에서 한 단계 더 나아가려면 데이터베이스와 회원 인증 같은 기능이 필요합니다.

⑫ HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트

👉 https://inf.run/1GzoT

React로 실제 서비스를 만들다 보면 로그인, 회원정보, 데이터 저장과 같은 기능이 필요해집니다.

하지만 처음부터 Node.js와 서버, 데이터베이스까지 모두 공부하려면 학습 범위가 갑자기 커질 수 있습니다.

이럴 때 Firebase 같은 BaaS 서비스를 활용하면 프론트엔드 개발자도 비교적 쉽게 인증과 데이터베이스 등의 기능을 웹서비스에 연결할 수 있습니다.

즉,

React 화면 구현 → 사용자 인증 → 데이터 저장 → 실제 서비스

로 발전시키는 단계라고 생각하면 됩니다.

STEP 13. 이제 AI를 웹개발에 활용해보세요

최근 웹개발에서 가장 큰 변화 중 하나는 생성형 AI입니다.

하지만 여기서 중요한 점이 있습니다.

AI가 HTML, CSS, JavaScript를 대신 작성해준다고 해서 웹개발 기초가 필요 없는 것은 아닙니다.

AI가 생성한 결과가 올바른지 판단하고 수정하려면 결국 웹개발에 대한 이해가 필요합니다.

기초를 공부한 다음 AI를 활용하면 AI는 단순한 코드 생성기가 아니라 개발 생산성을 크게 높여주는 도구가 됩니다.

⑬ AI 웹개발 실전 프로젝트 (Stitch · Figma Make · React)

👉 https://inf.run/P8KsU

이 단계에서는 기존처럼 모든 화면을 처음부터 직접 만드는 방식에서 한 단계 더 나아갑니다.

AI를 기획과 디자인, 개발 과정에 활용하면서 React 프로젝트 제작까지 연결해보는 것을 추천합니다.

특히 Figma와 React를 이미 공부했다면 기존의 웹 제작 방식과 AI 기반 제작 방식의 차이를 이해하는 데 도움이 됩니다.

STEP 14. AI로 웹서비스 전체 제작 과정에 도전하세요

⑭ 생성형 AI로 웹서비스 만들기 – 기획·디자인·코드·배포까지 올인원 프로젝트

👉 https://inf.run/etRdk

마지막 단계에서는 생성형 AI를 단순히 질문하거나 코드를 만들어주는 도구로 사용하는 수준을 넘어 실제 웹서비스 제작 과정 전체에 활용해봅니다.

아이디어 → 기획 → 디자인 → 코드 → 서비스 구현 → 배포

웹서비스 하나가 만들어지는 전체 흐름을 경험해보는 것이 목표입니다.

앞에서 HTML/CSS/JavaScript와 React를 공부했다면 AI가 생성하는 코드 역시 훨씬 쉽게 이해하고 원하는 방향으로 수정할 수 있습니다.

결국 AI 시대에 중요한 것은

“코드를 직접 작성할 수 있느냐”와 함께 “AI가 만든 코드를 이해하고 원하는 결과로 발전시킬 수 있느냐”입니다.

그래서 어떤 강의부터 들으면 될까요?

현재 자신의 수준에 따라 시작점을 선택하면 됩니다.

🔰 코딩을 한 번도 해본 적이 없다면

HTML 기초 [무료]
↓
CSS [무료]
↓
JavaScript 기초

우선 여기까지 공부해보세요.

처음부터 많은 강의를 구매하기보다 무료 HTML/CSS 강의로 시작한 뒤 웹개발이 재미있다면 JavaScript로 넘어가는 방법을 추천합니다.

🎨 웹 퍼블리셔를 목표로 한다면

HTML
↓
CSS
↓
JavaScript
↓
Figma 반응형 쇼핑몰
↓
모바일 웹
↓
jQuery
↓
CSS Grid
↓
Figma to Web

이 과정을 통해 단순히 문법을 아는 수준에서 디자인을 실제 웹사이트로 구현하는 능력을 키우는 것을 목표로 합니다.

⚛️ 프론트엔드 개발자가 목표라면

HTML/CSS
↓
JavaScript
↓
웹 퍼블리싱 프로젝트
↓
React
↓
TypeScript
↓
React + TypeScript 프로젝트
↓
React + Firebase

특히 React부터 시작하려는 분이라면 JavaScript 기본기를 먼저 충분히 익히는 것을 추천합니다.

🤖 AI 웹개발까지 배우고 싶다면

HTML/CSS/JavaScript
↓
React
↓
AI 웹개발 실전 프로젝트
↓
생성형 AI 웹서비스 올인원 프로젝트

기초를 알고 AI를 사용하는 것과 기초 없이 AI가 만들어주는 코드를 그대로 사용하는 것은 큰 차이가 있습니다.

기초 개발 능력 + AI 활용 능력

두 가지를 함께 갖추는 것이 앞으로의 웹개발 학습에서 중요한 경쟁력이 될 것입니다.

웹개발 공부에서 가장 중요한 것은 ‘순서’입니다

처음부터 모든 것을 공부할 필요는 없습니다.

HTML을 배우면 CSS가 필요한 이유가 보이고,

CSS를 배우면 JavaScript가 필요한 이유가 보이고,

JavaScript를 배우면 React가 왜 등장했는지 이해할 수 있습니다.

React를 공부하면 TypeScript와 데이터베이스, 인증의 필요성이 보이고,

그 과정을 경험한 다음 생성형 AI를 사용하면 AI가 만들어주는 결과물을 훨씬 효과적으로 활용할 수 있습니다.

그래서 처음 시작한다면 다음 한 줄만 기억해도 좋습니다.

HTML → CSS → JavaScript → 실전 웹 퍼블리싱 → React → TypeScript → Firebase → AI 웹개발

그리고 아직 시작을 고민하고 있다면 처음부터 유료 강의를 선택할 필요도 없습니다.

먼저 아래 두 개의 무료 강의부터 시작해보세요.

코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초 [무료]
👉 https://inf.run/dgp3h

코딩은 처음이라 with 웹 퍼블리싱 - CSS [무료]
👉 https://inf.run/mhMvf

HTML과 CSS를 직접 작성해보고 웹페이지가 만들어지는 과정이 재미있다면 그다음 JavaScript, 실전 웹 퍼블리싱, React 순으로 한 단계씩 올라가면 됩니다.

코딩은 한 번에 잘하려고 하기보다 작은 결과물을 계속 완성하면서 다음 단계로 넘어가는 것이 중요합니다.

무료 HTML/CSS 강의부터 시작해서 웹 퍼블리싱, React, TypeScript 그리고 AI를 활용한 웹서비스 제작까지.

자신의 현재 위치에서 딱 한 단계 앞의 강의부터 시작해보세요.

CSS를 배우면서 한 번쯤 이런 생각을 해봤을 겁니다. "체크박스를 체크하면 카드 배경을 초록색으로 바꾸고 싶은데… 결국 JavaScript를 써야 하는 건가?"

2022년까지는 그랬습니다. 하지만 이제는 CSS만으로도 가능합니다. :has() 선택자 덕분에요.

01기존 CSS의 한계 — 왜 "부모 선택"이 어려웠나

CSS 선택자는 기본적으로 아래 방향으로만 작동합니다.

/* ✅ 부모 → 자식: 가능 */
.card input { ... }

/* ✅ 형제 → 형제: 가능 */
input:checked + label { ... }

/* ❌ 자식 → 부모: 불가능 (기존에는) */
/* 체크된 input을 가진 .card에 스타일을 주고 싶다면? */CSS

02:has() 선택자란?

:has()는 괄호 안의 조건을 만족하는 자식/후손을 가진 요소를 선택합니다. 쉽게 말해 "~를 포함한" 이라는 뜻입니다.

/* 기본 문법 */
부모선택자:has(조건) { 스타일 }

/* 예시 1: img를 가진 figure */
figure:has(img) { border: 2px solid blue; }

/* 예시 2: 체크된 input을 가진 .card */
.card:has(input:checked) { background: #e8f5e9; }

/* 예시 3: focus된 input을 가진 .form-field */
.form-field:has(input:focus) { border-color: blue; }CSS

03핵심 예제 — 체크박스 카드

가장 직관적인 예제입니다. 할 일 카드에서 체크박스를 누르면 카드 전체의 배경색이 바뀌고, 텍스트에 취소선이 그어집니다.

위 데모를 구현하는 CSS는 다음과 같습니다:

/* 기본 카드 스타일 */
.todo-card {
  border: 2px solid #ccc;
  background: #f9f9f9;
  transition: all 0.25s ease;
}

/* ✨ 체크된 input을 가진 카드 */
.todo-card:has(input[type="checkbox"]:checked) {
  border-color: #27ae60;
  background: #e8f5e9;
  box-shadow: 3px 3px 0 #27ae60;
}

/* 체크된 카드 안의 제목에 취소선 */
.todo-card:has(input:checked) .card-title {
  text-decoration: line-through;
  opacity: 0.5;
}CSS

HTML 구조는 그대로입니다. JS 이벤트 리스너도, 동적 클래스 추가도 없습니다. CSS 선택자 하나가 전부입니다.

04더 다양한 활용 패턴

① 폼 필드 포커스 강조

input이 포커스되면 label까지 함께 색이 바뀌는 효과입니다. 기존에는 JS나 복잡한 형제 선택자 트릭이 필요했습니다.

.form-field:has(input:focus) {
  border-color: #2980b9;
  background: #eaf3fb;
}

/* 부모 안의 label도 같이 변경! */
.form-field:has(input:focus) label {
  color: #2980b9;
  font-weight: 600;
}CSS

② 페이지 레이아웃 제어 (강력!)

:has()는 훨씬 상위 요소에도 적용됩니다. 예를 들어 특정 섹션이 있을 때 body 전체 레이아웃을 바꿀 수도 있습니다.

/* 사이드바가 있을 때 body 레이아웃 변경 */
body:has(.sidebar) {
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* 모달이 열려 있을 때 스크롤 방지 */
body:has(.modal.open) {
  overflow: hidden;
}CSS

05브라우저 지원 현황

2023년 12월, Firefox 121이 :has()를 지원하면서 모든 주요 브라우저가 지원을 완료했습니다.

전 세계 브라우저 점유율 기준 약 93% 이상의 환경에서 사용 가능합니다 (Can I Use 기준, 2024). 신규 프로젝트라면 충분히 사용할 수 있습니다.

06실무에서 바로 쓸 수 있는 패턴들

• 체크박스 선택 시 카드/행 전체 배경색 변경 (할 일 목록, 설정 패널)
• input focus 시 부모 form-field 전체 강조 (label, border 동시 변경)
• 모달 오픈 시 body 스크롤 비활성화 (body:has(.modal.open))
• 사이드바 존재 여부에 따른 그리드 레이아웃 전환
• 이미지 없는 figure에 플레이스홀더 배경 표시
• required 입력란이 비어 있을 때 submit 버튼 비활성화 스타일
• 라디오/셀렉트 선택값에 따라 미리보기 영역 실시간 변경
• 특정 컴포넌트가 존재할 때만 반응형 레이아웃 다르게 적용

07정리

:has()는 CSS 역사상 가장 오래 기다려온 기능 중 하나입니다. "부모 선택자"라는 별명처럼, 자식의 상태가 부모의 모습을 결정할 수 있게 되었습니다.

처음에는 :has(input:checked), :has(input:focus) 두 가지만 익혀도 충분합니다.

익숙해지면 body:has(.modal)처럼 전역 상태 관리까지 CSS로 처리하게 됩니다.

CSS가 더 이상 "단순히 꾸미는 언어"가 아니라는 것을, :has()가 잘 보여줍니다.

CSS :has() Selector — 부모를 선택하는 마법  ·  Built with pure HTML & CSS

https://youtu.be/EW_G81tEPPQ