티스토리 뷰

Programming/HTML&CSS

[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그

Lkt_Programmer 2019. 3. 19. 22:47
반응형

웹 컨텐츠에서 제목을 작성하는 h 태그와 다른 웹페이지로 이동을 시켜주는 하이퍼링크 인 a태그에 이어서 오늘은 리스트 태그와 이미지 태그에 대해서 정리해보도록 하겠습니다.


[Programming/HTML&CSS] - [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자

[Programming/HTML&CSS] - [HTML5/CSS] HTML과 CSS 기초 개념 이해하기



  1. 리스트 태그 - <ul> 태그


html에서는 목록을 작성 할 수 있는 태그들이 있는데요. 먼저 ul 태그에 대해서 살펴 보겠습니다. 

ul 태그는 unordered list의 약자로 순서가 없는 리스트를 작성 할 때 사용됩니다. 순서가 없기 때문에 글머리 기호를 사용해서 나타내는게 특징입니다. <li> 태그의 경우는 <ul></ul> 사이에 정의되는 listItem으로 메뉴 항목 하나하나를 나타냅니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>리스트 태그</title>
</head>
<body>
    <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
        <li>Menu5</li>
    </ul>
</body>
cs


<ul></ul> 태그사이에 <li> 태그를 사용하여 List를 생성한 모습입니다. 리스트상에서 순서없이 글머리 기호를 통해서 표현 되고 있는 것을 확인 할 수 있습니다. 아래와 같이 ul의 type 속성값에 따라 다른 글머리 기호를 줄 수 있습니다. 각 속성값에 따른 글머리 기호는 아래와 같습니다.


  • "circle" => ○
  • "square" => ■
  • "disc" => ●

<ul> 태그안에 <ul> 태그를 사용하여 하위 메뉴 형식으로 작성 할 수 있습니다. 아래 코드를 참조해주세요.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>리스트 태그</title>
</head>
<body>
    <p>Menu List</p>
    <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
        <li>Menu5</li>
    </ul>
    <ul type = "circle">
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
        <li>Menu5</li>
        <p>SubMenu</p>
        <ul>
            <li>Sub Menu1</li>
            <li>Sub Menu2</li>
            <li>Sub Menu3</li>
        </ul>
    </ul>
    <ul type = "square">
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
        <li>Menu5</li>
    </ul>
</body>
cs


각각의 ul의 type 속성을 다르게주게 되면 위와 같이 다른 글머리 기호로 나오게 됩니다. 그리고 SubMenu의 경우 두 번째에 있는 ul 태그 아래에 ul 태그를 추가하는 방식으로 작성 하였습니다.




  2. 리스트 태그 - <ol> 태그


ol 태그는 ordered List의 약자로 순서가 있는 목록을 의미합니다. 바로 아래 코드를 참조 바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>리스트 태그</title>
</head>
<body>
    <p>Menu1</p>
    <ol>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
    </ol>
</body>
cs

<ol></ol> 태그 사이에 <li> 태그를 통해 list를 구성하고 있는 모습입니다. 실행하게 되면 아래와 같은 결과가 나옵니다.

<ul> 태그의 경우 글머리 기호가 붙어서 나온 반면 <ol> 태그에서는 순서대로 번호가 부여 된 것을 확인 할 수 있습니다. <ol> 태그에서도 type 속성값을 통해 번호를 부여하는 방식을 바꿀 수 있습니다.


  • "A" : 알파벳 순서로 리스트가 정의됩니다.

  • "I" : 로마 숫자로 리스트가 정의됩니다.

  • "1" : 숫자로 정의가 됩니다.  type 속성을 지정하지 않으면 default로 설정되는 값입니다.




  3. 이미지를 표현하는 <img> 태그


마지막으로 웹 페이지에 이미지를 나타나게 할 수 있는 <img> 태그입니다. 사용하는 방식은 간단합니다. 아래 html 코드를 참조 바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
</head>
<body>
    <img src ="./Images/00.png" />
</body>
</html>
cs


<img> 태그를 작성하고 src 속성의 값으로 이미지가 있는 경로를 넣어주면 됩니다. 뿐만 아니라 width / height 속성에 웹 페이지에 표시되고자 하는 이미지의 크기를 설정 할 수 있습니다. 아래 html 코드를 참조해주세요.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
</head>
<body>
    <img src ="./Images/00.png" width = "400" height = "200"/>
</body>
</html>
cs

<a> 태그 안에 <img> 태그를 넣어줌으로서 이미지에 하이퍼링크를 걸수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
</head>
<body>
    <a href ="http://www.naver.com">
        <img src ="./Images/00.png" width = "400" height = "200"/>
    </a>
</body>
</html>
cs

다음 포스팅에서는 <table> 태그에 대한 강좌를 진행 하겠습니다. 감사합니다.


반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[HTML5/CSS3] span 태그 & div 태그의 차이  (0) 2019.03.22
[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기  (0) 2019.03.21
[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 (<table> 태그)  (0) 2019.03.20
[HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자  (0) 2019.03.19
[HTML5/CSS] HTML과 CSS 기초 개념 이해하기  (0) 2019.03.18