HTML 씹어먹기
Anchor 링크
<a> 태그 안 href 속성에 들어갈수 있는 값들
- 웹 URL
- 상대경로
- #id값
- mailto:메일주소
- tel:전화번호
List 목록
- ol : ordered list 순서가 중요한 목록
- ul : unordered list 순서가 중요하지 않은 목록
❗️ ul과 ol의 직계 자식요소는 무조건 li만 가능
Description List 정의 목록
- 용어를 정의할 때 사용
- Key-Value로 정보를 제공할 때
- dl : description list
- dt : description term - key
- dd : description data - value
- dfn : definition
❗️ dl의 자식요소는 오직 div, dt, dd만 가능하다
❗️ dt와 dd는 반드시 dl의 자식요소로 존재해야 하며 단독사용은 안된다.
Quotations 인용
- blockquote : 인용문
- cite : 출처
- blockquote의 속성으로 cite="Url"로 주소 출처 작성가능
문장내에 들어가는 일부 인용문같은 경우에는 q태그 사용
div & span
: css 스타일링할 때 요긴하게 사용!
Form
: 사용자로부터 인풋Input을 받을 때 사용
<form action="API주소" method="GET|POST"> </form>Input
<input type="text" />- type : 필수로 표시해야함, text, number, email, password 등등
- placeholder : 필드안내문구
- minlength / maxlength
- required : 필수입력필드일때
- disabled
- value : 초기설정값
- input type이 number일때 min, max
- input type이 file일때 accept="확장자, .png, .jpg"
Label
: 인풋필드들에 이름을 붙이는 태그.
<label for="대상 인풋id"> 라벨이름 </label>Radio & Checkbox
: radio는 하나만 선택, chechbox는 다중선택가능일때 사용
radio 작성 예시
<input type="radio" id="button1" name="buttons" value="1" />
<label for="button1">1</label>
<input type="radio" id="button2" name="buttons" value="2" />
<label for="button2">2</label>- name은 여러 radio버튼들이 서로 연관되어있는(한 그룹)인지 구분. 따라서 같은그룹은 같은 네임을 갖고 있어야 한다.
- value는 서버 전송시 어떤 항목이 선택되었는지 구분해주는!
checkbox 작성 예시
<input type="checkbox" id="check1" name="boxes" value="1">
<label for="check1">1</label>
<input type="checkbox" id="check2" name="boxes" value="2">
<label for="check2">2</label>
<input type="checkbox" id="check3" name="boxes" value="3">
<label for="check3">3</label>Select & Option
: 콤보박스, 드롭다운, 풀다운 등등으로 불림
<select name="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>- select에 multiple 속성을 적어놓으면 맥은 커맨드, 윈도우는 컨트롤키를 누른채로 복수 선택이 가능해진다.
Textarea
: text타입보다 더 긴 텍스트박스 필드
- placeholder, required, disabled 등등 속성 사용가능
Button
: 클릭했을때 어떤 작용이 일어나야할때 가장 만만하게 쓰이며 type=""을 필수로 지정해주어야 함.
- button : 기본 버튼으로 나중에 자바스크립트를 사용해 효과를 준다던지 함
- submit : 폼등을 제출할때 많이 사용
- reset : 인풋 값들을 다 리셋하고싶을때
Table
: 테이블은 가로줄을 기준으로 작성해나간다.
<table>
<tr>
<th>테이블 헤더</th>
<td>테이블 데이터</td>
</tr>
</table>- thead / tbody으로 그룹핑해주기
- rowspan : 셀 세로 병합(가로줄 개수를 늘리는 느낌)
- colspan : 셀 가로 병함(세로줄 개수를 늘리는 느낌)
- scope="row|col" : 테이블 헤더한테만 쓸 수 있는 속성. th가 어떤 줄들의 헤더인지 좀 더 명확하게 마크업하기 위해 써줌.
Media File
: audio / video / iframe
audio
오디오 소스파일을 한가지만 넣을때
<audio src=""></audio>
브라우저별로 지원하지 않을 경우를 대비해 같은파일이지만 다양한 타입의 소스들을 넣을때
<audio controls>
<source src="" type="audio/wav" />
<source src="" type="audio/mpeg" />
<source src="" type="audio/ogg" />
</audio>- controls 속성을 추가하면 컨트롤러 버튼 생성
- autoplay 속성을 추가하면 자동 재생된다.
- loop 속성을 추가하면 무한 반복재생
video
: audio와 사용법 완전 동일
iframe
: html문서 안에 또다른 html문서를 embed하고 싶을때 사용
<iframe src="" frameborder="0"></iframe>- 보통 iframe을 처음부터 다 직접 작성하는 경우는 거의 없고 쉐어할때 복붙해서 사용하면 된다.
Etc
abbr(abbreviation)
<abbr title="풀네임">약어</abbr>address
<address>연락처</address>- 주소
- URL
- 이메일 주소
- 전화번호
- SNS 주소
pre(preformatted text), code
<pre>
p태그와 달리 텍스트 작성한 대로 줄바꿈, 공백등 다 나옴
</pre>
코드를 작성하고 싶을때 pre 태그와 함께 사용하는 경우가 많다.
<pre>
<code>
console.log('Hi')
</code>
</pre>Doctype & Document Structure
HTML문서를 작성할때 가장 먼저 해줘야할 Document Type Declaration
= DTD 선언 = 문서 형식 선언
<!DOCTYPE html>
<html>
<head>
<!--메타 데이터-->
</head>
<body>
<!--컨텐츠 데이터-->
</body>
</html>head
: title, link, style & script, meta
title
: 검색 최적화(Search Engine Optimization)에 중요
1. 단순 단어 나열은 별로임
2. 페이지마다 다르게
3. 관련 내용 센스있게 신경써서 작성하지
link
: 주로css 문서를 연결할때 사용, 폰트 적용할때도 사용
link:css 적고 tab 누르면
<link rel="stylesheet" href="#.css"> 자동 생성
❗️ css 문서 이름 확인할것style
: html 문서 내에서 css코드 작성할 때. 하지만 잘 안씀
script
: 자바스크립트 파일 첨부할때 사용하는 태그
script:src 쓰고 tab 누르면 아래 양식생성
<script src="경로"></script>
<script>//자바스크립트 코드</script>❗️ script 태그는 바디 최하단에 작성
meta
<meta name="" content="">
요즘엔 Title만큼 필수가됨. 반응형 사이트를 위해!
<meta nemt="viewport" content="with=device-width, initial-scale=1.0;">
<meta name="author" content="작성자">
<meta neme="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="description" content="페이지 설명문">Sectioning Elements
: section, article, nav, aside
- Section element내에는 반드시 heading태그를 작성해야 한다
tips
- 구획 나누기
- 적절한 Sectioning elements 정해주기
- 하나의 html문서에서는 하나의 main요소 사용
⚠️ main은 sectioning elements 요소가 아니므로 안에 heading 태그 없어도됨 - input type="file"같은 경우 css를 먹일수없기때문에 button을 하나 만들어줘서 자바스크립트로 그 버튼을 눌렀을때 인풋이 작동하게 만들어주는식으로
- 무료 시안보고 마크업 감 유지하기
개발 공부 기록