[HTML] 시맨틱 태그(Semantic tag) (3) - <figure>, <figcaption>, <audio>, <source>, <embed>

태그 - 이미지, 일러스트레이션, 다이어그램, 코드 조각 등의 미디어를 캡슐화 태그 - 미디어를 설명하는 데 사용 This picture shows characters from Overwatch. 태그 - 오디오 콘텐츠를 문서에 포함하는 데 사용 controls : 재생 및 음소거와 같은 오디오 컨트롤을 브라우저에 자동으로 표시 autoplay : 자동 재생 태그 - 요소나 요소, 요소에서 사용할 수 있는 다중 미디어 자원을 정의할 때 사용 src : 오디오 파일의 URL을 지정 태그 - 외부 소스의 비디오, 오디오 파일, GIF를 포함한 모든 미디어 콘텐츠를 포함 - 자체적으로 닫는 태그 - 거의 안 쓰임

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (2) - <section>, <article>, <aside>

태그 - 제목 또는 동일한 주제를 가진 문서의 영역을 정의 Facts About Dogs Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times. 태그 - 해당 문서나 페이지와는 완전히 독립적으로 구성할 수 있는 요소를 정의 - 주로 포럼, 블로그 포스트, 보도 기사, 논평 등이 포함 Fun Facts About Cricket A single match of cricket can last up to 5 days. 태그 - 페이지의 다른 콘텐츠들과 ..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (1) - <header>, <nav>, <main>, <footer>

시맨틱 태그(Semantic tag) - 의미가 부여된 태그 - 여는 태그와 닫는 태그 사이의 내용에 대한 정보를 제공 - 장점 : 접근성, 검색엔진 최적화, 이해하기 쉬움 태그 - 문서나 특정 섹션의 헤더(header)를 정의 - 주로 하나 이상의 제목 요소(h1 ~ h6), 네이게이션 정보, 로고(logo)나 아이콘(icon), 저자(author) 정보 포함 Navigational Links Home Posts Contact 태그 - 메뉴 및 목차와 같은 탐색 링크 블록을 정의 Navigational Links Home Posts Contact 태그 - 웹페이지 내에서 주요 콘텐츠를 캡슐화 Types of Sports Baseball The first game of baseball was played..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 텍스트 영역 태그 - <textarea>

태그 - 사용자가 더 많은 텍스트를 작성할 수 있도록 더 큰 텍스트 필드 생성 rows : 행의 길이 결정 cols : 열의 길이 결정 Anything else you want to add?

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 드롭 다운 목록 태그 - <select> & 데이터리스트 태그 - <datalist>

태그 - 드롭 다운 목록 생성 - 목록을 스크롤하여 하나의 옵션을 선택할 수 있도록 함 태그 - 목록에 들어갈 요소 추가 목록1 목록2 목록3 What type of cake would you like? Choco Cheese Mango 태그 - 데이터리스트 생성 - 전체 목록을 띄워 하나의 옵션을 선택할 수 있도록 함 - 일치하는 목록이 없더라도 사용자가 새로운 목록 입력할 수 있음 What type of sauce would you like?

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] UI 요소 라벨 태그 - <label>

태그 - UI 요소와 연결된 설명 텍스트를 나타내는 데 사용 - 해당 라벨을 클릭하면 연관된 폼 요소에 포커스가 맞춰 for: 레이블이 어떤 폼 요소와 연관되어 있는지 명시. for 속성의 값은 연관된 요소의 id 속성 값과 일치해야 함 내용 Username

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 사용자 입력 폼 태그 - <form>

태그 - 웹 페이지에서 사용자로부터 데이터를 수집하기 위한 인터페이스를 제공 - 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의 - 사용자와 웹사이트 간에 상호작용 지원 action: 폼 데이터를 처리하게 될 서버의 URL을 지정 method: 데이터 전송 방식을 지정. HTTP 동사 사용 GET: 주로 데이터를 검색할 때 사용. 폼 데이터는 URL의 쿼리 문자열로 전송. 입력정보가 주소(i.e., url bar)에 나타나고 4096byte까지만 전송가능 POST: 폼 데이터를 본문에 포함시켜 전송. 주로 데이터를 서버에 제출할 때 사용. 입력정보가 드러나지 않고 사이즈 제한도 없음 내용 : "전송방식" 요청으로 url에 정보를 보냄 Creating a form Looks like ..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 6.
• textsms