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

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

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

1. 블럭 요소 (Block Element)블럭 요소는 웹 페이지에서 새로운 줄을 차지하며, 전체 가로 폭을 사용하여 레이아웃을 형성합니다.특징항상 새로운 줄에서 시작합니다. 즉, 다음 요소가 아래로 내려가고 줄 바꿈이 생깁니다.가로폭을 부모 요소의 100% 차지하므로, 화면 너비만큼 넓어집니다.width, height, margin, padding 속성을 모두 사용할 수 있습니다.대표적인 블럭 요소, ~ , , , , , , , 예시블럭 요소 1블럭 요소 2위 코드에서 는 블럭 요소로, 두 번째 는 첫 번째 요소 아래에 배치됩니다. 2. 인라인 요소 (Inline Element)인라인 요소는 새로운 줄을 만들지 않고, 내용물만큼의 가로 공간만 차지합니다.특징새로운 줄을 만들지 않고 같은 줄에 다른 인..