본문 바로가기
카테고리 없음

📕 HTML

by 후야- 2024. 1. 17.

✔ 검색 mdn
✔ prettier 자동완성

✔ Material Icon Theme 폴더 아이콘 변경


◾  <!DOCTYPE html> 
-> html 문서라는 걸 알려줌



◾  <html> tag           <html lang="en"> lang : 우리 사이트 언어 무엇을 사용하는지 알려줌
-> 웹사이트 구조는 두가지 (head, body)
◾  <head>
-> <title>
-> <mata name="description">  (부가적인 정보)
-> <meta charset="utf-8"> (글자 꺠짐, 무조건 넣어야함)
-> <link rel="shortcut icon"> (사이트 로고)
-> <og:title > <og:image> (내가 사이트의 링크를 공유 할때)



◾  <h> tag
h1 ~ h6


--
◾  list tag 
1. <ul>(unordered list) - 순서가 없다
-> 어떤 태그를 넣든 

2. <ol>(order list) - 순서가 있음

<li>(list item)



◾  <a> tag
<a>(anchor)
-> 다른 웹사이트로 이동
-> href   _self : 기본값,   _blank : 새로운 페이지가 열림
->



◾  <img> tag
-> src



◾  <p> tag
◾  <pre> tag



◾  <audio> tag
-> <audio controls autoplay src=""></audio>

◾  <vidio> tag
-> <video controls autoplay src=""></video>



 <form> tag
-> action
->

◾  <input> tag
-> file (accept : 파일지정 ex) .pdf .img) 
-> type : text, password, submit, email, url, data, range
-> required : 무조건 적어야함 안적을시 글구 뜸
-> placeholder : 글 소개
-> minlength : 최소 글수

◾  <label> tag
-> for , id  같아야 작동



◾  <div> tag  (divison : 분할, 구분, 경계선)   ✔ box 기능

<div> 대체 가능한 태그들
✔ block (box)
◾  <div>
◾  <address> 사람, 단체, 조직 등에 대한 연락처 정보란
◾  <header> tag
◾  <main> tag
◾  <footer> tag  (꼬리말)
◾  <aside> tag  (사이드바)
◾  <nav> 메뉴, 목차, 색인으로 사용

✔ inline
◾  <span> 짧은 text   -> 박스 옆에 박스 가능
◾  <a>
◾  <image>