2020.10.22 HTML 수업 노트 리스트2

 <!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>Insert title here</title>

<link rel="stylesheet" href="../css/public.css">


<style>


  div{


  border : 1px solid blue;


  width : 150px;

  height : auto;


  padding : 10px;


  margin : 5px;


  float : left;


  }

#dd{

width : 200px;

}

  img{


  width : 50px;


  height : 50px;


  }


</style>


</head>


<body>

<pre>

리스트 :


ul : 번호 없는 리스트

ol : 번호 있는 리스트 

&lt;ul&gt;

&lt;li&gt; 아메리카노  &lt;/li&gt;

&lt;/ul&gt;

li : listitem : 텍스트, 이미지, 하이퍼링크, 다른 리스트



</pre>


<div>


 <ul>


  <li><img src="../images/아메리카노.jpg"></li>


  <li><img src="../images/카푸치노.jpg"></li>


  <li><img src="../images/카페라떼.jpg"></li>


  <li><img src="../images/에스프레소.jpg"></li>


 </ul>


</div>


 


<div>


 <ul>


  <li>아메리카노</li>


  <li>카푸치노</li>


  <li>카페라떼</li>


  <li>에스프레소</li>


 </ul>


</div>


<div>

<ul>

<li><a href="http://www.naver.com">네이버</a></li>

<li><a href="http://www.daum.net">다음</a></li>

<li><a href="http://www.w3schools.com">w3schools</a></li>

</ul>



</div>



<div id ="dd">

<ul>

<li>아메리카노 

<ul>

<li>아메리카노1</li>

<li>아메리카노2</li>

</ul>

</li>

<li> 카페라떼 </li>

<li> 카푸치노 </li>

</ul>



</div>






</body>


</html>

댓글