블로그 모아보기 - 인프런

Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(6)

#지난주에 이어서...CSS로 화면을 설계하고,자바스크립트로 동작을 붙였다면,6주차는 드디어 웹 문서를 ‘직접 조작하는 단계’로 들어섰다. # 자바스크립트와 객체자바스크립트가 왜 객체 기반 언어인지 이해하는 장이다.객체의 개념자바스크립트의 내장 객체브라우저와 관련된 객체* 이제 코드가 단순한 명령어 모음이 아니라속성과 기능을 묶은 구조(객체)로 보이기 시작했다.웹 브라우저 자체도 하나의 거대한 객체 시스템이라는 점이 인상적이었다.# 문서 객체 모델(DOM) 다루기드디어 DOM 등장.문서 객체 모델 이해하기DOM 요소 접근하기내용 수정하기이벤트 처리하기노드 추가·삭제class 속성 추가·제거* 여기서부터 진짜 “웹을 조작한다”는 느낌이 들었다.HTML은 구조,CSS는 디자인,JavaScript는 동작이라고 배웠지만DOM을 배우고 나니이 세 가지가 완전히 연결되는 지점이 보였다.버튼을 클릭하면특정 요소를 찾아내용을 바꾸고클래스를 추가해 스타일을 변경하는 흐름이제야 비로소“프론트엔드의 기본 구조”가 머릿속에서 연결됐다.# 6주차를 마치며 – 완주!처음엔 단순히“HTML부터 다시 정리해보자”는 마음으로 시작한 스터디였는데,6주를 마치고 보니 웹이 어떻게 만들어지고, 어떻게 동작하는지 한 사이클을 다 돌았다는 느낌이다.6주후 내가 얻은 것웹의 구조 이해 (HTML)화면 설계 능력 (CSS)로직과 상호작용 (JavaScript)문서 조작 능력 (DOM)이제는 단순히 코드를 따라 치는 게 아니라“왜 이렇게 동작하는지”를 설명할 수 있는 단계까지 온 것 같다.정말 긴 여정이었지만, 매주 기록을 남기며 공부한 덕분에 흐름이 훨씬 또렷하게 정리됐다.

웹 퍼블리싱･HTML･CSS･javascript･웹표준･스터디･DOIT

1

0

AI 에이전트와 웹의 연결, Chrome의 새로운 표준 'WebMCP'를 아시나요?

안녕하세요! 최근 AI 에이전트가 브라우저에서 직접 작업을 수행하는 능력이 주목받고 있는데요.기존에는 AI가 화면을 스크래핑하거나 DOM 구조를 추측하는 방식이라 UI가 조금만 바뀌어도 동작이 깨지는 한계가 있었습니다. 이를 해결하기 위해 구글 크롬 팀이 제안한 새로운 프로토콜, WebMCP(Web Model Context Protocol)를 소개하고자 합니다. 핵심 요약: "추측에서 계약으로"WebMCP의 핵심은 웹사이트가 AI에게 "나 이런 도구(Tool)가 있고, 이런 데이터가 필요해"라고 명시적인 '사용 설명서'를 건네주는 것입니다.정확도 상승: JSON Schema를 통해 입력값 규격을 맞추므로 환각(Hallucination)이 줄어듭니다.유지보수 용이: UI 레이아웃이 변경되어도 정의된 도구 이름만 같다면 AI는 문제없이 작동합니다.클라이언트 기반: 서버가 아닌 브라우저 내부에서 사용자의 컨텍스트를 활용해 실시간으로 동작합니다. 🖼 기존 방식 vs WebMCP 방식 비교 💻 구현 예시 (선언적 방식)JavaScript 한 줄 없이 HTML 속성만으로도 AI용 도구를 만들 수 있다는 점이 놀랍습니다.<form toolname="search_flights" tooldescription="출발지, 목적지, 날짜를 입력받아 항공권을 검색합니다." > <input type="text" name="departure" label="출발지" required> <input type="text" name="arrival" label="목적지" required> <input type="date" name="travel_date" label="여행 날짜"> <button type="submit">검색</button> </form>이제는 SEO(검색 최적화)를 넘어, AI 에이전트가 우리 서비스를 얼마나 잘 활용하게 만들 것인가를 고민하는 AIO(AI Optimization)가 웹 개발의 새로운 표준이 될 것으로 보입니다.WebMCP의 구체적인 작동 원리와 JavaScript API 활용법 등 더 자세한 내용이 궁금하신 분들은 아래 제 블로그 포스팅에 정리해 두었습니다. 👉[블로그 링크: WebMCP - 웹과 AI 에이전트를 잇는 새로운 표준] 앞으로의 웹 생태계가 어떻게 변할지, 여러분의 의견도 궁금합니다

