HTML 파일의 확장자명 표시 방법은 '파일명.html'로 파일명 뒤에 .을 찍고 html 확장자명을 적어야 한다.
용어설명
div = 빈 박스, 하나의 구역을 의미
p = 한줄 단위, 위아래 공간이 만든다.
span = 단어 단위, 특정 구간을 나눈다.
b, strong = 강조, 굵은 폰트로 나타낸다.
h1 ~ 6 = 제목 태그로, 폰트 크기, 굵기, 위아래 여백공간이 숫자 가 내려갈수록 커진다.
em, i = 폰트 기울기
mark = 형광
del = 가운데 밑줄
ins = 밑줄
sup, sub = 위 첨자, 아래 첨자
br = 줄바꿈
= 띄어쓰기
<, > = < > (부등호 표시)
주석 = <!-- -->
input
type
- text (입력 공간 생성)
- password (입력값 가리기)
- button (버튼)
- checkbox (네모난 체크박스 생성)
- radio (동그란 체크박스 생성)
속성 (ooo = "", attribute)
- placeholder (값을 입력 전 보여줄 메시지)
- required (해당 값이 없을 때 페이지를 넘길 수 없다.)
- readonly (값 쓰기가 불가능, 오직 읽기만 가능)
- value (값)
- name (이름)
select = 하위의 <option> 옵션명 </option>을 활용해서 목록 생성
하위 옵션을 선택하면 그것 select의 value가 된다.
label = 묶어주는 단위
button = 버튼
a = 링크, 페이지 이동
img = 이미지 태그
alt = 해당 페이지의 설명 / 이미지가 뜨지 않았을 때 대체되는 글이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titile>자기소개</titile>
</head>
<body>
<div>
<img src="./img/HTML.png" alt="html실습!"/>
<h1>자기소개 작성하기</h1>
<p>
이름 : <input type="text" placeholder="이름을 입력하세요" required>
</p>
<p>
성별 : <input type="radio" name = "gender"> 남자
<input type="radio" name = "gender"> 여자
</p>
<p>
좋아하는 음식 :
<input type="checkbox">한식<input type="checkbox">중식
<input type="checkbox">양식<input type="checkbox">일식
</p>
<p>
취미(보기중 1개) :
<select>
<option>게임</option>
<option>유투브시청</option>
<option>독서</option>
<option>운동</option>
</select>
</p>
<a herf = "https://www.naver.com" target = "_blank"><button>네이버로 이동</button></a>
</div>
</body>
</html>다른 블로그에 적힌걸 손코딩해서 다시 적어봤는데 위에 내용들이 한 번에 적용시킬 수 있어서 재미있는 시간이었다. 한 번 더 연습을 해보고 github에도 올려야겠다.
'개념정리' 카테고리의 다른 글
| [개념정리 6탄] JavaScript 2번째 (1) | 2022.10.08 |
|---|---|
| [개념정리 5탄] JavaScript란? (1) | 2022.10.08 |
| [개념정리 4탄] ifname / input / table / textarea / ul (0) | 2022.10.08 |
| [개념정리 2탄] HTML (1) | 2022.10.08 |
| [개념정리 1편]프론트엔드와 백엔드 (1) | 2022.10.08 |