💡 25-06-27 (금)
요즘 시간이 정말정말 빠르게 지나간다
벌써 7월이라니 😂
목록 태그
: 웹페이지에서 리스트 형태로 정보를 나열할 때 사용하는 태그
☝️ 쇼핑몰 상품 목록, 레시피 순서
▪️ ol (Ordered List)
순서가 있는 목록을 표현할 때 사용한다
▶︎ type 속성을 이용해 글머리 기호 변경이 가능하다
☝️ 라면 레시피를 작성하면 브라우저에서 자동으로 숫자가 붙은 리스트가 만들어진다
▪️ ul (Unordered Lists)
순서가 없는 목록을 표현할 때 사용하며 앞에는 숫자 대신 글머리 기호가 붙는다
☝️ 투두리스트나 메뉴 리스트처럼 순서와 상관없이 단순히 나열할 때 사용한다
▪️ li (Listed Item)
목록의 하위 항목을 나타내는 태그로 ul 태그나 ol 태그의 하위에 위치한다
▶︎ 독립적 사용 ❌ / 반드시 ol이나 ul 태그의 하위 요소로 작성 ⭕️
ul 태그의 하위에는 반드시 li 태그가 위치해야 한다 ‼️
▪️ dl (Definition List)
정의 목록을 만드는 태그로 사전처럼 용어를 설명하는 목록을 만들 때 사용한다
☝️ ‘A는 B이다’처럼 Key=Value 형태로 나타낼 때 유용
▶︎ dl 태그는 전체 틀을 만드는 역할을 하며 그 안에 dt와 dd 태그를 감싸야 한다
dl만 단독으로 쓰면 의미가 없고 반드시 dt와 dd가 포함된 구조여야 한다❗️
▪️ dt (Definition Term)
정의 목록에서 용어의 제목을 나타낼 때 사용한다
☝️ 정의 목록의 제목 부분에 해당
▪️ dd (Definition Description)
정의 목록에서 용어(dt)를 설명하는 내용을 작성할 때 사용한다
dl 태그는 하나 이상의 dt-dd 쌍을 반드시 포함해야 하지만 dt와 dd가 꼭 한 쌍으로만 이루어져야 하는 것은 아니다 ‼️
Vs code 목록 태그 실습
Semantic 태그
: 웹페이지의 구조와 내용의 의미를 명확하게 나타낸다
▶︎ 사람이 보거나 검색 엔진이 읽을 때 어떤 역할을 하는지 쉽게 이해할 수 있도록 도와줌
HTML5에서는 각 태그의 의미를 잘 살려 사용해야 웹페이지의 구조를 더 명확하고 직관적으로 표현할 수 있다
태그는 단순히 모양을 만들기 위한 것이 아니라 각각의 역할과 의미를 담고 있다
▫️ nav : 다른 페이지나 같은 페이지의 다른 부분으로 이동할 수 있는 네비게이션 링크들을 모아 놓은 영역
▫️ main : 문서의 body 요소의 주 콘텐츠를 정의할때 사용한다
▫️ footer : 주로 저작권 정보나 서비스 제공자 정보 등을 나타내며 사이트 하단에 위치한다
▫️ section : 문서나 응용프로그램의 일반적인 섹션을 표현한다
▫️ article : 여러가지 아이템들을 묶어 재사용 가능하게 그룹화한다
▫️ details : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타낸다
▫️ summary : 부모요소인 details 요소의 내용에 대한 요약이나 캡션 등을 나타낸다
▫️ figure : 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도로 사용된다
▫️ figcaption : 부모요소인 figure 요소의 내용들에 대한 캡션 혹은 제목을 나타낸다
▫️ aside : 페이지의 주요 내용과는 직접적인 관련은 없지만 어느 정도 관련된 부가적인 정보나 사이드 콘텐츠를 담는 영역
▫️ mark : 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현한다
▫️ time : 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타낸다
💡 Semantic 태그를 잘 정리해놓은 사이트
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Semantic 태그가 사용되는 영역 중에서 가장 대표적인 예시이다
🟩 header : 웹 페이지의 가장 위쪽에 위치하는 머리말 영역
헤더는 여러 페이지에서 공통적으로 반복되는 부분으로, 페이지 상단에 위치한다
☝️ 사이트의 로고나 타이틀, 상단메뉴, 검색창
🟨 nav : 네비게이션을 의미하며 사이트 내에서 이동할 수 있는 메뉴 목록을 나타낸다
헤더 안이나 아래에 위치해 상단 메뉴바 역할을 하며 검색엔진에서도 이 영역을 메뉴로 인식할 수 있다
🟦 main : 페이지에서 가장 핵심적인 내용을 보여주는 주요 콘텐츠 영역
☝️ 기사, 본문 텍스트, 이미지, 게시글
한 페이지에는 main 태그를 하나만 사용해야 하며, 사용자들이 가장 많이 머무는 핵심적인 내용을 작성할 때 HTML에서 main 태그를 사용한다
🟪 footer : 페이지의 가장 하단에 위치하는 영역
header와 마찬가지로 모든 페이지에서 반복되는 경우가 많다
☝️ 연락처 또는 관련 링크, 저작권 표시
➕ Section으로 나뉘는 Semantic 태그들이 있다는 것도 알아두기!
semantic 태그 실습
header(🔴), nav(🟣) 태그로 메뉴 목록을 배치했으며, 중앙에는 페이지의 핵심 내용을 담는 main(🔵) 영역이 있고, 페이지 가장 아래에는 footer(🟢) 영역이 위치한다
➡️ Semantic 태그를 사용하면 코드가 더 직관적이고 의미가 명확해져서 유지보수나 검색엔진 최적화(SEO)에도 유리하다
❌ none- Semantic style
Semantic 태그 대신 div 태그에 class를 붙여서 영역을 구분하고 있다
header, nav, main, footer 같은 의미 있는 태그를 사용하지 않아 코드가 길어지고 각 영역의 의미를 한눈에 파악하기 어렵다.
⭕️ Semantic style
Semantic 태그를 사용해 페이지를 구성했다
header, nav, main, footer 같은 의미 있는 태그를 사용해 각 영역의 역할이 명확하게 구분되어 코드가 더 직관적이고 이해하기 쉽다
▶️ 영역의 의미를 명확히 나타내기 위해 Semantic 태그를 사용하는 것이 좋다
Semantic 태그 이점
✅ 검색엔진 최적화
Semantic 태그를 사용하면 검색엔진이 페이지의 중요한 정보를 더 정확하게 파악할 수 있어 사용자가 검색했을 때 페이지가 상위에 노출될 가능성이 높아진다
☝️ 구글은 Semantic 태그로 header를 사용한 웹사이트에서 header 안에 있는 제목을 페이지의 대표 제목으로 인식할 수 있다
✅ 웹 접근성 향상
웹 접근성은 어떤 형태의 사용자라도 웹을 쉽게 사용할 수 있도록 하는 것이다
특히 스크린리더나 보조기기를 사용하는 사용자들이 있을 때,
Semantic 태그를 제대로 사용하면 스크린리더가 각 콘텐츠의 역할을 정확하게 전달해주기 때문에 이들이 웹 콘텐츠에 더 쉽게 접근할 수 있게 된다
✅ 가독성 향상
Semantic 태그를 사용한 것과 사용하지 않은 것을 직접 실습해보면 Semantic 태그를 사용하는 것이 더 간단하고 편리하다는 것을 알 수 있다
또한 코드 작성이나 확인 시에도 더 이해하기 쉽기 때문에 코드의 가독성도 높아진다
Form 태그
: 사용자가 입력한 데이터를 서버로 전송하기 위해 사용하는 태그
▶︎ 이름, 이메일, 비밀번호 등과 같은 입력 필드(Field) 를 담고 있는 데이터 입력의 틀이나 그릇
☝️ 로그인, 회원가입, 게시판 글쓰기
▫️ Form : 입력받는 데이터들의 묶음
-> 사용자의 정보를 입력받을 수 있게 만들어 놓은 형식
▫️ 데이터를 폼 데이터(Form Data) 또는 필드(Field)
사용자가 입력하는 모든 과정에서 쓰이며, 각 입력 필드들을 하나로 묶어 서버로 전송할 수 있게 해준다❗️
☝️ 쿠팡 로그인 페이지
쿠팡 로그인 페이지처럼 전체 화면을 HTML로 작성할 때는 form 태그를 사용하여 로그인 폼을 구성한다
▶︎ 아이디(이메일) 입력 필드, 비밀번호 입력 필드, 자동 로그인 체크박스, 로그인 버튼 등 다양한 input 요소들
이렇게 기본적인 구조를 form 태그로 만든 뒤 CSS를 이용해 색상, 크기, 간격을 조정하고 아이콘을 추가하면 실제 웹사이트에서 보는 디자인처럼 꾸밀 수 있다
📌 Form 태그 기본 구조 예제
✔️ form action="/submit" 이라고 작성하면 폼 안에 있는 입력 필드들의 데이터를 /submit 경로로 전송하겠다는 의미❗️
▶︎ 서버에서 데이터를 받아줄 URL을 지정해주는 역할
▫️ action : 사용자로부터 받은 데이터를 어디로 보낼지 지정하는 속성
▫️ method : 데이터를 어떤 방식으로 보낼지 지정하는 속성
✔️ for와 id에는 같은 워딩을 써줘야 스크린 리더기가 입력해야 하는 인풋 박스의 내용을 정확히 읽어줘서 웹 접근성을 높일 수 있다
사용자가 어떤 입력란에 무엇을 입력해야 하는지 쉽게 알 수 있게 된다❗️
☝️ 비밀번호 입력란이 ●●●처럼 보이는 이유는 input type을 password로 설정했기 때문에 input 박스의 내용이 비밀번호 형식으로 표시된다
☝️ 아이디 입력란은 input type이 text로 설정되어 있어서 입력한 내용이 그대로 텍스트 형식으로 보인다
Form Vs code 실습
⏺️ Form 01
⏺️ Form 02
✔️ required 속성을 추가해주면 사용자가 값을 입력하지 않고 제출하려고 할 때 “작성해주세요”라는 경고가 뜬다
필수 입력 필드를 만들 때 자주 사용하는 속성이다
✔️ type="number"에서는 min="5" max="10" 속성을 추가해 입력 가능한 숫자의 범위를 5부터 10까지로 제한할 수 있다
✔️ fieldset은 여러 input 요소를 하나의 그룹으로 묶어주는 태그로, 입력 항목들을 구분하기 쉽게 보여준다.
✔️ legend는 fieldset 그룹의 제목 역할을 하는 태그다
✔️ multiple는 사용자가 한 번에 여러 개의 파일을 선택할 수 있게 해준다
⏺️ Form 03
사용자가 체크박스를 선택했을 때 서버로 전송되는 데이터는 체크된 항목의 value 값이기 때문에 value 값을 꼭 넣어줘야 한다 ‼️
selected를 넣어주면 해당 옵션을 디폴트값으로 설정할 수 있다
▶︎ 페이지가 로드될 때 처음부터 선택된 상태로 표시
우리 눈에는 체크박스에 ‘무료’라고 적혀 있어서 무료를 선택했다고 보이지만 실제로 컴퓨터는 데이터를 전송할 때 ‘무료’라는 글자를 보내지 않는다
체크박스의 value 값을 전송하기 때문에 서버에서 올바른 데이터를 받을 수 있도록
value 값을 알맞게 설정해주는 것이 중요하다 ‼️
✏️ HTML form 태그 실습하기
✏️ 데일리 UI하기