AI 개발 활용･WebMCP･AI에이전트･AIO･웹표준･구글크롬･프론트엔드･LLM･자동화･신기술･웹개발

0

Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(5)

#지난주에 이어서...4주차에서 Grid와 고급 선택자로 CSS의 구조를 완성했다면,5주차는 정적인 화면에 움직임과 동작을 붙이는 단계로 넘어가는 구간이었다. # 트랜지션과 애니메이션CSS로 화면에 움직임과 흐름을 주는 방법을 다룬다.transform 속성 알아보기transition으로 부드러운 변화 만들기animation으로 반복 동작 구현하기* 단순히 스타일을 바꾸는 게 아니라사용자 행동에 반응하는 시각적 피드백를 만들 수 있다는 점이 인상적이었다.CSS만으로도 충분히 ‘동적인 화면’을 만들 수 있다는 걸 체감한 파트.# 자바스크립트와 첫 만남이제 본격적으로 자바스크립트 등장!자바스크립트로 무엇을 할 수 있는지웹 브라우저와 자바스크립트의 관계기본 용어와 입출력 방법자바스크립트 스타일 가이드* 자바스크립트는HTML, CSS와 완전히 다른 역할을 맡고 있는 언어라는 점이 분명해졌다.“화면을 조작하고, 사용자와 상호작용하는 역할”이라는 개념을 잡는 데 집중한 장.# 자바스크립트 기본 문법프로그래밍 언어로서의 자바스크립트를 배우기 시작한다.변수 개념자료형연산자조건문반복문* 다른 언어를 접해본 사람이라면 익숙한 개념들이지만,웹 맥락에서 어떻게 쓰이는지가 새롭게 느껴졌다.이제부터 ‘생각을 코드로 옮기는 연습’이 본격적으로 시작된 느낌.# 함수와 이벤트자바스크립트의 핵심 개념 중 하나인 함수와 이벤트를 다룬다.함수의 개념과 사용 방법변수 스코프 이해하기이벤트의 개념* 여기서부터 진짜 “웹이 살아 움직인다”는 느낌이 들었다.사용자의 클릭, 입력 같은 행동이코드와 직접 연결되는 구조가 인상적이었다.# 5주차를 마치며5주차는 한마디로정적인 웹에서 동적인 웹으로 넘어가는 분기점이었다.CSS로 시각적인 움직임을 만들고자바스크립트로 로직과 동작을 붙이면서웹 페이지가 단순한 문서가 아니라 하나의 인터페이스처럼 느껴지기 시작했다.아직 자바스크립트가 익숙하진 않지만,이제는 “이걸로 뭘 만들 수 있을지”가 상상되기 시작하는 단계인 것 같다.

웹 퍼블리싱･HTML･CSS･javascript･웹표준･스터디･DOIT

0

Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(4)

#지난주에 이어서...3주차에서 Flexbox와 반응형 개념을 익혔다면,4주차는 CSS 레이아웃과 선택자의 ‘완성 단계’라고 느껴지는 구간이었다. # CSS 그리드 레이아웃으로 배치하기Flexbox가 한 방향 정렬이라면,Grid는 화면 전체를 설계하는 레이아웃 도구라는 느낌이었다.CSS Grid 기본 개념행(row)과 열(column) 구조그리드 라인과 템플릿 영역전체 레이아웃 설계 방식* 화면을 칸 단위로 설계할 수 있어서페이지 구조가 훨씬 명확해졌다.“이건 Flex로, 이건 Grid로”레이아웃 도구를 상황에 맞게 선택하는 감각이 생긴 파트.# CSS 고급 선택자CSS를 더 똑똑하게 쓰기 위한 선택자 심화 파트다.연결 선택자속성 선택자가상 클래스와 가상 요소CSS 함수 사용해보기* HTML 구조를 그대로 두고도원하는 요소만 정확히 집어 스타일을 적용할 수 있다는 점이 인상적이었다.CSS가 단순한 스타일 언어가 아니라조건과 상태를 다루는 언어라는 느낌이 확 와닿았다.# 4주차를 마치며4주차를 정리해보면CSS로 ‘배치하고, 선택하고, 제어하는 방법’을 완성한 주차였다.Grid로 전체 레이아웃을 설계하고고급 선택자로 세밀하게 스타일을 적용하면서CSS를 훨씬 구조적으로 바라보게 됐다.처음엔 속성도 많고 개념도 어려웠지만,이제는 화면을 보면 “이건 어떤 방식으로 짜면되겠다."같은 생각이 들기 시작한다.

