HTML 태그 기본 2
태그 2
ul (Unordered List)
순서가 없는 목록 만들 때
각 항목은 동그라미 기호(buliet 기호)로 표시됨
💫 ul 밑에는 li만 올 수 있음 (ex. div 올 수 없음)
<ul type="disc">
<li>사과</li>
<li>바나나</li>
<li>멜론</li>
</ul>
💫 중첩해서 사용 가능
💫 ul 밑에는 반드시 li만 올 수 있음!
<ul>
<li>
운동 (순서 없는 목록)
<ul type="circle">
<li>달리기</li>
<li>수영</li>
</ul>
</li>
</ul>
ol (Ordered List)
순서가 있는 목록을 만들 때
각 항목은 숫자나 알파벳으로 표시됨
<ol type="1">
<li>아침먹기</li>
<li>점심먹기</li>
<li>간식먹기</li>
<li>저녁먹기</li>
<li>야식먹기</li>
</ol>
dl (Description List)
용어와 그에 대한 설명을 나열할 때
<dt> 태그로 용어를, <dd> 태그로 설명을 표시
💫 type을 쓰지 않음
<dl>
<dt>HTML</dt>
<dd>하이퍼텍스트 마크업 언어.</dd>
<dt>CSS</dt>
<dd>스타일 시트를 작성하는 언어.</dd>
<dt>JavaScript</dt>
<dd>웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어.</dd>
</dl>
링크 & 이미지
a 태그 (Anchor Tag)
하이퍼링크를 생성하는 데 사용
href: 링크의 목적지 URL 지정
target: 링크를 클릭했을 때 페이지가 열리는 방식 지정
_blank: 새 탭에서 열기
title: 마우스를 올렸을 때 링크에 대한 추가 정보 제공
💫 _blank의 취약점
새 탭에서 링크가 열린다는 것은 기본적으로 보안 허술함
보완점
rel: a 태그에 href 속성이 설정되어 있어야만 사용 가능
nonreferrer:document.referrer통한 추적 불가능하게 만듦
document.referrer: 어떤 사이트에 있다가 왔는지 확인 가능noopener:window.opener속성을 통한 컨트롤 막아줌
window.opener: 기존 창의 페이지에 조작 가능
img 태그 (Image Tag)
웹 페이지에 이미지 삽입
src: 이미지 파일의 URL 지정
alt: 이미지의 대체 텍스트, 이미지 로드 불가일 때 나타남 (ex. 신문사의 뉴스 사진에 alt 속성에 장문의 내용을 써 미리보기)
width: 너비
height: 높이
<img src="<https://www.example.com/image.jpg>" alt="설명 텍스트" width="300" height="200">경로
-
상대적 경로
./: 현재 경로 (생략 가능)
../: 상위 폴더
/: 루트 도메인
💫./와/가 헷갈리지 않도록 주의! -
절대적 경로
<img src="/learn/images/1.webp" alt="선셋">
<img src="<https://127.0.0.1:5500/learn/images/1.webp>" alt="선셋">이미지 링크
링크 태그와 이미지 태그를 함께 사용
<a href="<https://www.example.com>" target="_blank" title="Example Website">
<img src="<https://www.example.com/image.jpg>" alt="설명 텍스트" width="300" height="200">
</a>폼
사용자와 상호 작용
form 태그
사용자 입력을 수집하기 위한 폼
action: 폼 데이터를 전송할 URL을 지정
method: 데이터를 전송할 방법을 지정 (GET 또는 POST), 기본적으로 GET Method 사용
enctype: 데이터 전송 형식을 지정
input 태그
사용자로부터 입력을 받기 위해 다양한 타입의 입력 필드 생성
type: 입력 필드의 유형 정의
( text | password | tel | number | url | search | email | checkbox | radio | file | button | image | hidden | date | datetime-local | month | week | time | range | color | submit | reset )
name: 입력 필드의 이름, 서버에서 사용할 키 지정
value: 입력 필드의 초기 값 설정
placeholder: 필드에 표시될 안내 텍스트
required: 필드를 필수로 설정
- input: 한 줄 입력 요소
- textarea: 여러 줄 입력 요소
label 태그
폼 요소에 대한 설명 제공
클릭 시 연결된 입력 필드 활성화
for: 연결할 입력 필드의 ID 지정
- 명시적 방법:
for과id있어야 함 - 암묵적 방법
<form>
<!-- 명시적 방법 -->
<label for="uid">아이디</label>
<input type="email" id="uid">
<!-- 암묵적 (암시적) 방법 -->
<label>비밀번호: <input type="password" /></label>
<!-- 암묵적 (암시적) + 명시적 방법 -->
<label for="uid">비밀번호: <input type="password" id="uid" /></label>
</form>button 태그
버튼 ( submit | button | reset )
<form>
<label for="uid">아이디</label>
<input type="text" id="uid" name="uid">
<label for="uid">비밀번호: <input type="password" name="pwd" /></label>
<button type="button">이메일 인증</button>
<button type="submit">회원가입</button>
</form>fieldset, legend 태그
관련된 입력 요소를 그룹화하여 시각적으로 구분
<form action="">
<fieldset>
<label for="uid">
아이디
<input type="text" id="uid" />
</label>
<label for="pwd">
비밀번호
<input type="text" id="pwd" />
</label>
<label for="pwd-confirm">
비밀번호 확인
<input type="text" id="pwd-confirm" />
</label>
</fieldset>
<fieldset>
<legend>선택 정보</legend>
<label for="uname">
이름
<input type="text" id="uname" />
</label>
<label for="uaddress">
주소
<input type="text" id="uaddress" />
</label>
</fieldset>
</form>select 태그
드롭다운 목록 생성
optoion 태그
select 요소 내에서 선택 가능한 항목 정의
optgroup 태그
select 요소 내에서 관련된 옵션 그룹을 만들 때 사용
label: 그룹의 레이블 지정
button 태그
버튼을 생성해, 클릭 시 특정 동작 수행하게 함
표 만들기
table 태그
테이블 생성
border: 테이블의 테두리 두께 설정
cellspacing: 셀 간의 간격을 설정
cellpadding: 셀 간의 여백을 설정
caption 태그
테이블 제목 정의
caption-side: 제목의 위치 설정
tr 태그 (Table Row)
테이블의 행
th 태그 (Table Header)
테이블의 헤더 셀 정의, 굵게 표시됨
scope: 셀의 범위 지정
( col | row | colgroup | rowgroup )
td 태그 (Table Data)
테이블의 일반 셀 정의
rowspan
셀을 수직으로 병합할 때 사용
colspan
셀을 수평으로 병합할 때 사용
thead (Table Head)
테이블의 헤더 섹션을 정의
tfoot (Table Foot)
테이블의 푸터 섹션을 정의
tbody (Table Body)
테이블의 본문 섹션을 정의
col 태그
테이블의 열에 대한 속성 정의
span: 여러 열을 지정style: 열의 스타일을 정의
colgroup 태그
하나 이상의 col요소를 그룹화하여 설정
