마침 공부와 헬스를 시작하려 계획했던 1일차에 코로나에 걸렸다.
저번에 걸렸을 때 완전 무증상으로 겪었기에 이번에도 약할 것이라 생각했지만 예상과는 전혀 달리 너무 아팠다. 헬스는 무슨 밖에도 못나갔고 그나마 수업이라도 하루에 조금씩 들은 걸로 일단 HTML을 끝냈다.
그리하여 정리해보는 HTML
HTML 상용구
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>페이지명</title>
</head>
<body>
</body>
</html><b>텍스트</b> : 볼드체 태그
<p>텍스트</p> : 단락 태그
<h1></h1> ~ <h6></h6> : Heading 태그, 1이 가장 큼
<ul>
<li></li>
<li></li>
</ul>
순서 없는 목록 태그
<ol>
<li></li>
<li></li>
</ol>
순서 있는 목록 태그
<a href=”링크”>텍스트</a> : 링크 태그(텍스트에 링크 걸림)
<image src=”링크”, alt =”사진 설명”> : 사진이 제대로 업로드 되지 않거나 스크린 리더로 페이지를 읽는 경우 alt의 설명이 필요함.
<!--텍스트--> : 주석 태그 (브라우저에는 나타나지 않음)
<div></div> 그룹화
<span></span> 텍스트 그룹화
<hr> 수평선추가
<br> 줄바꿈
<sup>텍스트</sup> 윗첨자
<sub>텍스트</sup> 아랫첨자
HTML entities
예시 : < = <
& = &
구글에서 검색 가능
시맨틱 마크업: 의미 있는 마크업, 또는 그 요소의 내용의 의미에 관련된 마크업
<div>와 같은 용도지만 의미를 부여
<section>, <article>, <nav>, <main>, <header>, <footer>, <aside>, <summary>, <details>
표 태그
<table>
<tr>
<th>내용</th>
<th>내용2</th>
</tr>
<tr>
<th>내용2-1</th>
<td>내용2-2</td>
</tr>
</table>
<thead></thead>, <tbody></tbody>, <tfoot></tfoot> 표 내용에 따라 분리
<th rowspan =”2”></th> - 2행 차지
<th colspan =”2”></th> - 2열 차지
<form action =”/search”></form> : 폼 태그
폼 태그 사이에 들어가는 태그
<input type=”text” placeholder=”username”>
<input type=”password” placeholder=”password”>
<input type=”color”>
<input type=”number” placeholder=”enter a number”>
Placeholder =”임시로 있을 텍스트”
<div>
<label for=”이름”Text</label>
<input type=”checkbox” name=”이름” id=”이름”>
</div>
<button>text</button> - form이 수행하는 작업을 수행
아무것도 안 쓸 시 submit이 기본값
<button type=”button”>text</button> 하면 수행 안하고 그냥 버튼 역할
<input type=”submit” value=”click me!”>
<input id =”이름” type=”text” placeholder=”username” name=”username”>
수행시 /search?username=text 로 감
예시
<input type=”text” name=”q”>
<button>Search Reddit</button>
</form>
레딧 검색창
<input type=”checkbox” id=”text” name=”text”
<label for=”text”>text</label>
체크박스 태그
Checked 추가하면 체크된 상태
<label for=”name1”>name1:</label>
<input type=”radio” name=”text” id=”name1” value=”asd”>
<label for=”name2”>name2:</label>
<input type=”radio” name=”text” id=”name2”>
<label for=”name3”>name3:</label>
<input type=”radio” name=”text” id=”name3”>
Value = 전송값
라디오 박스 태그
<label for=”name”>select:</label>
<select name=”selection” id=”name”>
<option value=””>--Please choose--</option>
<option value=”one”>One</option>
<option value=”two”>Two</option>
</select>
옵션 박스 태그
<div>
<input type=”range” id=”volume” name=”volume” min =”0” max=”11” step=”0.5”>
<label for=”volume”>Volume</label>
</div>
범위 박스 태그
<label for=”requests”>anythings?</label>
<textarea id=”requests” rows=”10” cols=”40” placeholder=”Type here”></textarea>
텍스트 박스 태그
유효성 검사
Type=”email” 또는 “url” 등은 정해진 폼을 따르지 않으면 유효성이 없음
Required 를 넣으면 필수
Minlength, maxlength 등
'개발자' 카테고리의 다른 글
| SSAFY 중간 점검 및 백엔드 개발자 로드맵 걸어보기 (1) | 2023.08.27 |
|---|---|
| [SSAFY] 싸피 9기 노베이스 비전공자 합격 후기 & 느낀 점 (8) | 2023.01.07 |
| 코딩 노베이스 뭘로 입문할까 고민하다가 결정한 유데미 강의 (0) | 2022.09.14 |
| 개발하는 친구로부터의 조언 (0) | 2022.09.03 |
| 프로그래머란? (0) | 2022.09.02 |