리스트 만들기
리스트를 만들기 위해서 사용하는 주로 사용하는 태그는 ol, ul 태그가 있다.
각자 내용은 비슷 하지만 실습을 통해 어떻게 다른지 알아보자.
소스 코드
<body>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
</body>
결과
A 태그를 활용한 실습
위와 같이 간단하고 빠르게 리스트를 만들 수 있으며 a 태그를 활용하여 간단한 실습을 진행해보자.
소스 코드
- href 속성에 경로(url)를 입력하여 각 페이지로 이동하게 설정
<body>
<ul>
<li><a href="https://www.naver.com">네이버로 이동</a></li>
<li><a href="https://www.google.com">구글로 이동</a></li>
<li><a href="https://www.daum.net">다음으로 이동</a></li>
</ul>
</body>
결과
IMG 태그를 활용한 실습
리스트 img 태그를 사용하여 여러가지 항목을 간편하게 정리 할 수 있다.
소스 코드
- src 속성에 이미지가 저장되있는 경로를 입력하여 이미지를 불러옴 (외부 이미지도 불러 올 수 있음)
- alt 속성은 이미지의 경로가 잘못됬을 시 나타나며 입력된 내용을 출력
- width, height 값을 입력하여 이미지의 크기를 고정
<body>
<ol>
<li><img src="../img/electronics-6801339_1920.jpg" alt="이미지깨짐" style="width: 100px;height: 100px;">첫번째 이미지 보기</li>
<li><img src="../img/laptop-6966045_1920.jpg" alt="이미지깨짐" style="width: 100px;height: 100px;">두번째 이미지 보기</li>
<li><img src="../img/mug-6966047_1920.jpg" alt="이미지깨짐" style="width: 100px;height: 100px;">세번째 이미지 보기</li>
</ol>
</body>
결과
A 태그와 IMG 태그를 활용한 실습
a 태그와 img 태그를 같이 쓰면 이미지를 누르면 페이지가 이동되게끔 설정 할 수 있다.
소스 코드
- ul 태그는 기본적으로 세로로 나열되기 때문에 list-style: none 속성을 사용하여 리스트 스타일을 제거 (가로정렬을 하기위해 사용)
- li 태그에 float: left 속성을 사용하여 3개의 이미지를 왼쪽 정렬
- padding-right: 5px 속성은 li 끼리 붙어 있어 이미지가 붙어 있는거 처럼 보여서 오른쪽으로 5px 띄어주기 위해 사용
<body>
<ul style="list-style: none;">
<li style="float: left;padding-right: 5px;">
<a href="https://www.naver.com">
<img src="../img/electronics-6801339_1920.jpg" alt="1번이미지깨짐" style="width: 100px; height: 100px;">
</a> <br> 네이버로 이동
</li>
<li style="float: left;padding-right: 5px;">
<a href="https://www.google.com">
<img src="../img/laptop-6966045_1920.jpg" alt="2번이미지깨짐" style="width: 100px; height: 100px;">
</a> <br> 구글로 이동
</li>
<li style="float: left;padding-right: 5px;">
<a href="https://www.daum.net">
<img src="../img/mug-6966047_1920.jpg" alt="3번이미지깨짐" style="width: 100px; height: 100px;">
</a> <br> 다음으로 이동
</li>
</ul>
</body>
결과
728x90
'HTML' 카테고리의 다른 글
| [HTML] input을 활용한 메뉴 탭 만들기 (0) | 2023.03.07 |
|---|---|
| [HTML] TABLE 태그 사용하여 입사지원서 만들기 (1) | 2023.02.28 |
| [HTML] 태그 및 VScode 단축키 정리 (0) | 2023.02.27 |
