📚 오늘의 멜 로빈스 — “직관은 인생의 네비게이션이다”
인생에서 네 직관을 따라가도 된다.
직관은 네비게이션처럼 방향을 안내한다 ‼️‼️‼️
나를 믿고 추진하는 것...!
요즘 디자인 공부를 하면서 이래저래 AI에 대해 다양한 의견이 많아서
갈팡질팡할 때가 많은데, 이 메시지가 나에게 도움을 주었다 👍
HTML 태그 심화
Definition List
HTML에는 정보를 구조적으로 정리하기 위한 여러 태그들이 있는데,
오늘은 "용어 사전"(Glossary) 스타일의 Definition List를 공부했다.
➡️ Definition List 태그들
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
| 태그 | 의미 | 설명 |
|---|---|---|
| <dl> | Definition List | 용어와 설명을 묶어 표현하는 목록 |
| <dt> | Definition Term | 정의할 ‘용어’ |
| <dd> | Definition Description | 용어에 대한 설명 제공 |
사용예시)
<dl>
<dt>HTML</dt>
<dd>웹페이지 구조를 만드는 마크업 언어</dd>
<dt>CSS</dt>
<dd>HTML 요소를 꾸미는 스타일 언어</dd>
</dl>
<input> 태그
: 폼에서 데이터를 입력받을 때 사용하는 <input> 태그
종류가 아주 많고 역할도 다르기 때문에 type을 알아두는 것이 좋다.
| 타입 | 설명 | 예시 태그 |
|---|---|---|
| text | 일반 텍스트 입력 | <input type="text"> |
| password | 비밀번호처럼 입력값을 ●●● 로 표시 | <input type="password"> |
| 이메일 형식 검증 | <input type="email"> | |
| number | 숫자만 입력 가능 | <input type="number"> |
| checkbox | 옵션 다중 선택 | <input type="checkbox"> |
| radio | 옵션 단일 선택 | <input type="radio"> |
| date | 달력 날짜 선택 | <input type="date"> |
| file | 파일 업로드 | <input type="file"> |
| range | 슬라이더로 범위 선택 | <input type="range"> |
| submit | 폼 제출 버튼 | <input type="submit"> |
| button | 일반 버튼 | <input type="button"> |
Semantic 태그란?
: 의미를 가지는 태그
예) <header>, <main>,<section>, <nav>, <footer> …
📎 중요한 이유
- 웹 접근성 상승 (지난 시간 배운, 웹은 모두가 불편 없이 웹을 사용할 수 있도록 설계되어야 하는 것)
- 코드 가독성 향상
- SEO(검색엔진 최적화)에 유리
- 스크린리더가 페이지 구조를 명확하게 이해
반대로 <div> 와 <span> 같은 태그는 Non-semantic
➡️ 단지 "묶기 위한 태그"이다.
display 속성
| 구분 | 특징 | 대표 태그 / 예시 |
|---|---|---|
| 인라인 요소 (inline) | - 줄바꿈 없음 - 콘텐츠 크기만큼 너비 차지 - width, height 적용 어려움 - 텍스트 흐름 안에서 배치됨 | <span>, <a>, <em>, <strong> <img>, <input>, <label> |
| 블록 요소 (block) | - 자동 줄바꿈 발생 - 한 줄 전체(100% width)를 차지 - width/height 자유롭게 적용 가능 - 레이아웃 구성의 기본 단위 | <div>, <p>, <h1>~<h6> <section>, <article>, <header> <footer>, <ul>, <li>, <table> |
| 인라인-블록 요소 (inline-block) | - 줄바꿈 없음 (인라인처럼 배치) - width/height 적용 가능 (블록 특징) - 버튼, 카드형 UI 구축 시 자주 사용 | display: inline-block; 대표적으로 CSS로 지정해 사용 |
| display: none | - 완전히 사라짐 - 공간도 차지하지 않음 - 토글, 모달, 드롭다운 등에 활용 | CSS: display: none; |
| display: flex | - 1차원 레이아웃 - 가로/세로 정렬 쉬움 - gap 적용 가능 - 반응형 UI 기본 형태 | CSS: display: flex; justify-content / align-items |
| display: grid | - 2차원 레이아웃 - 행/열 배치 모두 가능 - 복잡한 레이아웃에 최적 | CSS: display: grid; grid-template-columns 등 |
실습과 함께 이론 공부들을 하고, 오프더레코드로 사용해봤음 하는 UI/UX 어플들을 추천해주셨다!
핀터레스트에서 레퍼런스를 보는것도 좋지만, 실제 앱들의 플로우도 경험해보라고 하셨다!
🧘♀️ Headspace
: 감성, 색감, 인터랙션이 훌륭한 명상 앱
🗣️ 모지모지
: AI 활용한 언어 학습 경험이 독특함
🌙 Calm
: 명상 앱의 정석 디자인, 레이아웃과 동선이 정말 부드러움
과제
오늘 과제는 Boarding pass UI Design 이었다 !ㅅ!
과제목표:
출발지, 도착지, 탑승구, 좌석 번호, 항공사 등을 고려해보세요. 탑승권 여정이 경유가 있는 여행인지, 왕복인지, 편도인지도 확인해보세요.
=탑승권은 종종 신용카드 혜택, 마일리지 프로그램, 현지 호텔·리조트 제휴 상품 같은 추가 정보를 홍보하는 용도로도 사용되곤 합니다. (배너도 들어가는 경우있음)
지난 번에 항공 예약 UI 디자인이 있어서, 추가해보았다!
습작을 정리 중인데 무드를 통일하면 좋겠다 싶어서 ㅎ_ㅎ
1️⃣ 레퍼런스 수집
2️⃣ 필요한 정보 정리
: 티켓번호 / 여행 어플일 시 - 항공사 필요.
출발지 / 도착지
게이트, 클래스, 시트번호, (터미널), 날짜, 출발시각, 도착시각, 예약자명
예약 바코드(QR코드)
3️⃣ 항공 티켓 UI 제작
4️⃣ 화면 디자인 + 프로토타입
이렇게 화면 안에 넣어주었다.
비행기 안에서 비행기의 노선을 구경한다는 사람들의 경험을 많이 들었어서,
출발지에서 도착지로 이동하는 비행기 UI를 통해 얼마나 비행하고 있는지 표현해보았다!
회고
웹 접근성을 위해 시멘틱 태그를 사용한다는 점! 을 배웠다.
사실 이전에 공부할 때는 header 태그에 별다른 기능이 없는데 왜 이름이 다르지!! 했었는데
이제 완전히 이유를 이해하고 잘 사용할 수 있을 것 같다 ㅎ_ㅎ
또 같은 화면일지라도 쓴 사람에 따라 코드가 다 다른게 재미있다
그래서 html/css 를 다양한 곳에서 배우는게 너무 즐거운 것 같다
나에게 맞는 방법을 하나씩 찾아가는 재미 ‼️
매일 하나씩 습작 UI도 레퍼를 찾아볼 수 있고, 하나씩 해볼 수 있어서 뿌듯하다
조금씩일지라도 꾸준하게 나아가고 있는 것 같아서//
다시금 이짤을 사용해보자구
#꾸준하게 나아가고 있을거야, 네 직관을 믿어.
