(DAY47) HTML 실습하기

 

안녕하세요 :)

오늘은 멘토님이 다양한 자료를 추천해주셨는데 재밌는 사이트가 많더라구요 다양한 것들을 찾아보는 자세가 중요하다는 것을 배웠습니다.

 

---

 

 

 

 

✏️오늘의 학습

HTML 기초 학습하기

Progress Bar UI 그려보기

 

 

 

 

📖오늘의 핵심

트렌드를 많이 찾아 보는 것이 중요하다.

레퍼런스 수집 잘하기

 

 

 

🧠오늘의 마인드셋

Trust your gut 너의 직감을 믿어라.

 

 

 

📝수업 내용 메모장 👇🏻

📝수업 내용 메모장

 

교육용 게임 사이트 소개
1) Design Course 
https://designcourse.com/app/course/ueye/module/how-to-tests-game

2) Better web type 
https://betterwebtype.com/web-typography-quiz/

 

3) 
https://avark.agency/designers-eye/

 

---

다양한 자료 아카이빙
피그마 해커톤 우승작
https://cake-soft-41607224.figma.site/

AI로 만든 이미지 모음 사이트
(AI이미지 치고 퀄리티가 좋아서 소개함)
https://stock.studio.design/

움직이는 아이콘 사이트
https://lordicon.com/

무료 소스 다운로드 사이트
https://www.charco.design/

게임 관련 그래픽 사이트
(중세 느낌)
https://miksks.com/

앱에 특화된 ai제작 사이트
(AI 터치가 덜 느껴지는 결과물임)
https://sleek.design/

It's Centred That | Test Your Inner Designer Eye

 

 

 

IT 트렌드 기사 사이트

멘토님은 여기서 많이 본다고 함

https://tldr.tech/newsletters

 

 

무디 앱 : 요즘 떠오르고 있는 온보딩 잘 되어있는 감정 기록 앱

 

---

 

HTML 

Hyper Text Markup Language

 

로티 파일 : 움직이는 아이콘같은 것 파일 확장자

 

 

 

 

 

 

실습 1) vscode로 HTML 실습해보기

 

오디오 태그, 비디오 태그 사용해보기

 

 

테이블 태그, 테이블 스타일 태그 연습해보기

 

 

 

 

/* (내용) */ : 스타일에 쓰는 주석 처리

 

(예시 ↓)

 

 

 

 

 

실습 2) Progress Bar UI 그려보기

 

요즘 '찰리와 걷기' 앱 많이 쓰는데 딱 떠올라서 가져왔습니당

찰리와 걷기는 걸음수 측정해서 많이 걸을수록 찰리가 날씬해지는 앱이에요!

실시간 걸음수마다 상단에 있는 프로그레스 바가 차곡차곡 채워지는 것을 볼 수 있어요

 

 

💡 내 찰리는 날씬해져 본 적이 없어서 프로그레스바가 꽉 찬 모습을 보지 못해서..ㅋㅋㅋㅋㅋㅋ 상상하면서 그려봤습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 언젠가 직접 확인할 수 있는 날을 기다리며...