Archive

https://youtu.be/2mIQTxRyn-0 아래는 freecodecamp에서 CSS 속성값에 대한 설명에 나오는 em과 rem The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution. Relat..

https://brunch.co.kr/@hijinnyjinny/19디자이너의 UX writingUX writing을 시작하는 3가지 원칙 | 디자이너가 UX writing을 잘하는 것은 중요하다. 아이콘이나 버튼 등의 시각적인 요소를 사용하여 화면을 그리는 것만큼이나 사용성을 높이는 데 큰 영향을 끼치��brunch.co.kr

youtu.be/8-uJ_4136uI원래 기존에 디자인에 대해서만 공부했을 때, 디자인을 어떤 디바이스에 맞춰서 해야 하느냐는 질문을 했었고그때 찾았던 답은 각각 기기별로 해야 한다는 것이었다.그렇다면 코딩을 하는 개발자 입장에서는 이걸 어떻게 구현하는지 궁금해져서 찾아본 것! 깃허브 예시로 컨테이너 사이즈가 달라짐에 따라 글자와 컨텐츠 레이아웃이 달라짐.(예시) 예전에는 유동적인 레이아웃 구현을 위해 (fluid layout).left {float: left;width: 50%}.right {float: right;width: 50%} 요즘에는 박스를 만들 때 고정된 px 픽셀 단위를 사용하지 않고!flex gridflex box%vwvh 를 이용해 사이즈를 구성하게 된다. (vw, vh가 뭐야? 하는..

material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 늘 여기를 보라고 ^^ 수십번도 더 이야기를 들었으나 영어라서 보기 싫다는 이유만으로 계쏙- 미뤄왔던 읽기. 머테리얼 측정 머테리얼 디자인 레이아웃은 시각적으로 균형을 이룬다. 대부분의 측정은 8배수 그리드에 맞춰 정렬된다, 전체적인 레이아웃과 간격 모두! 더 작은 컴포넌트 (아이콘과 타입같은) 은 4배수 그리드에 맞춰 정렬될 수 있다. 반응형..

어떤 식으로 디자인 시스템을 잡았는지 볼 수 있어서 좋다! zbrunch.co.kr/@milliedesign/5millie Design Library밀리의 서재 디자인 시스템 | 밀리 디자인 라이브러리 (a.k.a. 밀디라) 밀리 디자인 라이브러리는 개발자와 디자이너뿐만 아니라 디자이너 사이의 협업을 수월하게 해 주며, 시각 및 경험 자산의 �brunch.co.krwww.figma.com/file/SRvwU2CSrqLjV7y1huHh2P/millie-Design-Library_v1?node-id=0%3A1FigmaCreated with Figmawww.figma.com Material Guide의 8 Grid System을 유연하게 따른다고 되어있다. 그리드 시스템이 궁금하다면 아래 참고 👇 구글 머테리..

처음 배운 툴(코드 에디터)는 아톰Atom이었다.생활코딩 특강에 참여해서 깔아서 몇번 써봤었는데 디자인이 예뻐서 좋아했었다. 그리고 지금, 다시 에디터를 깔려고 찾아보다 결국 VS code를 설치하게 된 배경을 설명하다 길어진 글 어떤 툴을 쓸지 망설여질 땐 일단 어떤 선생님을 스승으로 둘 것인지 선택하는 과정이 중요하다. 일단 난, 지금 당장 프론트엔드 개발자가 되고 싶은 목표로 코딩을 공부하는 게 아니고, 뭔가를 배우길 좋아하는 나를 위해 html과 css까지만 이해하자는 목표로 공부 중. 그래서 내 스승님(!)들이 사용하는 게 VS code라서 이걸 설치하게 되었고, 그 덕분에 유용한 extension 정보도 많이 알게 됨! youtu.be/QtcNrB1_-yQ ANZI님 같은 경우에 이 시리즈에서..

https://youtu.be/i0FN-OwJ7QI html에 어떤 태그가 있는지 분류되어 있고 attribute와 예제, 미리보기까지 제공함. 태그별 브라우저 호환 표 / 이제는 미지원 태그도 나옴 내가 쓴 태그가 이상해도 브라우저는 눈치껏 컨텐츠를 보여주기때문에 유효성을 검사하고 싶다면 위에 페이지에서 유효성 검사를 하면 된다!

https://youtu.be/Bd35Ze7-dIw 와 이 설명이 제일 git똥차서(!) 가져왔다. 깃git은 소프트웨어 (카메라) 깃허브는 유튜브! 자 그래서 어떻게 사용하냐고? https://youtu.be/FXDjmsiv8fI 내가 이분 천명 단위일때 신기하다...고 생각했는데 (사실 안면이 있다.. 나만 일방적으로 아는 인맥..) 지금 만명 단위의 구독자를 거느리신데 진짜 이유가 있구나 하고 감탄. 일단 준비물 3가지를 깔아야 함 1. 깃 2. VS code 3. source tree

https://urbanlist.kr/Urbanlist#도시 #맵핑 #시각화 #문제해결 #데이터를 이용한 더 나은 도시 생활을 꿈꿉니다.urbanlist.kr 도시에 쌓인 방대한 데이터로 문제를 시각적으로 정의하고 해결 더 나은 도시 생활을 위해 - 일하는 사람(들)인가보다. 우연히 https://urbanlist.kr/content/enneargram에니어그램 검사에니어그램 검사를 시작👈urbanlist.kr애니어그램 테스트라는 걸 했는데 요즘 웹에 어떤 컨텐츠를 넣을지 관심이 많아서 유심히 보게 되었다. 아래는 결과 링크 https://urbanlist.kr/content/enneargram/result?data=NtsJUscjKkkqRMNjhrZliRltcNkKiphtSKlkpJkhJkMNLlSkM..

일단 오늘 배운 결과물부터 자랑- 오늘 친구와 통화를 하고! 갑자기 삘 받아서 시작한 클론 코딩 따라하기..는 제대로 코딩 배워본 적 없기 때문에 ^^ 조코딩님 영상을 보고 따라서 만들었다.구름 ide에서 사용중인데 진짜 설치를 안해도 된다는 점이 너무나도 맘에 듭니다. ooj-html-css-xvfdc.run.goorm.io/ooj_html_css/index.html Yoogle ooj-html-css-xvfdc.run.goorm.io위 링크를 얼마나 유지할지 알 수 없으므로 동영상으로 남겨두었다. 뿌듯.. 구글 짝퉁 유글!진짜 원래 생활코딩에서 어어어엄청 기초만 배워서 html만 조금 이해했었는데거기서 뭐 엄청 많이 변한 것 아니지만..! 사실 하면서 하나하나 이해가 안 되어서 따지고 싶은(?) 부분..