[Day 48] HTML 태그

📍목차
1. Tag / Elements
2. Semantic style / none-semantic style
3. Form 태그

---

1. Tag / Elements

📌 목록 태그

• <ol> Ordered List
  순서가 있는 목록을 표현할 때 사용한다. type 속성으로 글머리 기호를 변경할 수 있다. 
• <ul> Unordered Lists
  순서가 없는 목록을 표현할 때 사용한다.
• <li> Listed Item
  목록하위 항목으로 사용되며, <ul> 태그 또는 <ol> 태그의 하위에 위치
• <dl> Definition List
  사전처럼 용어를 설명하는 목록
  ex. A는 B이다. 와 같은 Key=Value로 사용
• <dt> Definition Term
  정의되는 용어의 제목을 넣을 때 사용
• <dd> Definition Description
  용어를 설명하는 데 사용

★ 주의사항

 <dl> 태그는 하나 이상의 <dt>-<dd>쌍의 태그를 갖고 있어야 한다.

단, <dt>-<dd> 태그가 반드시 하나의 짝으로 지어져야 하는 것은 아니다.

2. <il>, <dt>, <dd> 태그는 밖에서 독립적으로 사용할 수 없다.

3. <ul> 태그 하위요소로는 <il> 태그가 위치해야 한다.

---

📌 Semantic 태그

• <header>: 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치
• <nav>: 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현
• <aside>: 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용
• <main>: 문서의 body요소의 주 콘텐츠를 정의할 때 사용
• <section>: 문서나 응용프로그램의 일반적인 섹션 표현
• <article>: 아티클은 여러가지 아이템들을 묶어 재사용 가능하게 그룹화
• <footer>: 주로 저작권 정보나 서비스 제공자 정보등을 나타내며 사이트 하단에 위치
• <details>: 추가적인 정보를 나타내거나 사용자가 요청하는 정보
• <summary>: 부모요소인 details 요소의 내용에 대한 요약이나 캡션
• <figcaption>: 부모요소인 figure 요소의 내용들에 대한 캡션, 혹은 제목
• <figure>: 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도
• <mark>: 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현
• <time>: 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜

semantic elements

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Semantics - Glossary | MDN

 

---

2. Semantic / none-semantic style

★ semantic 태그 이점

• 검색 엔진 최적화
• 웹 접근성 향상
• 가독성 향상

 

왼: semantic style / 오: none-semantic style

 

코드 차이점

 

왼: semantic / 오: none-semantic

 

div에 class 조건을 달아서 스타일을 각각 다르게 적용할 수 잇도록 한다. 
(class 조건 없으면 전체가 같은 스타일로 적용된다.)

---

3. Form 태그

• type: input 형식/종류
• id: 고유값

 

태그 형식

왼: form 태그 형식 1 / 오: fom 태그 형식 2

 

form 태그 html 결과

---

과제.
Boarding pass UI Design

출발지, 도착지, 탑승구, 좌석 번호, 항공사 등을 고려해보세요.
탑승권 여정이 경유가 있는 여행인지, 왕복인지, 편도인지도 확인해보세요.
탑승권은 종종 신용카드 혜택, 마일리지 프로그램, 현지 호텔·리조트 제휴 상품 같은 추가 정보를 홍보하는 용도로도 사용되곤 합니다.
(배너도 들어가는 경우있음)

 

아시아나 항공 어플의 UI를 레퍼런스로 제작

 

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

 

https://www.behance.net/galleries/ui-ux

UI/UX :: 모든 범주 :: Behance

포트폴리오 레퍼런스 참고 사이트

🤪 오랜만에  코드와 비슷한 html을 보니까 도파민 뿜뿜!!!!
학교에서 할 때는 그렇게 재미없더니.. 오랜만이라 그런지 figma로 UI 제작할 때, 이후로 2일 전부터 너무 재밌당..