웹 퍼블리싱･HTML･CSS･javascript･웹표준･스터디･DOIT

0

Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(3)

#지난주에 이어서...2주차에서 HTML과 CSS의 기본 문법을 익혔다면,3주차는 ‘화면을 어떻게 배치하고, 어떻게 반응하게 만들 것인가’에 집중하는 구간이었다. # CSS 박스 모델CSS 레이아웃의 시작이 되는 박스 모델을 다룬다.콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)요소 크기 계산 방식여백을 조절하는 속성기본 레이아웃 구성*“왜 생각한 크기랑 실제 화면 크기가 다를까?”에 대한 답이 박스 모델에 다 들어 있었다.CSS를 헷갈리게 만드는 거의 모든 문제의 출발점이라는 느낌.# 이미지와 그라데이션 효과로 배경 꾸미기배경을 다루는 CSS 속성들을 집중적으로 배운 장이다.배경색과 배경 범위배경 이미지 지정반복, 위치, 크기 설정그라데이션 효과 적용*단순히 색만 칠하는 게 아니라이미지 + 그라데이션을 조합해서 화면 분위기를 만드는 방법을 익힐 수 있었다.실무 감각이 조금씩 느껴지기 시작한 파트.# 반응형 웹과 미디어 쿼리이제 화면은 고정 크기가 아니라는 걸 전제로 학습이 진행된다.반응형 웹의 개념화면 크기에 따라 요소가 변하는 구조미디어 쿼리 기본 문법디바이스별 대응 방식*“PC에서 잘 보이던 화면이 왜 모바일에선 깨질까?”이 질문에 대한 명확한 해답을 주는 장이었다.CSS는 결국 조건에 따라 다르게 보여주는 언어라는 게 확 와닿았다.# 플렉스 박스 레이아웃으로 배치하기레이아웃의 판도를 바꾼 Flexbox 파트.flex 컨테이너와 아이템 개념정렬과 배치 방식반응형을 고려한 레이아웃 구성*예전처럼 float나 position에 의존하지 않고정렬과 배치를 훨씬 직관적으로 할 수 있다는 점이 인상적이었다.처음엔 속성이 많아 헷갈리지만, 익숙해질수록 강력한 도구라는 느낌.# 3주차를 마치며3주차는 한마디로*“CSS는 꾸미는 게 아니라 설계하는 언어”라는 걸 체감한 주차였다.박스 모델로 구조를 이해하고배경으로 분위기를 만들고미디어 쿼리로 화면에 반응하게 만들고Flexbox로 배치를 정리하는 흐름이제야 “웹 페이지를 만든다”는 감각이 조금씩 잡히기 시작했다.

웹 퍼블리싱･HTML･CSS･javascript･웹표준･스터디･DOIT

0

Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(2)

