실습을 하면서, 헷갈렸던 부분들을 다시 정리해보았다. 자, 정리한 뒤 박스 모델과 레이아웃 내용에 대해서 정리해보겠다. 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. 블럭 요소 (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..

매일매일 실천하는 비즈니스의 100가지 기본 하루 10분 MBA [글로비스 경영대학원, 시마다 츠요시 저/ 이정은 역 | 비즈니스랩 | 2021-04-12 출간 | 293페이지] 프롤로그 들어가며 Chapter 1 논리적 사고 Chapter 2 문제 해결 Chapter 3 경영 전략 Chapter 4 마케팅 Chapter 5 리더십 Chapter 6 조직 Chapter 7 정량 분석 Chapter 8 회계 Chapter 9 재무 Chapter 10 신사업 개발 Chapter 11 소통 이 책은 전체 11장으로 각 장마다 관련 기본 지식들을 소개하며, 총 100가지의 기본을 설명하고 있다. 기본. 요즘처럼 빠르게 변화하는 시대일수록 기본을 제대로 배우고 자신의 가치를 높여야한다. 그렇다고 MBA의 기본을 ..

SOPT OB로써 다시 SOPT를 하게 된다면 꼭 운영팀을 해보고 싶다는 마음이 있었다. 21살 YB때 바라봤던 운영팀은 정말 멋졌었기 때문. 운영팀의 간략한 소개를 하면 다음과 같다. (운영팀 공식 소개글 참고) 🍡솝트 내부를 위해 힘쓰는 팀 🍡솝트원들이 서로 융화될 수 있게 네트워킹을 도와준다. (네트워킹의 장을 열어주는 역할) 🍡솝트 활동을 더 재미있게 할 수 있도록 추억을 선사하는 팀. 다양한 행사를 개최함. SOPT는 OB 선발 일정이 YB 선발보다 앞서있기 때문에, 운영팀 OB들이 먼저 모집되었다. 기획, 개발, 디자인 파트 :) 운영팀 YB 모집 성공을 위해 운영팀 브랜딩이 필요했다. 디자인 파트는 본인뿐이였기 때문에 자연스럽게 맡아 진행하게 되었다. 최종 로고 완성까지는 10일 정도 기한이..

대학생 연합 IT 벤쳐 창업동아리 SOPT에서 시행하는 솝커톤은 기수 후반기에 진행되는 자체 해커톤인 앱/웹잼을 시작하기 전, 본인의 실력을 검증하고 기획, 디자인, 개발 파트 등 다양한 파트와의 협업을 경험해볼 수 있습니다. 대학생의 시각으로 문제를 새롭게 해석하고 다채로운 서비스, 그리고 시류에 딱 맞는 서비스를 만드는 도전을 통해 개인과 팀 그리고 조직 전체의 성장을 목표로 합니다. 솝커톤! 나는 오프라인으로 참여했다. 배정된 서비스 형태는 웹이었음. 솝트에서 예전 앱잼을 했을 때 앱/ 웹을 같이 했었기 때문에 경험은 있었지만 너무 오래됐다. (근데 지금 생각해보니 19년도에 일할 때 웹사이트 UX를 담당하긴 했었네) 그래서 하고 싶은 말은 걱정이 무지, 많이 됐다는 것! 잘할 수 있을까 보단, 내..

감정이 중요해진 순간, 쾌쾌한 감정들이 남는 무언의 행동들과 거리를 두기 시작했다. 질투도 그에 포함된다. 질투함으로써 성장했던 것은 고등학생 때가 마지막이다. 질투란 감정이 어떤 이에겐 하나의 자극제일 수도 있다. 물론 고등학생 때의 나도 그랬다. 하지만 우습게도, 지금은 그렇지 않다. 썩 느낌이 좋지 않은 감정일 뿐이다. 진부하게 기억을 가지고 질투를 논하고 싶지 않다. 그렇기에 내가 왜 질투란 감정을 싫어하게 됐는지 써보려 한다. 어느 순간부터 나는 감정의 여운이 오래 남는다는 걸 느꼈다. 감정에 대해 깊은 생각을 해보지 않았을 때는 밀려오는 감정들을 물 흐르듯 가볍게 넘길 수 있었다. 시간이 지난 후, 나라는 존재를 어느 정도 파악했을 때는 밀려오던 감정들이 깊게 내리 박혔다. 단 하나도 서투르게..