[Day 47] 디자이너를 위한 HTML

📍목차
1. HTML
2. 실습

---

1. HTML

Hyper Text Markup Laguage

 

📌 하이퍼링크 / 마크업

 

 

📌 코드 구성

🤖 <시작태그(태그명, 속성명=속성값)> text <종료태그>

 

 

📌 문서 기본 구조

크게 head / body 로 구성되어 있다.

 

 

📌 웹 접근성

장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 잇게 하는 방식을 가리킨다.

사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

 

 

📌 태그 

• <h1>~<h6> Heading
  웹페이지의 제목 / 부제목을 표현, 숫자가 작을수록 큰 제목을 표시
• <p> Paragraph
  하나의 문단을 표시
• <hr> Horizontal Rule
  가로 구분선 (종료태그 없음)
• <br> Break
  줄바꿈 (종료태그 없음)
• <i> Italic
  이텔릭체로 표시
• <em> Emphasis
  이텔릭체로 강조
• <b> Bold
  볼드체로 표시
• <strong> 
  텍스트를 진하게 강조
• <style> 
  스타일 관련된 것 정의
• <div> Division
  콘텐츠를 나눔 (행)
• <span>
  인라인 컨테이너로 컨텐츠/데이터를 감싸줌
• <style="display: block;">
  한 줄 전체를 차지하게 하여 위아래 요소 줄바꿈 생성
• <a> Anchor
  하이퍼링크를 걸어주는 태그
  * target="_blank"조건을 써줘야 새로운 창으로 열린다
  * href="#target" 조건을 써주고 타겟에는 id="target"을 적어주면 링크를 누를 때, 타겟으로 화면이 이동/스크롤된다.
• <table> / <tr> / <th> / <td>
  표(테이블)를 만드는 태그 / 테이블의 행을 만드는 태그 / 표의 항목명을 만드는 태그 / 표의 항목(열)을 만드는 태그

---

2. 실습

💡스타일 지정해서 형광펜처럼 강조 (2종류) / 오디오, 비디오 태그 / 하이퍼링크 (새로운 창, 타겟) / 테이블 을 실습했다.

오디오 / 비디오 태그 , 하이퍼링크, 테이블

★ 오디오/비디오 태그에서 controls를 넣어야 HTML파일에서 확인할 수 있다.

 

HTML 파일

 

---

▼ 아카이빙

https://designcourse.com/app/course/ueye/module/how-to-tests-game

How to Take the Tests

 

https://betterwebtype.com/web-typography-quiz/

Web Typography Quiz

 

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

It's Centred That | Test Your Inner Designer Eye

 

△ 디자이너 퀴즈들

---

https://cake-soft-41607224.figma.site/

webpoetry

△ 피그마 수상

---

 https://stock.studio.design/wORYeSvnVXrl9ApdBdj8_

Ethereal Motion Portrait on Studio.Stock

 

https://lordicon.com/

39,100+ animated icons - Lordicon

 

https://www.charco.design/design-resources-tools

Design resources & tools | Charco Design

 

https://www.freepik.com/search?format=search&iconType=standard&last_filter=query&last_value=&query=&type=icon#from_element=subhome_catalog&uuid=4a905e9e-8f8d-45ba-b277-a4d3f0fa46e7

https://www.freepik.com/search?format=search&iconType=standard&last_filter=query&last_value=&query=&type=icon#from_element=subhome_catalog&uuid=4a905e9e-8f8d-45ba-b277-a4d3f0fa46e7

 

https://miksks.com/collections/frontpage?page=2

All Products

△ 레퍼런스

---

https://sleek.design/

Sleek

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

https://tldr.tech/

 

---

과제1.
내용 정리

 

어도비 https://adobe.design/stories/leading-design/creativity-is-human?ref=uxdesignweekly

Creativity is human

nngroup https://www.nngroup.com/articles/good-visual-design/?ref=uxdesignweekly

Good Visual Design, Explained

 

 

 

 

---

과제 2.
Progress 디자인
- 무엇이 진행중인지, 그것이 어떻게 작동하는지 설명
- 남은 영화 시간을 보여주는 진행바, 책을 얼마나 읽었는지 계산하는 기능

 

스터디 진행하면서 만들어봤던 '듀오링고'의 원형 프로그레스바가 다른 일반적인 일자형 프로그래스바 보다 더 인상깊어서 가져왔다.

 

왼: 캡쳐 / 오: 클론

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

 오랜만에 실습을 많이 해서 재밌고, 코드 작성하는 것이 익숙해서 그런지 마음이 편안했던 것 같다. 
과제를 하면서 AI의 등장으로 인간의 창의력이 여전히 필요하다는 것을 알게됐지만,,,,
내가 창의력이 뛰어난 사람보다는 머리를 데굴데굴 굴려가며 갑자기 떠오르는 아이디어를 찾는 노력형 인간이라 생각해서.. 
'단순히 툴만 사용하거나 반복적인 디자인만 하는 사람은 AI에게 자리를 위협받을 수 있다'라는 말이 살벌하게 들렸다...
지금부터라도 다양하게 생각하려는 노력을 해야겟돠,,,,😬