<ol> 태그는 ordered list로서, 순서가 있는 목록을 의미한다.
1. Java
2. Python
3. C
이런 식으로 나타나게 된다.
<ul> 태그는 unordered list로서, 순서가 없는 목록이다.
- Java
- Python
- C
이런 느낌이다.
<li>는 list item으로, <ol>과 <ul> 태그의 하위속성으로서 한 아이템을 만들어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<h1> 다양한 언어들 </h1>
<div>
<ul>
<li><a href = "#"> Java </a> </li>
<li><a href = "#"> Python </a> </li>
<li><a href = "#"> C </a> </li>
</ul>
<ol>
<li> Java </li>
<li> Python </li>
<li> C </li>
</ol>
</div>
<div>
<h3> Java </h3>
<p>
안녕하세요. <b> Java </b> 입니다.
</p>
</div>
<div>
<h3> Python </h3>
<p>
안녕하세요. <i> Python <i> 입니다.
</p>
</div>
</div>
</body>
</html>
이렇게 나타난다. 티스토리를 하면서 느끼는건데
왜 들여쓰기가 자기 멋대로 계속 바뀌는건지...;;
무튼 이렇게 ul은 순서가 없이 나타나며, ol은 순서가 지정된다.
그 하위로서 list item인 li 태그로 하나씩 만들어줄 수 있다.
또, 글 중간에 있는 <b>는 bold로 글씨를 굵게 한다.
<i>는 이탤릭체를 나타낸다.
마지막으로, a 태그에 있는 "#"은 특별히 지정해주지 않아도
클릭할 수 있는 버튼의 형태가 된다. 즉.. 좋은 기능은 아니다.
이제 위의 코드를 가지고, 조금 더 그럴듯한 모양을 만들어보자.
먼저 알아둘 것이 있는데, 한 사이트를 가정하고 생각해보자.
1) header : 사이트명, 로고 등
2) nav : 사이트의 메뉴-하위메뉴
3) section : 문서의 내용부
4) article : 문서의 내용이 많은 경우, 세부적 구분
5) aside : 문서의 주 내용을 제외하고, section주변에 배치되는 나머지 영역들 (게시판 목록 등..)
6) footer : 사이트의 정보(주소, 전화번호), 저작권, 부가정보 등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<h1> 프로그래밍 언어 </h1>
<details>
<summary> 프로그래밍 언어 사이트 이동 </summary>
<nav>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">C</a></li>
</ul>
</nav>
</details>
</header>
<section>
<article style = "height : 250px">
<h3> Welcome to Java </h3>
<p>
<mark>System.out.println("Hello World!");</mark>
</p>
</article>
<article style = "height : 250px">
<h3> Welcome to Python </h3>
<p>
<mark style = "background-color : orange">print("Hello Python!");</mark>
</p>
</article>
<article style = "height : 250px">
<h3> Welcome to C </h3>
<p>
printf("Hello C");
</p>
</article>
</section>
<footer>
<address> Address : 500 ORACLE PKWY, REDWOOD CITY, CA 94065 </address>
</footer>
</body>
</html>
위 코드가 이렇게 표현된다.
<header>영역으로 사이트의 상부를 명시하고,
<details>태그로 세부 정보를 보이거나 숨길 수 있다.
<summary>는 그 세부 정보의 제목 기능을 한다.
<section>으로 문서의 내용부를 지정한 후,
<article>로 여러 단락으로 나눠준다.
<h> 태그나 <mark>태그로 강조하고 싶은 부분을
크고 굵게 표현하거나, 하이라이트 효과를 줄 수 있다.
<footer>는 한 사이트의 밑바닥 부분이며,
주소나 all rights reserved같은 글이 써있는 부분이다.
<address>태그를 통해서 아래 처럼 나타낼 수 있다.
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML5] <table> <td> <tr> <thead> <tfoot> 태그 (0) | 2020.06.22 |
|---|---|
| [HTML5] <audio> <video> <iframe> < embed> 태그 (0) | 2020.06.21 |
| [HTML5] <h> < img> <select> 태그 (0) | 2020.06.21 |
| [HTML5] <div>, <span>, <p>, <hr> 태그 (0) | 2020.06.21 |
| [HTML5] HTML 시작하기 2 (절대경로, 상대경로, A태그) (0) | 2020.06.21 |
