웹 프로그램

코스 전체목록

닫기

목록

목록이란?

목록이란 연관된 항목들을 열거할 때 사용한다. 리스트 전체는 <ol>이나 <ul> 태그로 감싸고 각각의 항목들은 <li> 태그로 표현한다.

문법(Syntax)

순서가 없는 리스트 (Unordered List)

<ul>
    <li>항목</li>
</ul>

순서가 있는 리스트 (Ordered List)

<ol>
    <li>항목</li>
</ol>

설명(Description)

  • 연관되어 있는 항목들을 나열할 때 사용
  • 순서가 없는 항목은 ul(unordered list), 순서가 있는 항목은 ol(ordered list)를 사용한다.
  • CSS와 함께 사용해서 메뉴로도 사용된다.

예제(Example)

example1. 순서가 없는 리스트 (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <ul>
            <li>table</li>
            <li>ol</li>
            <li>body</li>
            <li>img</li>
        </ul>
    </body>
</html>

example2. 순서가 있는 리스트 (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <ol>
            <li>html</li>
            <li>css</li>
            <li>javascript</li>
            <li>os</li>
            <li>php</li>
            <li>database</li>
        </ol>
    </body>
</html>

example3. 아래 예제는 리스트와 리스트를 중첩해서 사용한 예를 보여준다. (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<ol>
		    <li>html
		    	<ol>
		    		<li>수업</li>
		    		<li>사전</li>
		    		<li>쿡북</li>
		    	</ol>
		    </li>
		    <li>css</li>
		    <li>javascript</li>
		    <li>os</li>
		    <li>php</li>
		    <li>database</li>
		</ol>
	</body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. wwwe
    http://www.adidaseqts.com
    http://www.yesyeezy.shop......tml
    http://www.curry5.us.com
    http://www.goldengoose-sneakers.com
    http://www.yesyeezy.shop......tml
    http://www.nfljerseys.us.org
    http://www.nikereact.org
    http://www.goldengoose.us.com
    http://www.yslhandbags.net
    http://www.adidasyeezy.co.uk
    http://www.curry4shoes.us.com
    http://www.yeezysuk.com
    http://www.jordansshoes.us.org
    http://www.yesyeezy.shop......tml
    http://www.michaelkors-outletstore.com
    http://www.adidasgazelle.us.com
    http://www.nike-hyperdunk.us.com
    http://www.chromeheartsstore.us
    http://www.valentinos.us.com
    http://www.bapehoodie.us
    http://www.yesyeezy.shop......tml
    http://www.converseoutlet.us.com
    http://www.nhljerseys.us.org
    http://www.canada--goose.co.uk
    http://www.redbottom-shoes.us.com
    http://www.filashoes.org
    http://www.fakerolex.us.com
    http://www.vans-shoes.us.org
    http://www.yesyeezy.shop......tml
    http://www.fila-shoes.us.com
    http://www.hermesonlineshop.com
    http://www.hardenshoes.us.com
    http://www.outletmichael-kors.us.com
    http://www.jordan13.us.com
    http://www.adidas-tubular.us.com
    http://www.golden-goose.us.com
    http://www.curry4.us.com
    http://www.guccibelt.us.com
    http://www.hermes-birkin.us.com
    http://www.goyard-handbags.us.com
    http://www.shoesjordan.us.com
    http://www.nikeairforce1.us.com
    http://www.jordanssneakers.us.com
    http://www.adidasstansmith.uk
    http://www.offwhiteclothing.us.com
    http://www.adidasultraboost.us.org
    http://www.monclerjacket.net
    http://www.fitflops-saleclearance.us.com
    http://www.longchamphandbagsoutlets.com
    http://www.longchamphandbagsonlines.com
    http://www.kobesneakers.com
    http://www.yeezy-500.us.com
    http://www.jordanshoes.org.uk
    http://www.lebron16.us
    http://www.polosralphlaurenuk.com
    http://www.hermes-belt.us.com
    http://www.hermes-handbags.us.com
    http://www.offwhitehoodie.us.com
    http://www.yesyeezy.shop......tml
    http://www.calvinkleinoutlet.us.com
    http://www.birkinbag.us.com
    http://www.pandorabracelet.in.net
    http://www.monclerjackets.us
    http://www.goyardbags.us
    http://www.jordansforcheap.us.com
    http://www.yeezysshoes.us.com
    http://www.mbtshoesonline.com
    http://www.goyardhandbags.org
    http://www.nikesneakers.us.com
    http://www.cheap-airjordans.us.com
    http://www.nike-airmax2017.us.com
    http://www.yesyeezy.shop......tml
    http://www.kd11.us
    http://www.paulgeorgeshoes.us.com
    http://www.offwhite.us.com
    http://www.jimmychoo-shoes.us.com
    http://www.outletonline-michaelkors.us.org
    http://www.nikeflyknit.us.com
    http://www.yeezy-boost.us.com
    http://www.yeezyshoesuk.com
    http://www.nike-roshe.us.com
    http://www.hermeshandbags.us.org
    http://www.nike-shox.us.com
    http://www.adidasoutletonline.com
    http://www.vans-outlet.us.com
    http://www.michaelkors-outletfactory.us.org
    http://www.outlettimberland.us.org
    http://www.yeezy-shoes.org.uk
    http://www.cheapnbajerseyswholesales.us.com
    http://www.kobebasketballshoes.net
    http://www.adidasstansmith.us.com
    http://www.supremehoodie.us.com
    http://www.yeezyboost-350.uk
    http://www.michael--korsoutlet.us.org
    http://www.airmax270.us.com
    http://www.yesyeezy.shop......tml
    http://www.jordan-retro.us.com
    http://www.long-champhandbags.org.uk
    http://www.kd11.us.com
    http://www.air-max.us.com
    http://www.jordan6.us.com
    http://www.michael-kors-handbags.com.co
    http://www.yeezy-boost350.us.com
    http://www.yesyeezy.shop......tml
    http://www.coachsonline.us.com
    http://www.yesyeezy.shop
    http://www.nikejordans.us.com
    http://www.ultraboost.us.com
    http://www.yeezyboost.in.net
    http://www.yeezyboost.com.co
    http://www.linksoflondonus.com
    http://www.nikecortez.us.com
    http://www.asicsgelkayano.us.com
    http://www.coachoutletstorefactory.com
    http://www.mlbjerseys.in.net
    http://www.curry5.us
    http://www.airmax90.us.org
    http://www.ferragamobelt.us.org
    http://www.nikepolo.us
    http://www.michaeljordanshoes.us.com
    http://www.outletlacoste.us.com
    http://www.michael-korsoutlets.us
    http://www.off-whiteshoes.us.com
    http://www.chromehearts.com.co
    http://www.adidas-nmds.us.com
    http://www.yeezy-shoes.us.org
    http://www.jordan12.us.com
    http://www.jordan4.us.com
    http://www.nikefoamposite.us.com
    http://www.katespadehandbags-outlet.us.com
    http://www.adidasnmduk.com
    http://www.toryburchs.us
    http://www.yeezy500.us
    http://www.kobeshoes.uk
    http://www.asics-shoes.us.org
    http://www.adidasyeezys.us
    http://www.coachoutletssale.com
    http://www.filas.us.com
    http://www.kyrieirving-shoes.us.com
    http://www.linksoflondon.us.com
    http://www.nikereact.us.com
    http://www.ferragamobelt.us
    http://www.nikebasketballshoes.us.com
    http://www.lebronjames-shoes.us.com
    http://www.goldengoosesneakers.us
    http://www.yeezy-shoes.org
    http://www.adidasyeezys.us.com
    http://www.nikeairmax2019.us.com
    http://www.kyrie4.org
    http://www.fila.us.org
    http://www.yesyeezy.shop/offwhite-x-nike-air-presto-black-aa3830002-p-291.html
    http://www.nikehuaracheshoes.us.com
    http://www.goyard.us.com
    http://www.adidasiniki.us
    http://www.adidas-pureboost.us.com
    http://www.yesyeezy.shop/adidas-yeezy-boost-350-v2-cream-white-cp9366-p-423.html
    http://www.kd-10.us
    http://www.yeezy700.us.com
    http://www.reebokoutlet.us.org
    http://www.monclersoutlet.us.com
    http://www.lacosteonlineshop.us.com
    http://www.michaelkorsoutletonlineus.com
    http://www.kobe-shoes.us.com
    http://www.kevindurant-shoes.us.com
    http://www.jordan11retro.us.com
    http://www.yeezy-shoes.ca
    http://www.coachoutletsfactory.com
    http://www.handbagsmichaelkors.com
    http://www.yesyeezy.shop/supreme-x-nike-air-more-uptempo-varsity-redwhite-902290600-p-592.html
    http://www.goldengoose-sneakers.us
    http://www.hoganoutletonline.us.com
    http://www.adidas-crazyexplosive.us.com
    http://www.nike-huarache.com
    http://www.vapormaxshoes.us
    http://www.michaelkors-outletonlines.us.com
    http://www.airjordanretro.uk
    http://www.yesyeezy.shop/balenciaga-17fw-triple-s-black-pink-women-sneaker-483523w06e38080-p-618.html
    http://www.balenciagashoes.us.com
    http://www.adidassuperstar.us.com
    http://www.michael-kors-handbags.org.uk
    http://www.lacostepolosshirts.com
    http://www.lebron16.us.com
    http://www.caterpillarboots.us.com
    http://www.nikeair-max.us.com
    http://www.goyardhandbags.us.com
    http://www.balenciagashoes.us.org
    http://www.yeezyboost-350v2.us.com
    http://www.adidaszxflux.com
    http://www.adidasnmds.com
    http://www.lebron15.net
    http://www.kyrie3.us.com
    http://www.adidasshoesonline.com
    http://www.coachoutlets.name
    http://www.nikeairmax2018.us.com
    http://www.hermesbelts.com
    http://www.balenciaga.us.com
    http://www.lebron16.net
    http://www.goldengoose-outlet.us.com
    http://www.hermesbelts.co.uk
    http://www.retro-jordans.us.com
    http://www.chromehearts.name
    http://www.rolex-replica.us.com
    http://www.goldengooseoutlet.us
    http://www.louboutinshoes.uk
    http://www.yeezyboost350v2shoes.us.com
    http://www.offwhitexjordan1.com
    http://www.yeezyboost350v2.org.uk
    http://www.lacostepolo.us.com
    http://www.russellwestbrookshoes.us.com
    http://www.yeezy-boosts.us.com
    http://www.longchamp-bags.us.org
    http://www.long-champ.us.com
    http://www.bape-hoodie.us.com
    wwwe
  2. NAMO
    감사합니다!
  3. JustStudy
    고맙습니다
  4. 김명수
    너무 감사합니다 항상~^^
  5. example 3 에서 예제코드가 jsfiddle 결과(HTML)에 올바로 반영이 되지 않았네요. <ol> 및 </ol> 부분이 <ul> 및 </ul>로 되어 있어요...
  6. 이승훈
    리스트 유용하네요~
  7. 보현
    감사합니다!! 목소리 참 좋으시네요 ^_^
  8. 코코
    강의들으니깐 정말 도움이 됩니다! 감사합니다!
  9. jerry
    좋은강의 감사합니다. 항상 많은 도움이 됩니다.
  10. juok09
    list-style 으로 모양 설정 가능합니다. 이미지링크로도 설정할 수 있그여
    대화보기
    • 예제 3번에서 리스트를 중첩해서 사용했는데, 'html'이라는 문구를 클릭 했을 때 그 하위 리스트가 나타났다 사라졌다 하는 기능은 어떻게 부여하는지 궁금합니다.
    • 정윤호
      감사합니다
    • 가온누리
      ol, ul에 type으로 모양을 설정할 수 있는 부분을 보통 CSS로 설정하는지 궁금합니다.
    • 어부바
      감사합니다.
    • BaePro
      항상 강의 잘 보고있습니다^^

      덕분에 많은것을 또 얻어갑니다~

      좋은하루되세요^^
    • YellowBall
      목록(2/2) 잘 들었습니다.
      li의 안에 ol을 넣으면 저렇게 되는 줄 몰랐내요. 2015/4/23
    • creep860
      아직은 어색한게 많은 초보이지만, 덕분에 너무 재미있게 잘 배우고갑니다^^
    • 양미연
      새해 복 많이 많이 받으세요~
      예제3번 수업,사전,쿡북이 들여쓰기? 띄어쓰기? 되어있는건 어떤방식인지요 ^^;;
      공부하는 재미에 연휴에도 강의를 거르질 못하겠네요~
    • 야곱
      플랭님의 의견에 전적으로 동감합니다. 선생님에 따라 이렇게 HTML이 재미있을 수 있네요.
    • 야곱
      플랭님처럼 저도 참 재미있네요. 선생님에 따라 죽은 문자가 살아나는 느낌이네요.
    • 플랭
      진짜 Html 은 처음에 너무 재미없을것 같았는데 왜이리 재미있는지 몰것어욤 ㅋㅋ
    • Frank
      고맙습니다.:)
    • 유형찬
      감사합니다!
    • egoing
      Ctrl+O를 누르시면 됩니다.
      대화보기
      • 강석
        크롬에서 파일불러오기 어떻게하나요 ?
      • egoing
        아래와 같이 CSS를 이용하면 됩니다.
        http://jsfiddle.net/4LMZV/

        CSS 배우러 언릉 가셔야겠네요. ^^
        대화보기
        • resu02
          예제3에서
          html 하위 목록인 수업, 사전, 쿡북이 너무 멀찌감치 띄어쓰기 되어 있는데여..
          띄어쓰기 정도를 조절할 수 있는 방법은 없나여?
        • egoing
          조금 더 자세히 질문해주시면 더 정확하게 답변을 드릴 수 있을 것 같습니다.
          대화보기
          • 져니
            목록2 수업에서요.. 새탭(컨트롤+T) 연 후에 파일 불러오기 창은 어떻게 여는건가요? ㅠ
          • 애플맨
            야! 진짜 쉽네요 ㅎ
          • huziya
            잘 배웠습니다.
            쉽게 알려주셔서 감사합니다.
          • 박종길
            잘 배웠습니다.
            감사합니다.
          • 앎이앓이
            웹개발자 준비생입니다. 좋은강의 감사드립니다.
          • egoing
            캥캥님 날짜를 적는 것도 좋은 방법입니다만 공동공부라는 기능을 이용해보시면 어떨까요?
            저에게 이메일이 계속 발송되고 있어서요 :)

            http://opentutorials.org......udy
            대화보기
            • 캥캥
              2013.10.10
            • visual00
              감동입니다. 너무 도움되네요
            • mimiandchopa
              잘보았습니다!!!!!
            • oh535
              잘봤습니다.~~~~~~^^
            • Hyunduk Yi
              잘 봤습니다. 다음메일보낼 때 목록정리를 이걸로 하면 깔끔하게 정리되겠네요.Trello에도 적용되면 좋겠는데.. 쩝..
            • ick soo
              도움이 많이 됩니다.
            • 최상현
              수업 잘 듣고 있습니다.
            • 며브
              ^^ 목록 부분은 재밌네요~ 고맙습니다.
            • Jmogoon
              잘 봤습니다. 고맙습니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기