Happy Everyday

목록 본문

태그에 대해서 한번 배워볼까요?

목록

쿠욱키 2005. 10. 29. 17:49
이제 하나하나 목록을 가리킬수 있는..태그를 넣어봅시다..
목록은..순서있는 목록과 순서 없는 목록으로 나눌수 있습니다. 순서있는 목록이란
<ol type=1>
<ol type=A>
<ol type=a>
<ol type=I>
<ol type=i>
와 같은 것들입니다. 그렇다면 순서 없는 목록은...
<ul type=square>
<ul type=disc>
<ul type=circle>
입니다. 위에 보시면 이해가시져??? 보통...순서있는 목록을 쓸때는 <ol>을 쓰고..순서 없는 목록을 쓸때는 <ul>을 씁니다. 두리 바꿔서 쓰셔두 상관은 없습니다. 즉 <ul type=1>이렇게 쓰셔도 되져~!! 그런데...여기서..<ol type=1>만 쓰시면 리스트는 나오지 않게 됩니다. 그냥 들여쓰기 된것처럼만 보이죠

<ol type=1>




    가 나 다 라

왼쪽 같이..태그를 쓴다해도..결과는 오른쪽에 보이는 것처럼 되는거져~!! 보시면 들여쓰기만 되어 있담미돠.. 그래서....우리는 리스트를 보여줘라 해서...ol과 ul을 쓴 다음은 꼭 <li>을 같이 씁니다.
아래를 보세여~!!


<ol type=1> <li>가 <li>나 <li>다 <li>라

이해가시나여??? type지정은 사용자가 원하는것을 해 주시면 되구여... <li> 안에 type을 지정하셔도 상관 없습니다.


<ol> <li type=A>가 <li type=A>나 <li type=A>다 <li type=A>라

결과는 똑같이 나옵니다. 항상 기본은 1,2,3,4로 되어있습니다. type을 지정 안하시면 당연히 기본값으로 나오겠져...
그럼 아래 예를 한번 보세여~!! ^^:;

Tag

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/4875034","DEFAULT_URL":"https://pshto.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875034,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "4JFaMEMxu3UByuvsjB6LaJDkku4FaSXNgZjPhy+ZyTwZQ9hDE/RK8+yjgVU93WHI" }; var servicePath = ""; var blogURL = "";</script> <title>목록</title> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875034"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/4875034","name":null},"url":"https://pshto.tistory.com/4875034","headline":"목록","description":"이제 하나하나 목록을 가리킬수 있는..태그를 넣어봅시다.. 목록은..순서있는 목록과 순서 없는 목록으로 나눌수 있습니다. 순서있는 목록이란 &amp;lt;ol type=1&amp;gt; &amp;lt;ol type=A&amp;gt; &amp;lt;ol type=a&amp;gt; &amp;lt;ol type=I&amp;gt; &amp;lt;ol type=i&amp;gt; 와 같은 것들입니다. 그렇다면 순서 없는 목록은... &amp;lt;ul type=square&amp;gt; &amp;lt;ul type=disc&amp;gt; &amp;lt;ul..","author":{"@type":"Person","name":"쿠욱키","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2005-10-29T17:49:53+09:00","dateModified":"2005-10-29T17:49:53+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/script/common.js"></script> </head> <body> 1. 단축아이콘 만들기<p> <ol> 빠른 실행을 위해 바탕화면상에 만든 아이콘. </ol> <ol type=A> <li> 단축아이콘 만들기 <ul type=square> <li> 윈도우용 응용프로그램 <ol type=1> <li> 시작단추로 이동하여 마우스 오른쪽 버튼을 클릭. <li> 마우스를 열기에 위치시키고 클릭. <li> 시작메뉴 창의 프로그램 더블클릭. <li> 각종 응용 프로그램이 보이면 원하는 응용프로그램을 선택하여 더블클릭. <li> 해당 아이콘을 클릭한 후 마우스 오른쪽 버튼을 누르고 바탕화면으로 끌기. <li> 바로가기 메뉴중 여기에 바로가기 만들기 선택. <li> 바탕화면에 바로가기 메뉴로 등록된것을 알수 있다. </ol> <li> 도스용 응용프로그램 <ol type=1> <li> 내컴퓨터 실행. <li> C:로 더블클릭. <li> 단축아이콘 만들 위치로 이동. 예) 한글97 : c:\hnc\hwpw.exe <li> 실행파일 클릭한 후 마우스 오른쪽 버튼을 누르고 바탕화면으로 끌기. <li> 바로가기 메뉴중 여기에 바로가기 만들기 선택. <li> 바탕화면에 바로가기 메뉴로 등록된것을 알수 있다. </ol> </ul> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875034","customProps":{"userId":"0","blogId":"5625759","entryId":"4875034","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875034","entryTitle":"목록","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/4875034","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>
실행결과

1. 단축아이콘 만들기

    빠른 실행을 위해 바탕화면상에 만든 아이콘.
  1. 단축아이콘 만들기
    • 윈도우용 응용프로그램
      1. 시작단추로 이동하여 마우스 오른쪽 버튼을 클릭.
      2. 마우스를 열기에 위치시키고 클릭.
      3. 시작메뉴 창의 프로그램 더블클릭.
      4. 각종 응용 프로그램이 보이면 원하는 응용프로그램을 선택하여 더블클릭.
      5. 해당 아이콘을 클릭한 후 마우스 오른쪽 버튼을 누르고 바탕화면으로 끌기.
      6. 바로가기 메뉴중 여기에 바로가기 만들기 선택.
      7. 바탕화면에 바로가기 메뉴로 등록된것을 알수 있다.
    • 도스용 응용프로그램
      1. 내컴퓨터 실행.
      2. C:로 더블클릭.
      3. 단축아이콘 만들 위치로 이동. 예) 한글97 : c:\hnc\hwpw.exe
      4. 실행파일 클릭한 후 마우스 오른쪽 버튼을 누르고 바탕화면으로 끌기.
      5. 바로가기 메뉴중 여기에 바로가기 만들기 선택.
      6. 바탕화면에 바로가기 메뉴로 등록된것을 알수 있다.


가지런히..잘 표현 됐습니다. 목록 태그를 잘 쓰시면 표현하고자 하는 웹페이지를 깔끔하게 처리할수 있습니다.

'태그에 대해서 한번 배워볼까요?' 카테고리의 다른 글

선만들기  (0) 2005.10.29
목록만들기  (0) 2005.10.29
<XMP>  (0) 2005.10.29
<PRE>  (0) 2005.10.29
글자마무리  (0) 2005.10.29