HTML기초, 순서와 목록을 만드는 태그

---

HTML기초로 순서와 목록을 만드는 태그에 대해서 배워보도록 하겠습니다. 문서를 작성 할 때 보통 순서를 나타내거나 메뉴 목록을 나타낼 때에 1. 2. 3. ●,●,● 과 같은 기호로 나타냅니다. 웹 상에서는 이 부분을 하나의 묶음으로 생각하고 만들어줍니다. 여기서 ● 처럼 순서가 필요없이 목록만 나열할 경우에는 <ul> 태그를 사용하고 순서가 필요한 것은 <ol> 태그를 사용합니다.

 

순서와 목록을 만드는 방법은 <ol> <ul> 태그를 사용합니다. 그리고 <li>태그를 이용해서 각 순서를 만듭니다.

 

<ol> 태그는 order list의 약자로 순서가 있어서 a,b,c 또는 1,2,3, 속성값에 따라서 달리 할 수 있습니다.

<ul> 태그는 unorder list의 약자로 순서가 없어서 ● 처럼 표시 됩니다.

 

자세한 사용법은 아래의 이미지를 보고 알려드리겠습니다.

 

 

<ul> unorder list로 순서가 없는 목록을 출력합니다. 태그들의 마지막 끝 맺음으로 반드시 </ul> 형식이 필요합니다. 큰 틀로 보았을 때 ul 태그 내에는 목록이 참석자와 일정 두가지가 존재합니다. 그리고 소 목록으로 <ol> 태그를 이용하여 순서를 넣어 보았습니다.

<ol>태그에는 순서가 존재하기 때문에 숫자로할지 영어로할지 로마어로 할지 선택할 수 있습니다. 기본값은 숫자이므로 따로 설정하지 않아도 됩니다. 설정할 때에는 <ol type="속성값">을 입력하면 됩니다.

 

 

아래는 <ol> 태그에 사용하는 속성값입니다.

 

숫자(기본값)	1
영문 소문자	a
영문 대문자	A

 

컴퓨터 프로그래밍 언어를 비롯한 모든 컴퓨터 프로그램을 배우는 것은 무조건 직접 써보고 만들어 보는 것이 가장 습득이 빠르고 다음에도 잊어먹지 않고 계속해서 이용하고 써먹을 수 있습니다. HTML을 배우면서 어떻게 보면 쉬운것 같은데 또 직접 사용해보면 어려웠습니다. 블로그를 통해서 HTML을 배우시는 분들은 꼭 직접 몇번은 해보는 것을 추천합니다.

 

 

결과 화면을 보고 어떻게 출력이 되었나 비교해보면서 공부하겠습니다.

 

 

<ul> 태그를 사용한 (참석자)와 (일정)은 ●형식으로 표시 되어서 순서가 만들어 지지 않았고, <ol> 태그를 사용한 (홍길동)(김영숙) 등은 순서가 만들어졌습니다. 주의할 점은 항상 태그 마지막에 </> 닫는 태그를 꼭 해주어야 마무리가 됩니다.

 

HTML 기초를 공부하면서 재미도 있고 은근히 헷갈리는 부분이 있는데요. 차근차근 하나하나씩 공부해 보도록하겠습니다. 배우고 있는 단계에서 포스팅을 하면서 저의 실력도 늘려 나가겠습니다. HTML은 티스토리 블로그를 운영할 때 꼭 알아야하는 필수 요소로 자신의 홈페이지를 예쁘게 꾸미기 위해서는 꼭 알아야하는 웹언어입니다. 함께 공부하며 알아갑시다^^