#지난주에 이어서...1주차에서 HTML 기본 구조를 훑어봤다면,2주차는 ‘이제 진짜 웹페이지처럼 보이게 만드는 단계’였다.이번 주차에서는 입력 요소(Form) 와 CSS 스타일링의 핵심 개념들을 집중적으로 다뤘다.# 입력 양식 작성하기 (Form)웹에서 빠질 수 없는 게 바로 입력 폼이다.회원가입, 로그인, 검색창… 전부 여기서 시작하니까!<form> 태그의 역할과 기본 구조 이해<input> 태그의 다양한 타입들 (text, password, checkbox, radio 등)placeholder, value, name 같은 입력 요소 속성들여러 입력 태그를 함께 사용하는 방법*단순히 “입력창을 만든다”에서 끝나는 게 아니라브라우저가 데이터를 어떻게 인식하는지까지 같이 보게 돼서 꽤 중요했다.# CSS 기초 다지기이번 주차의 핵심은 단연 CSS.* CSS 기본 개념CSS를 왜 쓰는지HTML과 CSS의 역할 분리스타일 적용 우선순위 개념특히 같은 요소에 스타일을 여러 번 줬을 때 어떤 게 적용되는지직접 실습으로 보니까 이해가 훨씬 빨랐다.# CSS 속성으로 다양한 스타일 적용하기색상, 글자 크기, 배경…이제야 “웹페이지 꾸미기”가 시작된 느낌!color, background, font-sizergba 색상으로 투명도 조절배경 이미지 적용 & 고정 배경* 단순한 글자 하나도CSS 하나 바꾸면 분위기가 완전 달라지는 게 재밌었다.# text-shadow로 텍스트 효과 주기이번 주차에서 제일 재미있었던 파트.text-shadow 기본 문법그림자 위치, 흐림 정도, 색상 조합여러 스타일을 적용한 텍스트 실습텍스트 하나에 그림자만 줘도확실히 기본이랑은 느낌이 다르다!# 2주차를 마치며입력 폼은 웹의 기본 인터페이스CSS는 단순 꾸미기가 아니라 구조적인 규칙우선순위 개념은 앞으로 계속 중요하게 쓰일 것 같음 아직은 단순한 예제들이지만,이제 “보이는 웹페이지”를 만들기 시작했다는 느낌이 들어서확실히 1주차보다 재미있었다.

웹 퍼블리싱･HTML･CSS･javascript･웹표준･스터디･DOIT

0

Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(1)

겨울 방학을 맞아 Do it! 기초 언어 스터디에 참여하게 되었다.6주 동안 한 권의 책을 정해, 매주 진도에 맞춰 학습하고 내용을 정리해 공유하는 스터디다.내가 선택한 책은「HTML + CSS 웹 표준의 정석」웹 개발을 기본부터 정리하기에 딱 좋은 책이라 이번 스터디 도서로 골랐다.스터디는 단순히 읽고 끝나는 게 아니라정해진 진도표에 맞춰 학습매주 개인 SNS에 공부 내용 정리기록을 통해 흐름을 정리하는 방식으로 진행된다.이번 글에서는 1주차 진도(01~04장)를 간단히 정리해보려고 한다.# 1주차 진도 요약 (01~04)01. 웹은 어떻게 움직일까웹 개발에 들어가기 전, 웹의 동작 원리를 이해하는 장이다.정적 웹과 동적 웹의 차이클라이언트와 서버의 역할요청(Request)과 응답(Response)의 흐름웹 접근성의 기본 개념* 웹은 단순히 화면을 띄우는 것이 아니라브라우저와 서버가 계속 데이터를 주고받는 구조라는 점을 다시 정리할 수 있었다.초반부터 웹 접근성을 다루는 점도 인상적이었다.02. 웹 개발 시작하기본격적인 코딩 전에, 웹 개발을 어떻게 시작하면 좋은지 방향을 잡아주는 장이다.웹 개발 학습 흐름개발 환경 설정에디터와 브라우저의 역할파일과 폴더 구조 개념* “무엇부터 해야 할지 막막한 사람”에게학습 순서를 정리해주는 챕터라는 느낌이었다.툴 설명보다는 개발을 바라보는 관점 위주라 부담이 적었다.03. HTML 기본 문서 만들기이제 실제 HTML 문서를 만들어보는 단계다.HTML의 역할HTML 기본 문서 구조<html>, <head>, <body>의 의미시맨틱 태그의 개념* HTML은 단순히 화면을 꾸미는 언어가 아니라문서의 구조와 의미를 표현하는 언어라는 점이 핵심이었다.왜 시맨틱 태그를 써야 하는지도 자연스럽게 이해할 수 있었다.04. 웹 문서에 다양한 내용 입력하기웹 문서에 실제 콘텐츠를 채워 넣는 방법을 다룬다.텍스트 입력목록 만들기표 만들기이미지 삽입오디오·비디오 삽입하이퍼링크 연결* 우리가 매일 보는 웹 페이지가어떤 HTML 요소들로 구성되는지 하나씩 뜯어보는 파트였다.특히 표와 이미지, 링크 부분은 실습하면서 구조가 확실히 잡혔다.# 1주차를 마치며01~04장은웹의 개념 → 개발 준비 → HTML 문서 구조 → 콘텐츠 구성으로 이어지는, 웹의 기초를 다지는 구간이었다.이 단계가 단단해야 이후 내용도 자연스럽게 이어질 것 같다는 느낌이 들었다.

웹 개발･HTML･css･자바스크립트･웹표준･스터디･DOIT

0