DAY+48 [목록 태그, 시멘틱 태그, 폼 태그]

안녕하세요, 주-주스 입니다! 🍹

 

 

(๑•👅•๑)

!!!³✺!~ 캠프 48일차  ~!✺!!!

(๑>؂•̀๑) ꫂ ၴႅၴ

오늘은
HTML 의 기본 문법과 주요 요소에 대해서 알아보고, VS 코드에서 실습2에 에 대하여 포스팅하겠습니다!

 

---

 

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

Semantics - Glossary | MDN

 

---

1. 📋 목록 태그 (List Tags)

목록 태그는 웹 문서에서 순서가 있거나 없는 항목의 집합을 구조적으로 나타낼 때 사용됩니다.

• <ul> (Unordered List, 순서 없는 목록):
  • 용도: 항목의 순서가 중요하지 않을 때 사용합니다. (예: 메뉴 항목, 장바구니 목록, 단순히 나열된 정보)
  • 특징: 기본적으로 항목 앞에 불릿(•) 기호가 붙습니다.
• <ol> (Ordered List, 순서 있는 목록):
  • 용도: 항목의 순서가 중요할 때 사용합니다. (예: 레시피 순서, 순위, 단계별 안내)
  • 특징: 기본적으로 항목 앞에 숫자가 붙습니다. type 속성을 이용해 로마 숫자나 알파벳 등으로 변경할 수 있습니다.
• <li> (List Item, 목록 항목):
  • 용도: <ul> 또는 <ol> 태그 안에 들어가는 개별 항목을 정의합니다.
• <dl>, <dt>, <dd> (Description List, 정의 목록):
  • 용도: 용어와 그에 대한 정의를 짝지어 나타낼 때 사용합니다. (예: 사전, FAQ)
  • <dt> (정의될 용어), <dd> (용어에 대한 설명)

---

2. 🏷️ 시맨틱 태그 (Semantic Tags)

시맨틱 태그는 이름만 들어도 태그가 담고 있는 내용의 의미를 명확히 알 수 있도록 구조화된 태그입니다. 단순히 화면에 요소를 배치하는 역할(<div>, <span>)을 넘어, 문서의 구조와 의미를 전달합니다.

• 용도:
  • 검색 엔진 최적화 (SEO): 검색 로봇이 문서의 중요한 부분을 쉽게 파악하여 검색 결과에 더 잘 노출되도록 돕습니다.
  • 접근성: 시각 장애인 등을 위한 스크린 리더가 문서의 구조를 정확하게 해석하도록 돕습니다.
  • 유지보수: 개발자가 코드를 읽고 이해하기 쉬워져 협업과 유지보수가 용이해집니다.
• 주요 시맨틱 태그:
  • <header>: 페이지나 섹션의 소개/머리글 영역 (로고, 제목, 검색 폼 등).
  • <nav>: 탐색 링크를 포함하는 영역 (주요 메뉴, 네비게이션).
  • <main>: 문서의 주요 콘텐츠 영역. 페이지당 하나만 사용해야 하며, 콘텐츠의 중심 내용이 들어갑니다.
  • <article>: 독립적으로 존재해도 의미를 갖는 콘텐츠 영역 (뉴스 기사, 블로그 포스트, 댓글 등).
  • <section>: 주제별로 연관된 내용을 묶는 영역 (자주 사용되는 섹션, 장(chapter) 등).
  • <aside>: 문서의 주요 내용과 간접적으로 연관된 내용 (사이드바, 광고, 관련 링크 등).
  • <footer>: 페이지나 섹션의 바닥글 영역 (저작권 정보, 연락처, 사이트맵 등).

---

3. ✍️ 폼 태그 (Form Tags)

폼 태그는 사용자로부터 데이터를 입력받아 서버로 전송하기 위해 사용되는 요소들의 집합입니다.

• <form>:
  • 용도: 사용자의 입력 데이터를 감싸고, 이 데이터를 어떤 방식으로, 어디로 보낼지 정의하는 컨테이너 태그입니다.
  • 주요 속성: action (데이터를 보낼 서버 주소), method (데이터 전송 방식: GET 또는 POST).
• <input>:
  • 용도: 사용자의 단일 입력을 받는 가장 기본적인 태그입니다.
  • 주요 속성: type 속성에 따라 다양한 종류의 입력 필드가 됩니다.
    • text: 일반 텍스트 입력
    • password: 비밀번호 입력 (문자가 가려짐)
    • radio: 라디오 버튼 (여러 옵션 중 하나만 선택)
    • checkbox: 체크박스 (여러 옵션 복수 선택 가능)
    • submit: 폼 데이터를 전송하는 버튼
    • file: 파일 선택
• <textarea>:
  • 용도: 여러 줄의 장문 텍스트를 입력받을 때 사용합니다.
• <button>:
  • 용도: 클릭 가능한 버튼을 만들 때 사용합니다. type="submit"일 경우 폼 데이터를 전송합니다.
• <select>, <option>:
  • 용도: 드롭다운 메뉴를 만들어 여러 옵션 중 하나를 선택하게 할 때 사용합니다.
• <label>:
  • 용도: 입력 요소(input, textarea 등)에 이름표를 붙여줍니다. 접근성을 높이고, 레이블을 클릭해도 해당 입력 요소가 활성화되도록 합니다. (for 속성으로 input의 id와 연결)

