<!doctype html>
<html>
	<head>
		<meta charset = "utf-8"> 
		<title>리스트</title>
		
		<style>
		ul{
			/* border : 1px solid orange; */
			/* width : 200px; */
			width : 83%;
			
		}
		ul li{
			/* border : 1px solid red; */
			margin : 5px;
			padding : 5px;
		}
		img{
			width : 40px;
			height : 40px;
		}
		
		div{
			border : 1px dotted green;
				margin : 10px; 
				padding : 10px; 
				width : 250px; /* 테두리 가로길이 */
				float : left;
		}
		</style>
	</head>

	<body>
	  &lt;div>큰 단락 으로 작은 단락 &lt;p> 태그 뿐만아니라 <br>거의 모든 
	  태그들을 포함 시킬 수 있다
	  <br>
	
	<div>
	  <ul>
		<li>html</li>	
		<li>css</li>	
		<li>javascriipt</li>	
		<li>ajax/json</li>	
		<li>java</li>		
	  </ul>
	 </div>
	  
	  <div>
	   <ul>
		<li><img src="../images/춘식이.jpg" alt="춘식이"></li>	
		<li><img src="../images/에비츄.jpg" alt="에비츄"></li>	
		<li><img src="../images/도라에몽.png" alt="도라에몽"></li>	
		<li><img src="../images/라이언2.jpg" alt="라이언2"></li>	
		<li><img src="../images/곽철.png" alt="곽철"></li>		
	   </ul>
	  </div>
	  
	  <div>
	   <ul>
		<li><a href="http://www.naver.com" target="_blank">네이버</a></li> <!--기본은_self/ _blank 새 탭에서 문서 표시 -->	
		<li><a href="http://www.daum.net" target="_blank">다음</a></li>	
		<li><a href="http://www.nate.com">네이트</a></li>	
		<li><a href="http://yahoo.com">야후</a></li>	
		<li><a href="http://google.com">구글</a></li>		
	   </ul>
	  </div>
	  
	  
	  <div>
	   <ul>
		<li><a href="http://www.naver.com"><img src="../images/춘식이.jpg" alt="춘식이"></a></li>	
		<li><a href="http://www.daum.net"><img src="../images/에비츄.jpg" alt="에비츄"></a></li>	
		<li><a href="http://www.nate.com"><img src="../images/도라에몽.png" alt="도라에몽"></a></li>	
		<li><a href="http://yahoo.com"><img src="../images/라이언2.jpg" alt="라이언2"></a></li>	
		<li><a href="http://google.com"><img src="../images/google.gif" alt="google"></a></li>		
	   </ul>
	  </div>
	  
	  <div>
	   <ul>
		<li>HTML
		  <ul>
		    <li>태그</li>
			<li>속성</li>
			<li>내용</li>
		  </ul>
		</li>	
		<li>CSS
			<ol>
				<li>태그이름</li>
				<li>#id이름</li>
				<li>.class이름</li>
			</ol>
		</li>	
		<li>JAVASCRIPT</li>	
		<li>AJAX/JSON</li>	
		<li>JAVA</li>		
	  </ul>
	 </div>
	 
	   <div>
	     <dl>
			<dt>html</dt>
			<dd>문서의 내용이나 구조를 정의</dd>
			
			<dt>css</dt>
			<dd>문서내용의 스타일 지정</dd>
			
			<dt>javascript</dt>
			<dd>웹페이지 문서의 동작을 구현한다</dd>
			
			<dt>jquery/ajax/json</dt>
			<dd>비동기방식으로 json데이터를 이용하여 동작을 구현한다</dd>
			
		 </dl>
	   </div>
	  
	</body>

✔ 출력

저작자표시 비영리 변경금지 (새창열림)

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML/notepad++] id를 이용한 a링크-1219  (0) 2022.12.20
[HTML/notepad++] 구분선-1219  (0) 2022.12.19
[HTML/notepad++] 웹기초-1219  (0) 2022.12.19
[HTML/notepad++] 텍스트테그-1219  (0) 2022.12.19
[HTML/notepad++ ] test3-1219  (0) 2022.12.19

+ Recent posts

티스토리툴바