실습을 하면서, 헷갈렸던 부분들을 다시 정리해보았다. 자, 정리한 뒤 박스 모델과 레이아웃 내용에 대해서 정리해보겠다. CSS에서 block, inline, inline-block의 차이점CSS에서는 요소가 화면에서 어떻게 배치되는지를 display 속성으로 정하는데, 그중에서도 block, inline, inline-block은 가장 기본적인 세 가지 방식이다. 각각의 배치 방식이 다르고, 웹 페이지를 레이아웃할 때 중요한 역할을 한다. 1. Block 요소 • 특징: block 요소는 화면에서 한 줄 전체를 차지하는 성질을 가진다. 한 줄에 여러 개의 block 요소가 나란히 배치되지 않고, 하나의 block 요소가 끝나면 그 다음 요소는 아래쪽에 배치된다. • 대표적인 예: div, h1, p, h..

2년차 디자이너로서 개발 지식은 알게 모르게 나를 주눅 들게 만드는 부분이었다. 좋은 기회로 부트캠프에서 프론트엔드 개발을 배우면서, 이 과정을 기록으로 남겨야겠다고 다짐했다.개인 웹사이트를 제작해본 경험은 있지만, 지금은 아주 초보적인 단계에서부터 하나씩 기록해 나가고 있다. 프로덕트 디자이너라면 개발자, 기획자와의 유연한 소통이 필수적이기 때문에, 이러한 과정을 통해 나의 이해도를 점차 높여가고 싶다.각 주제별로 순차적으로 글을 작성하고 있으니, 더 궁금한 부분이 있다면 아래 목록에서 클릭해 확인해 보길 바란다! 😽⇊⇊⇊프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상..

캘린더 뷰, 회원가입 기능 클론 코딩중이다.그러므로 오늘은 프로덕트 디자이너로 서비스 제작에 참여했을 때 알면 좋을만한 것들을 정리해보겠다.프론트엔드 공부를 시작하면서 무작정 네이밍 규칙을 이해하지 못한 채 따라하려 했던 지난 날들이 아까웠다. 🥲내 목표는 개발 상식을 익혀서 협업에서 좋은 역량을 펼치는 것이므로, 하나씩 블로그에 정리하고 있다.나와 같은 사람들이 있다면, 이 글이 도움이 될 것이다. 🤗 Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법Figma는 디자인과 개발 간 협업을 쉽게 만들어 주는 강력한 도구다. 특히 컴포넌트와 디자인 시스템을 일관되게 관리할 수 있어서 디자인 의도를 명확히 전달할 수 있다. 하지만 효과적인 협업을 위해 Figma를 사용하는 방법과 몇 가지 중요한..

1. HTML 문서의 기본 구조HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 만드는 언어다. HTML의 기본 구조는 선언문으로 시작하며, HTML5 문서임을 나타낸다. 그 다음, , , 태그가 차례로 등장한다.: HTML 문서의 최상위 태그로, 문서의 언어를 설정하는 lang 속성을 포함한다.: 메타데이터와 제목을 포함하며, 태그에 페이지 제목을 적으면 브라우저 탭에 표시된다.: 페이지의 모든 콘텐츠가 들어가는 곳으로, 제목, 문단, 이미지, 링크 등 모든 요소가 태그 안에 포함된다.2. 텍스트와 목록 작성하기텍스트 요소를 작성할 때는 제목은 , 등의 태그를 사용하고, 일반 문단은 태그를 사용한다. 목록을 만들 때는 순서가 없는 목록과 순서가 있는 목록을 구분해..

1. HTML의 기본 개념HTML은 HyperText Markup Language의 약자로, 웹 페이지의 기본 구조를 구성하는 언어입니다. HTML은 마크업 언어로서, 브라우저에게 각 요소의 역할을 지시하는 태그(tag)로 이루어져 있습니다.태그(Tag): HTML은 내용과 같은 형태로 요소를 정의합니다. 예를 들어 안녕하세요는 태그 안에 "안녕하세요"라는 텍스트를 담은 단락 요소입니다.요소(Element): HTML의 기본 구성 요소로, 태그를 통해 문서 내의 각 부분을 정의합니다. 각 요소는 열림 태그와 닫힘 태그로 감싸져 있습니다.2. HTML 문서의 기본 구조HTML 문서는 다음과 같은 구조로 이루어져 있습니다. Hello, World! This is my first HTML page..