HTML 공부하기 (2) 이미지태그, 목록태그

이미지 태그 <img>

<img src="이미지 주소" alt="이미지 설명(대체 텍스트)">

img 태그

src 속성

​

폴더 안 이미지 <img src = "폴더/이미지.jpg" alt="설명">

속성	설명	예시
src	이미지 파일 경로	src="cat.jpg"
alt	이미지가 안 뜰 때 대신 보이는 설명	alt="고양이 사진"
width / height	크기 지정	width="200" height="150"

• alt 속성은 시각장애인용 리더가 읽어주는 텍스트라 필수!
• width만 지정하면 자동으로 비율 맞춰짐
• 파일은 HTML 파일과 같은 폴더 안에 있어야 함

목록 태그 (list)

 

<!--ㅁ--> 주석 (화면에 보여지지 않음)

<li> 단독사용x 반드시 ul/ ol 안에

​

(1) 순서 있는 목록 <ol>

​

<ol>

<li>회원가입</li>

<li>장바구니 담기</li>

<li>결제 완료</li>

</ol>

​

결과

1. 회원가입
2. 장바구니 담기
3. 결제 완료

​

type 속성으로 모양 변경 가능

• type="A" → A, B, C
• type="a" → a, b, c
• type="I" → I, II, III
• type="i" → i, ii, iii

​

(2) 순서 없는 목록 <ul>

​

<ul>

<li>신제품</li>

<li>베스트셀러</li>

<li>이벤트</li>

</ul>

​

결과

• 신제품
• 베스트셀러
• 이벤트

​

(3) 중첩목록

​

<h1>좋아하는 음식</h1>

<ul>

<li>한식

<ul>

<li>비빔밥</li>

<li>삼겹살</li>

</ul>

</li>

<li>중식

<ul>

<li>짜장면</li>

<li>짬뽕</li>

</ul>

</li>

</ul>

​

좋아하는 음식

ㅇ한식

• 비빔밥
• 삼겹살

ㅇ중식

• 짜장면
• 짬뽕

​

(4) 정의목록 <dl>

Definiton List

용어와 설명을 함께 표시할 때 사용

설명서, 용어사전, 메뉴 정보 등에서 자주 사용

​

태그	의미
<dl>	정의 목록 전체를 감쌈
<dt>	정의할 용어 (Definition Term)
<dd>	용어의 설명 (Definition Description)

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language의 약자, 웹 문서의 구조를 정의함</dd>

​

<dt>CSS</dt>

<dd>웹 문서의 디자인(색상, 폰트, 배치 등)을 담당함</dd>

</dl>

​

결과 예시

HTML

HyperText Markup Language의 약자, 웹 문서의 구조를 정의함

CSS

웹 문서의 디자인(색상, 폰트, 배치 등)을 담당함