텍스트나이미지등을정리하여리스트화하거나카테고리등으로묶어자주사용되는중요한<ul>~</ul> <ol>~</ol>태그에 대하여 간단하게 설명하고자 합니다.
1. 비주얼스튜디오에서 HTML 목록태그 (<ul>~</ul> <ol>~</ol>태그) 코딩
<ul>~</ul> 태그는 unorderlist의 약자로 순서가 없는 목록을 만들 때사용되며,<ul>태그내부에 <li>요소(list item)를 포함하여 각항목을 표시합니다. 대부분의 브라우저에서 리스트에는 원과 같은 불릿(bullet)으로표현됩니다.
<ol>~</ol> 태그는 orderlist의 약자로 순서가 있는 목록을 만들 때 사용되며, <ul>태그와 같이 내부에<li>요소(list item)를포함하여 각 항목을 표시합니다. 대부분의 브라우저에는 리스트가 기본값이 숫자로 표현되며 속성을 지정하여 변경이 가능합니다. <ol>에서는 type, start, reserved와 같은 속성을 사용할 수 있습니다.
- type : 목록에 사용될 마커를 지정하며,속성값으로 1(숫자/기본값), a(영어소문자), A(영어대문자), i(로마숫자소문자), I(로마숫자대문자)으로지정가능합니다
- start : 시작목록의 순번을지정하며,속성값 숫자로 순번을 지정합니다
- reserved : 항목을 역순으로 표시합니다
----------
----------
2. HTML 목록 태그(<ul>~</ul> <ol>~</ol>태그) 코딩방법 : body 안에서 작성해야 합니다.
01) 1박2일 제주도 여행코스를 제목을 가장 큰 글자로 만듭니다. : <h1> 1박2일 제주도 여행코스</h1>
02) body 안에 <ul>~</ul>태그를 만듭니다
03) 만들어진 ul 태그안에 리스트 태그 <li>~</li>를 사용하여 첫번째 목록을 1일차 제주도 여행코스, 2일차 여행코스 목록을 만듭니다.
04) 1일차 제주도여행코스 리스트를 만듭니다. 리스트는 순서있는 태그인 <ol>~</ol>태그로 속성은 a, b.c..로 시작하는 속성으로 우도관광, 잠수함관광, 유채꽃 관광의 리스트를 만듭니다
05) 이번에는 2일차 제주도여행코스 리스트를 만듭니다. 리스트는 순서있는 <ol>~</ol>태그이지만, 1,2.3..로 시작하는 속성으로 바꾸어 한라산 등정, 조각공원 관광, 유채꽃 관광의 리스트를 만듭니다
06) HTML 작성이 완료되었으면 단축키인 Ctrl+S 눌러 저장을 합니다
3. 크롬 웹브라우저에서 보이는 목록 태그(<ul>~</ul> <ol>~</ol>태그)
HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다. . 1박2일 제주도 여행코스는 가장 큰 글자인 h1으로 제일 큰 글씨로 굵고 강하게 보이고, 1일차, 2일차 제주도 여행코스는 순서가 없는 리스트로 보이고, 세부항목인 1일차 제주도 여행코스리스트에는 a,b,c 순서로 보이며, 2일차 제주도 여행코스는 1,2,3 순서로 보이는 것을 확인 할 수 있습니다
