분류 전체보기152 [잘난웹디] html css 강좌 -4 레이아웃 HTML/CSS 강의 정리Lesson 4 — Inline 속성 이해하기1. Inline 요소란 무엇인가Inline 요소는 문장 안에서 글자처럼 동작하는 요소입니다.즉, 줄을 새로 만들지 않고 같은 줄에 계속 이어서 배치됩니다.예이 문장은 특정 단어를 강조한 문장입니다.결과이 문장은 특정 단어를 강조한 문장입니다.span은 문장 안에 들어가서 글자처럼 동작합니다.이것이 Inline 요소의 핵심 특징입니다.2. Block vs Inline 다시 이해하기구분Block 요소Inline 요소줄 시작항상 새 줄 시작같은 줄에 표시너비부모 너비 전체콘텐츠만큼width적용 가능적용 안됨height적용 가능적용 안됨배치세로 스택가로 나열3. Inline 요소 예시대표적인 인라인 태그spanaimgembiinputlabe.. 2026. 3. 19. [잘난웹디] html css 강좌 | 1강 html css 기초 입문 (코딩기초 ) HTML/CSS 기초Lesson 1 — HTML / CSS 기초 소개1. 강의 목표이 강의의 목적은 다음과 같다.HTML / CSS 기초 이해ChatGPT를 활용한 학습 방법 익히기직접 웹페이지를 만들어보는 실습 경험기초부터 실무 활용까지 빠르게 이해하기특히 ChatGPT를 학습 도우미로 사용하는 방식을 보여주는 것이 핵심이다.2. ChatGPT를 활용한 학습 방법강의에서는 ChatGPT에게 역할(Role)을 먼저 부여한다.예시 프롬프트너는 HTML/CSS로 웹페이지를 제작하는 20년차 프론트엔드 개발자다.강의 경험도 풍부하고 깔끔한 코드를 작성한다.HTML/CSS 기초부터 실전까지1시간 안에 마스터할 수 있는 커리큘럼을 설계해줘.이후 학습 방식ChatGPT에게 역할 부여필요한 내용 요청답변 검토부족한 .. 2026. 3. 19. Cursor + Figma MCP를 사용할 때 중요한 원칙 Talk to Figma MCP로 할 수 있는 것과 어려운 것요소 생성, 스타일링, 오토레이아웃, 텍스트 수정 기능 이해하기MCP는 피그마를 전부 조작하는 도구가 아니라, 제한된 몇 가지 기능만 수행할 수 있는 도구라는 점입니다.즉, 우리가 피그마에서 평소 하던 모든 작업을 AI가 대신해주는 것은 아닙니다.하지만 그 안에서도 어떤 작업은 꽤 잘하고, 어떤 작업은 아직 제한적입니다.단순히 명령어를 나열해서 외우는 것이 목적이 아니라,무엇을 만들 수 있는지어디까지 자동화할 수 있는지무엇은 기대하면 안 되는지이 범위를 감각적으로 이해하는 것이 중요합니다.먼저 기억할 점 - 일부 기능은 더 이상 지원되지 않습니다예전에 있던 몇몇 명령어는 현재 피그마 API 정책 변경 때문에 더 이상 지원되지 않는 기능입니다.이.. 2026. 3. 18. 디자인 토큰 추출하기에 유용한 툴 정리 CSS Peeper: 컬러와 스타일 값을 뽑아내는 용도Peek: 사이트의 시각 시스템을 한눈에 빠르게 파악하는 용도Superposition: 디자인 토큰과 시스템 관점으로 더 구조적으로 읽는 용도CSS Peeper는 뽑는 도구, Peek는 훑는 도구, Superposition은 구조화해서 보는 도구조금 더 풀어쓰면,1. CSS Peeper웹사이트에 실제 사용된 색상, 폰트, 버튼 스타일 등을 구체적인 값 중심으로 추출할 때 좋습니다.2. Peek웹사이트의 컬러 팔레트, 타이포 스케일, 폰트 구조를 한눈에 빠르게 파악할 때 좋습니다.3. Superposition웹사이트를 디자인 토큰과 시스템 관점으로 해석하고, 나중에 Figma Variables나 코드 구조로 연결할 때 좋습니다.1. CSS Peeper.. 2026. 3. 17. Chrome DevTools(Inspector)로 분석하면서 Figma로 클론 디자인하기 1. Inspector에서 반드시 봐야 하는 5가지 핵심 정보많은 디자이너들이 Inspector를 열어도 font-size나 color만 보고 끝나는 경우가 많습니다.하지만 실제 UI를 이해하려면 아래 5가지를 반드시 봐야 합니다.① Layout 구조 (가장 중요)DevTools → Elements확인할 것container widthpaddingmarginflex / gridgap예시.container { max-width: 1200px; margin: 0 auto; padding: 0 24px;}이것을 Figma에서는Frame width: 1200Auto layout: horizontalPadding: 24Alignment: center처럼 Auto Layout 구조로 복원해야 합니다.핵심 질문이.. 2026. 3. 17. Talk to Figma MCP Tools 다음 내용은 Talk to Figma MCP 서버가 제공하는 기능 목록입니다. https://github.com/grab/cursor-talk-to-figma-mcp GitHub - grab/cursor-talk-to-figma-mcp: TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowingTalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatical.. 2026. 3. 17. Cursor에서 Figma MCP 채널 연결 및 자동화 방법 1. Cursor에서 Figma 채널 연결하기Cursor 채팅창에서 Figma MCP 서버 채널에 접속해야 합니다.실행 방법Cursor 실행채팅창에 다음 입력join channel [채널명]메시지 표시Joining Figma channel연결 승인 메시지 표시→ 여기서 Join 선택매번 승인 메시지가 뜨는 이유Cursor 기본 설정이 항상 확인하도록 되어 있기 때문해결 방법Use allow list클릭하면다음부터 승인 메시지가 나오지 않습니다2. 연결 성공 확인 방법연결이 성공하면 다음과 같은 메시지가 표시됩니다.Joined channel이 메시지가 나오면 MCP 서버 연결 완료3. AI가 명령을 이해 못할 때 해결 방법가끔 AI가 다음 명령을 일반 채팅으로 오해하는 경우가 있습니다.예join chann.. 2026. 3. 17. Figma MCP Sever연결 MCP(Model Context Protocol) 개념 설명디자이너와 개발자를 위한 이해최근 Cursor, Claude, ChatGPT 같은 AI 코딩 도구에서 자주 등장하는 개념이 MCP(Model Context Protocol) 입니다.MCP는 한 문장으로 말하면 AI가 외부 도구와 대화할 수 있게 만드는 표준 연결 방식입니다.MCP는 AI와 외부 프로그램을 연결하는 통신 규칙(프로토콜)입니다.즉 AI가 다음과 같은 것들과 직접 연결될 수 있게 합니다.FigmaGitHub데이터베이스브라우저로컬 파일개발 서버예를 들어 Cursor에서 이런 일이 가능해집니다.Figma 디자인 읽기GitHub 코드 수정데이터베이스 조회브라우저 상태 확인이 모든 것을 가능하게 하는 연결 규칙이 MCP입니다.MCP가 왜 필요.. 2026. 3. 15. React로 구현하기 좋은 방식으로 Figma를 설계하기 React로 구현하기 좋은 방식으로 Figma를 설계하기.이걸 이해하면 Figma → React 코드 변환 품질이 훨씬 좋아집니다.즉 단순히 예쁜 UI를 만드는 것이 아니라“개발 구조를 고려한 디자인”을 하는 것입니다.먼저 핵심 원칙React 친화적인 Figma 설계의 핵심은 이것입니다.Page→ Section→ Component→ Element즉페이지→ 섹션→ 재사용 컴포넌트→ 작은 UI 요소구조입니다.Figma에서 실제 설계 방법예를 들어 랜딩페이지를 만든다고 가정하겠습니다.Figma 구조를 이렇게 나누는 것이 좋습니다.Landing Page Frame ├ Hero Section ├ Features Section ├ Pricing Section └ Footer Section이 구조는 React에서 그.. 2026. 3. 15. 이전 1 2 3 4 ··· 17 다음
