html 목록 태그, 이미지 태그, 하이퍼링크

목록태그

• 순서가 없는 태그

<ul>
    <li></li>
</ul>

 

• 순서가 있는 태그

<ol>
    <li></li>
</ol>

 

• 사용자 정의 태그

<dl>
    <dt></dt>
    <dd></dd>
</dl>

 

예시 적용 코드

<!-- 에밋: ul>li*4 -->
<ul>
    <li>잠만보</li>
    <li>장쪼만</li>
    <li>장장군</li>
    <li>이루미</li>
</ul>

<!-- 에밋: ol>li*3 -->
<ol>
    <li>이초코</li>
    <li>이깜시</li>
    <li>이또순</li>
</ol>

<!-- 에밋: dl>dt+dd*3 -->
<dl>
    <dt>오늘 할 일</dt>
    <dd>블로그 정리하기</dd>
    <dd>과제 제출하기</dd>
    <dd>복습하기</dd>
</dl>

 

 

---

 

이미지태그

<img src="경로" alt="이미지설명">

src 속성에는 화면에 나타내고 싶은 이미지의 경로를, alt 속성에는 이미지가 나타나지 않았을 때 나오는 텍스트를 넣어준다.

 

 

• 절대 경로

이미지 파일이 가지고 있는 주소나 고유한 위치

<!-- 절대 경로 -->
<img src="C:\CI\Web\HTML\winter1.png" alt="겨울장갑">
<img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨">

 

 

• 상대 경로

작성 중인 HTML 파일 기준에서의 이미지 경로

<img src="winter2.png" alt="웃는루돌프">
<!-- <img src="./winter2.png" alt="웃는루돌프"> -->

<img src="images/winter3.png" alt="겨울루돌프">
<!-- <img src="./images/winter3.png" alt="겨울루돌프"> -->

• 현재 HTML 파일과 동일한 디렉토리에 위치한 이미지의 경로는 "이미지명.png(jpg)" 만 작성 또는 현재 위치라는 의미의 ./을 앞에 붙여서 작성
• 현재 HTML 파일의 하위 폴더에 위치한 이미지의 경로는 "하위폴더명/이미지명.png(jpg)"만 작성 또는 현재 위치라는 의미의 ./을 앞에 붙여서 작성

예시 적용 시 화면

• ./ : 현재 디렉토리
• ../ : 현재 디렉토리의  한 단계 상위 디렉토리

---

 

하이퍼링크

 

앵커 태그

• 한 페이지에서 다른 외부 페이지로 넘어갈 때 사용하는 태그
• 한 페이지 내부에서의 이동도 가능하다

<a href="링크 경로"></a>

<!-- 절대 경로 -->
<a href="https://cccd3.tistory.com/">내 블로그</a>

<!-- 상대 경로 -->
<a href="./1_첫HTML파일.html">첫 HTML 파일</a>
<a href="./sub/4_1_이미지태그.html">이미지 태그</a>
<a href="./4_이미지태그.html"><img src="./winter1.png" alt="겨울"></a>

• 앵커 태그 안에 이미지 태그를 넣어서 이미지 하이퍼링크도 만들 수 있다

예시 적용 화면

 

 

<p id="menu">메뉴</p>

<p><a href="#">위로</a></p>
<p><a href="#menu">메뉴로 가기</a></p>

• "위로"를 누르면 href="#" 이기 때문에 화면의 맨 위 구역으로 넘어간다
• "메뉴로 가기" 를 누르면 "메뉴"로 화면이 넘어간다

 

예시 적용 화면