Multi Developer SuHo

HTML 링크 태그, 리스트 태그 본문

html5+CSS3

HTML 링크 태그, 리스트 태그

Dreaming Developer Student 2024. 2. 1. 16:08
SMALL

안녕하세요~ 벌써 2024년 한 달이  순식간에 지나간 것 같죠? 저도 그렇게 느끼고 있습니다.  여러분들도 몸 건강, 하고싶은 일들 이루시길 바랍니다.


글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


오늘은 HTML 링크 태그,  리스트 태그에 대해 알아보겠습니다.  먼저 리스트 태그 부터 살펴보도록 하겠습니다.

리스트 태그 -  목록을 생성하는 블록 태그를 의미 
HTML에서는 크게 2가지 형태의 리스트 태그를 제공하는데, 그것은 순서있는 리스트(ordered list)와 순서없는 리스트(unordered list)입니다.
1. 순서있는 리스트(ol): <ol> 태그를 사용하여 만들며, 각 항목은 <li> 태그로 구성됩니다. 목록의 각 항목 앞에는 자동으로 번호가 붙습니다.
2. 순서없는 리스트(ul): <ul> 태그를 사용하여 만들며, 각 항목은 마찬가지로 <li> 태그로 구성됩니다. 목록의 각 항목 앞에는 자동으로 불릿(bullet)이 붙습니다.

 

다음은 리스트 태그를 적용한 소스코드와 실행결과 입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
  <ul>
    <li>이탈리아</li>
    <li>스페인</li>
  </ul>
  <ol>
    <li>대한민국</li>
    <li>독일</li>
  </ol>
</body>
</html>

 


<ul> 태그와 <ol> 태그의 차이점이 보이시나요?
 - <ul> 태그는 순서없이 나열되어 있고, <ol> 태그는 숫자가 붙어서 순서를 명확하게 구분해주는 결과를 가져오게 됩니다.
리스트 태그는 다양한 곳에서 사용됩니다.
1. 메뉴와 서브메뉴
2. 콘텐츠 목록

3. 카테고리

4. 글 목록 
5. 사이드바 
다양한 곳에서 리스트 태그를 활용하여 웹 페이지를 구조화하고, 사용자에게 정보를 효과적으로 제공해줍니다. 

다음은 링크 태그입니다.

링크 태그-  HTML에서 다른 웹페이지로 이동할 수 있는 하이퍼링크를 만드는 데 사용합니다.
웹 문서에서 링크를 생성할 때는  인라인 태그인 <a> 태그를 사용하고, <a> 태그는 href라는 속성을 가지며, 이 속성의 값으로 이동하려는 웹페이지의 URL을 지정합니다. 


링크 태그를 활용한 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <a href="https://www.naver.com/">네이버 사이트</a>
</body>
</html>

 

실행결과

이렇게 "네이버 사이트" 라는 텍스트가 보입니다. 텍스트는 링크로 표시되어 있고 클릭을 하게 되면 설정한 URL로 이동하는 것을 보실 수 있습니다. 

또 다르게 

<a> 태그는 target 속성을 가질 수 있는데요,
target 속성은  HTML에서 <a> 태그(링크 태그)와 함께 사용하여 링크를 클릭했을 때 해당 페이지가 로드될 위치를 지정하는 역할을 합니다.  

예를들어  "_blank" 이 속성 값을 설정하면, 링크를 클릭했을 때 새 창이나 탭에서 해당 페이지가 열립니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <a href="https://www.naver.com/"target="_blank">네이버 사이트</a>
</body>
</html>


속성 값을 따로 지정하지 않으면 _self 로  속성이 적용되어 현재 페이지에서 열리게 됩니다.

글 읽어주셔서 감사합니다. 댓글에 피드백 부분이나 말씀하실 부분 있으시면 언제나 달아주시면 답글 해드리겠습니다!! 

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

HTML <div>, <span> 태그 & class and id  (0) 2024.02.04
HTML 이미지<img>, 비디오<video>, 오디오 태그<audio>  (0) 2024.02.03
HTML 주석 처리, 인라인 태그, 블록 태그  (0) 2024.01.29
HTML 제목, 문단, 서식 태그  (0) 2024.01.29
HTML 기본 구조  (0) 2024.01.26
'html5+CSS3' Related Articles more