---

구분	목록 태그	시멘틱 태그	폼 태그
주요 목적	항목의 구조적 나열	웹 문서의 의미 및 구조 명시	사용자 입력 및 데이터 전송
핵심 역할	내용의 논리적 순서/배열 표현	검색 엔진 및 접근성 향상, 가독성 확보	사용자와의 상호작용 (Input/Output)
주요 태그	<ul>, <ol>, <li>, <dl>, <dt>, <dd>	<header>, <nav>, <main>, <article>, <section>, <footer>	<form>, <input>, <textarea>, <button>, <select>, <label>
디자이너 관련	내비게이션, 콘텐츠 목록 디자인 및 CSS 스타일링	웹 페이지 레이아웃 구조 설계 및 템플릿 정의	버튼, 입력 필드, 드롭다운 등 UI 컴포넌트 디자인
대체 태그	거의 없음 (의미를 대체하기 어려움)	<div> (시맨틱 역할 없이 묶을 때)	<div> + JavaScript (단, 표준 form 기능 대체 불가)

---

 

오늘의 실습 !
⭐️[과제 01]

Boarding pass UI Design

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

---

⭐️[과제 02]

HTML 태그 복습~❣

선택자 (Selector)	속성 (Property)	값 (Value)	설명 (Style Definition)
* (전체)	text-align	center	모든 요소 내의 텍스트를 가운데 정렬합니다.
header	border	2px solid red	요소 주변에 빨간색 2픽셀짜리 실선 테두리를 설정합니다.
	line-height	55px	텍스트의 줄 간격을 55픽셀로 설정하여, 높이(height)와 같으므로 텍스트를 수직으로 가운데 정렬합니다.
	height	55px	요소의 높이를 55픽셀로 고정합니다.
nav	border	2px solid blue	요소 주변에 파란색 2픽셀짜리 실선 테두리를 설정합니다.
	height	110px	요소의 높이를 110픽셀로 고정합니다.
.main (클래스)	border	2px solid green	요소 주변에 녹색 2픽셀짜리 실선 테두리를 설정합니다.
	height	300px	요소의 높이를 300픽셀로 고정합니다.
	line-height	300px	텍스트의 줄 간격을 300픽셀로 설정하여, 텍스트를 수직으로 가운데 정렬합니다.
footer	border	2px solid black	요소 주변에 검은색 2픽셀짜리 실선 테두리를 설정합니다.
	height	55px	요소의 높이를 55픽셀로 고정합니다.
	line-height	55px	텍스트의 줄 간격을 55픽셀로 설정하여, 텍스트를 수직으로 가운데 정렬합니다.
ul	list-style	none	목록(<ul>) 앞의 기본 불릿 기호 (점이나 숫자)를 제거합니다.
	padding-left	0px	목록의 왼쪽에 있는 기본 여백을 0픽셀로 제거합니다.

 

📚 Semantic Elements (시맨틱 요소)란?

시맨틱(Semantic) 요소는 단순히 디자인을 위한 것이 아니라,
태그 이름 자체가 콘텐츠의 의미나 역할을 명확하게 설명해 주는 태그입니다.

시맨틱 요소 (코드에서 사용된 요소)	역할 / 의미
<header>	문서나 섹션의 소개 및 탐색 콘텐츠를 담는 영역 (주로 로고, 제목, 탐색 링크 포함)
<nav>	주요 탐색 링크 (Navigation)를 담는 영역
<footer>	문서나 섹션의 가장 아래에 위치하며, 저작권 정보, 연락처, 사이트 맵 등을 담는 영역
<ul>	순서가 없는 목록 (Unordered List)임을 나타냅니다.

 

<input type="..."	기능/용도	이미지에서 구현된 항목
type="text"	일반 텍스트 입력 필드	ID
type="password"	비밀번호 입력 필드 (입력 내용이 가려짐)	비밀번호, password
type="submit"	양식(Form) 제출 버튼	제출
type="email"	이메일 주소 입력 필드 (유효성 검사 기능 내장)	이메일
type="tel"	전화번호 입력 필드	전화번호
type="url"	URL(웹 주소) 입력 필드	url
type="number"	숫자만 입력 가능한 필드	number (첫 번째)
type="range"	슬라이더 형태의 숫자 선택 필드	number (슬라이더)
type="date"	연, 월, 일 선택 가능한 달력 위젯	date
type="month"	연, 월 선택 가능한 달력 위젯	month
type="week"	연, 주차 선택 가능한 달력 위젯	week
type="file"	로컬 파일을 선택할 수 있는 필드	파일 선택

 

---

 

[48일차 소감🤩]

- 심화반 스터디에서 포트폴리오를 완성하기위해..어제 새벽내내하다가 엎드려서 기절한.. 일어나니 아침이였습니다 ㅋㅋㅋㅋ 그래도 우당탕탕 프로젝트 하나가 완성되었는데 와... 이렇게 시간이 빨리갈까 싶을정도로 촉박했습니다.. 다음 주 수요일부터 미니 프로젝트를 진행한다고 했는데 걱정이 태산입니다 ㅎㅎ.. 그래도 프로덕트 디자이너가 되기위한 길이라고 생각하며 감사히 학습하겠습니닷 파이팅!!

= 오늘의 한 마디 =
- 덴마크 초코초코우유가 1+1 이라서 행복했던 하루