[작성일: 2023. 02. 07]
HTML의 요소
<p>My name is None</p>
1 2 3- Opening Tag : 요소의 이름과 <>로 구성
- Contents : 요소의 내용이며 단순한 텍스트로 구성
- Closing Tag : 1과 같지만 이름 앞에 /가 있음.
중첩 요소(Nested Element)
- 요소 안에 다른 요소를 넣는 것
<p>I'm <strong> bery </strong> happy</p>
단락 태그(Paragraph Tag)
- 단락 : 내용 상 끊어서 구분할 수 있는 하나의 부분. 문단이라고도 함
<p>태그로 단락 표현</p>
<!-- 단락 제목 태그 -->
<h1> ~ <6>
서식 태그
- <strong>, <b> : 강조(굵은 글씨)
- <em>, <i> : 글씨 기울이기(이탤릭체)
- <mark> : 하이라이트(형광펜)
- <del> : 취소선
- <ins> : 텍스트에 밑줄 긋기
- <sup>, <sub> : 위 첨자, 아래 첨자
링크 태그
- HTML link : 현재 페이지에서 다른 페이지로 이동하려는 목적으로 사용함.
- 하이퍼링크 또는 링크라고 부르며 태그는 <a> 사용
<a href="경로 또는 외부 사이트 주소" target-"보여줄 창">
문자열 또는 이미지
</a>
이미지 태그
- 웹 페이지에서 주로 사용되는 이미지의 종류
- JPEG : .jpg, .jpeg 휴대폰, 카메라 사진 등
- GIF : .gif 움직이는 이미지
- PNG : .png 배경을 투명하게 할 때 사용함.
- 절대경로 : C:/, D:/ 등은 안 됨. 보통 /img/4223t2.jpg등 루트(/)로 시작함.
- 상대경로 : html 파일이 위치한 곳에서 ..(한 단계 위) , .(현재위치)
<img src="이미지경로" alt="대체문자열">
리스트 태그
- 순서 없는 리스트(UL) : unordered list, <ul>과 <li>로 구성됨.
- 순서 있는 리스트(OL) : ordered list
- 타입 값 : 1(숫자), A(영대문자), a(영소문자), i(로마), I(로마)
<ul>
<li>리스트1<li>
<li>리스트2<li>
</ul>
<ol type="타입값" start="시작값"> <!-- 시작값 안 쓰면 1번부터 시작함 -->
<ol>
<li>리스트1<li>
<li>리스트2<li>
</ol>
input 태그
- 사용자로부터 입력받기 위해 사용하는 태그
| 속성 리스트 | 설명 |
| size | 글상자 크기 |
| maxlength | 값의 최대 길이 |
| placeholder | 입력하기 전에 보여주는 텍스트 |
| readonly | 편집 불가능 |
| value | 미리 설정할 값 |
| required | 필수 항목 |
| type 관련 | |
| text | 일반 텍스트 |
| password | 비밀번호(가려짐) |
| radio | 하나만 선택 가능 |
| checkbox | 여러 선택 가능한 체크박스 |
| file | 파일 전송 |
| color | 색상 |
| 이메일 | |
| url | http:// 체크 |
| tel | 전화번호 |
| date | 날짜 |
| number(min="", max="", step="") | 숫자 크기를 조절할 수 있는 상하버튼 생성 |
| range | 일정 범위 내 값만 입력 가능 |
| search | 검색어(우측에 x표시 있음.) |
Button
submit 데이터를 서버의 form으로 보내는 버튼
reset 리셋버튼
🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.