html_li_ul_ol

이번 포스팅은 html중에서, 리스트를 표현하는 태그인 li, ul, ol에 대한 내용입니다.

웹문서를 보다보면 아래의 화면과 같은, 요소들을 많이 보셨을 것입니다. 필자는 about google의 상단부분을 예로 들겠습니다.

구글 어바웃의 상단 화면의 소스를 보면, 아래의 이미지와 같습니다.

ul, li, ol은 html로 웹을 표현할때, 일반적인 리스트를 나타내는것과, 위의 화면과 같이 카테고리 메뉴의 기능을 하는 것에도 많이 쓰입니다. 스크립트의 표현 방법이 세월이 갈수록 발전을 하여, 요즘은 다른 방식으로도 카테고리 메뉴와 리스트를 표현하는 방식도 있다고 합니다. ul, li, ol은 상단과, 본문 내용을 표현하는 것뿐만이 아니라, 하단요소의 다양한 메뉴들을 표현하는데도 쓰입니다. 예를들어서, 이용약관, 개인정보처리방침, 고객센타와 같은 메뉴들이 하단에 많이 나열되어 있을때 쓰입니다. 웹페이지에서 한 레이아웃안에 제목과 하위요소들이 많을때 주로 사용된다고 보면 됩니다. <p>태그나, <div>태그, 기타 다른 태그를 여러번 써서 나타내도 됩니다. 하지만, 외부스타일을 태그에 줄때의 용이성과, 그에 따른 html의 용량을 줄일 수 있어서 많이 사용됩니다.

● 아래의 태그를 잘 살펴보세요. li, ul, ol태그의 표현 방식입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_ul_ol_li</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h3>ul list</h3>
<ul>
<li>행운월드</li>
<li>행운공장</li>
</ul>

<h3>ol list</h3>
<ol>
<li>행운월드</li>
<li>행운공장</li>
</ol>

</body>
</html>

● 위의 태그는 아래의 이미지처럼, 웹화면에 나타납니다.

● 위의 이미지를 보면, 알 수 있듯이, ul과 ol은 리스트의 앞머리 부분의 표현 방식을 나타내고, li태그는 리스트를 나타냅니다. ul은 리스트 앞머리 부분이 둥근점으로 표기되고, ol은 숫자로 표기됩니다. 별다른 스타일을 주지 않을때 기본적으로 편하게 사용될 수 있습니다. 만약에 앞머리부분의 요소없이 순수하게 리스트만 요이게 하고 싶다면, 아래의 html처럼 해보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_ul_ol_li</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h3>ul list</h3>
<ul>
<li style="list-style:none;">행운월드</li>
<li style="list-style:none;">행운공장</li>
</ul>

<h3>ol list</h3>
<ol>
<li style="list-style:none;">행운월드</li>
<li style="list-style:none;">행운공장</li>
</ol>

</body>
</html>

● 위의 html에 style로 리스트의 스타일을 none로 했을때, 아래의 이미지처럼 화면에 나타납니다.

● 그런데, 리스트를 활용할때는 맨상단에 어바웃구글의 카테고리 메뉴들처럼, 세로가아닌, 가로로 표현을 많이 하기 때문에, 가로로 li태그를 표현하고 싶을때는 style을 더 주어야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_ul_ol_li</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h3>ul list</h3>
<ul>
<li style="list-style:none;display:inline;">행운월드</li>
<li style="list-style:none;display:inline;">행운공장</li>
</ul>

<h3>ol list</h3>
<ol>
<li style="list-style:none;display:inline;">행운월드</li>
<li style="list-style:none;display:inline;">행운공장</li>
</ol>

</body>
</html>

● 위의 태그를 보시면, 리스트 스타일에 "display:inline;"가 추가된 것을 확인할 수 있습니다. "display:inline;"가 있을때는 아래 이미지처럼 화면에 나타납니다. 리스트가 세로로 보여지던것이, "display:inline;"로 인해서 가로로 표현되어진것을 확인할 수 있습니다.

● 그런데, 위에 html태그에서 li에 style을 내부스타일로만 적용을 하니, 태그의 길이가 길어집니다. 이럴때는 현재의 html문서내부에 style을 별도로 주거나, 외부파일에 링크주소로 style을 표현하면, 좀 더 효율적으로 html을 표현할 수 있습니다. 이번 포스팅에서는, 현재화면의 html내부에 별도로 style을 주는것을 해보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_ul_ol_li</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
li {list-style:none; display:inline;}
</style>

</head>
<body>

<h3>ul list</h3>
<ul>
<li>행운월드</li>
<li>행운공장</li>
</ul>

<h3>ol list</h3>
<ol>
<li>행운월드</li>
<li>행운공장</li>
</ol>

</body>
</html>

● 위의 html이 화면에 보여지는것은 아래의 이미지와 같습니다. html태그 자체에 넣었던, style을 head태그에 style을 별도로 만들었습니다. 태그를 보면 알 수 있듯이, "li {list-style:none; display:inline;}"으로 표기되었습니다. 여기서, li는 <body>태그 안의 모든 li를 뜻합니다. 그래서, "li {list-style:none; display:inline;}"는 모든, li를 "list-style:none; display:inline;"으로 표현하라는 뜻입니다.

● 아래의 태그도 참고해 보세요. li태그에 링크와 몇가지 style을 추가했습니다. a태그로 링크를 넣게되면, 나타나는 언더라인을 안보이게 하고, 글씨색상과 배경색상을 주고, 폰트의 크기와 굵기도 수정해 보았습니다. 그리고, 리스트요소에 마우스를 올려놓았을때의 상태도 표현해 보았습니다. 이 style들을 설명하려면, 무한정 포스팅의 길이가 길어지니, 오늘은 여기까지만 하겠습니다. li태그를 다양하게 표현하는 방식이 많이 있으니, 궁금하신 분들은 검색과 유튜브를 많이 사용해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_ul_ol_li</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
li {list-style:none; display:inline; background:#eeeeee; font-size:20px;padding:5px 10px;}
li a {text-decoration:none;color:#ff5252;font-weight:bold;}
li:hover {background:#ffcdd2;}
a:hover {color:#00bcd4;}
</style>

</head>
<body>

<h3>ul list</h3>
<ul>
<li><a href="https://hhwd.tistory.com/" target="_blank">행운월드</a></li>
<li><a href="https://hhgongjang.tistory.com/" target="_blank">행운공장</a></li>
</ul>

<h3>ol list</h3>
<ol>
<li><a href="https://hhwd.tistory.com/" target="_blank">행운월드</a></li>
<li><a href="https://hhgongjang.tistory.com/" target="_blank">행운공장</a></li>
</ol>

</body>
</html>

▶ 위의 태그를 웹화면에서 확인해 보고 싶다면, 아래 링크를 클릭해 보세요.

html_ul_ol_li

hhgongjang.cafe24.com

저작자표시

'코딩' 카테고리의 다른 글

html_span 태그 (0)	2020.10.28
html_div 태그 (0)	2020.10.21
html_링크 태그_target (0)	2020.10.09
html_주석_color(주석처리와 색상코드) (0)	2020.10.01
html_b_strong_ins(텍스트 표현 서식들) (0)	2020.09.21

행운월드

html_li_ul_ol_태그

'코딩' 카테고리의 다른 글

댓글

티스토리툴바

html_li_ul_ol_태그

'코딩' 카테고리의 다른 글

관련글

댓글

티스토리툴바