티스토리에는 이론, 실습 위주의 글을 올립니다. 🤧프로덕트 디자이너는 기획자, 개발자와 협업이 필수적이다. 아래 리스트를 참고하여 위풍당당한 프로덕트 디자이너가 되보자!프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기프로덕트 디자이너가 알아두면 좋을 개발 상식 06. CSS : 박스모델프로덕트 디자이너가 알아두..

실습을 하면서, 헷갈렸던 부분들을 다시 정리해보았다. 자, 정리한 뒤 박스 모델과 레이아웃 내용에 대해서 정리해보겠다. 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 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상..

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

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

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