20210629

학습한 내용

kakaotalk

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>
	

    <ul>
    	<li>
    		<a href="#">
    			<img src="https://via.placeholder.com/100x50">

    			<div>
    			    <h3>박지연</h3>
    			    <p>다정한 사람</p>
    			</div>
    		</a>
    	</li>
    	<li>
    		<a href="#">
    			
    			<img>

    			<div>
    			    <h3>박지연</h3>
    			    <p>다정한 사람</p>
    			</div>
    		</a>
    	</li>
    	<li>
    		<a href="#">
    			<img>

    			<div>
    			    <h3>박지연</h3>
    			    <p>다정한 사람</p>
    			</div>
    		</a>
    	</li>
    	<li>
    		<a href="#">
    			<img>

    			<div>
    			    <h3>박지연</h3>
    			    <p>다정한 사람</p>
    			</div>
    		</a>
    	</li>
    </ul>


<footer>
	<nav>
		<ul>
			<li>
				<a href="#">메뉴1</a>
			</li>
			<li>
				<a href="#">메뉴2</a>
			</li>
			<li>
				<a href="#">메뉴3</a>
			</li>
			<li>
				<a href="#">메뉴4</a>
			</li>
		</ul>
	</nav>
</footer>







</body>
</html>

naver

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>

    <!-- 경제M>
    <!--
	<ul>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/150x80">

				<div>
					<span>경제M</span>
					<h3>부회장님의 취미생활</h3>
					<p>Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World</p>

					<span>머니그라운드</span> 
					<span>-</span>
                 	<span>4일 전</span>
				</div>
			</a>
		</li>
	</ul>
    -->

    <!-- 레시피 -->
    <ul>
    	<li>
    		<a href="#">
    			<img src="https://via.placeholder.com/200x120">

    			<div>
    				<span>[푸드클래스] 송현경 요리 연구가</span>
    				<h3>바삭하고 고소한 브런치</h3>
    				<p>잘 구운 페이스티리 속에 부드럽고 진한 소스와 치즈가 듬뿍</p>

    				<div>
    					<span>#오픈요리</span>
    					<span>#베사멜소스</span>
    				</div>

    			</div>
    		</a>
    	</li>
    </ul>

</body>
</html>

news

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>

	<div>
		<h3>인천 서구 아파트 시장에 무슨 일이</h3>
		<div>
			<!-- 왼쪽 -->
			<div>
				<span>해럴드 경제</span>
				<span>입력 2021.05.03</span>
				<span>수정 2021.05.03</span>
			</div>

			<!-- 오른쪽 -->
			<div>
				<a href="#"><span></span></a>
				<a href="#"><span></span></a>
				<a href="#"><span></span></a>
			</div>
		</div>
	</div>



</body>
</html>

daum

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>


	<div>
		<!-- 왼쪽 -->
		<div>
			<img src="">
		</div>

		<!-- 오른쪽 -->
		<div>
			<!-- 오른쪽 상단 -->
			<div>
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</div>

			<!-- 오른쪽 하단 -->
			<div>
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</div>
		</div>
	</div>

	<div>
		<ul>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
		</ul>
	</div>



	<div>
		<!-- 왼쪽 -->
		<div>
			<ul>
				<li>
					<a href="#">
						<img src="">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="">
						<p></p>
					</a>
				</li>
			</ul>
		</div>

		<!-- 오른쪽 -->
		<div>
			<!-- 오른쪽 상단 -->
			<div>
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</div>

			<!-- 오른쪽 하단 -->
			<div>
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</div>
		</div>
	</div>





</body>
</html>

agency

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>


    <!-- 상단 영역 -->
	<header>
	  <div>
		<h1>
			<a href="#">
				<img src="">
			</a>
		</h1>

		<nav>
			<ul>
				<li><a href="#">Services</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Team</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	  </div>

	  <div>
	  	<h2>Welcome To our Studio</h2>
	  	<h3>It's Nice To Meet you</h3>
	  	<a href="#">Tell Me More</a>
	  </div>

	</header>
	


</body>
</html>

helbak

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>

	<footer>
		<!-- 왼쪽 -->
		<div>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
			</ul>
		</div>

		<!--중앙 -->
		<div>
			<a href="#"></a>
		</div>

		<!-- 오른쪽 -->
		<div>
			<p>Accept payment method</p>
			<ul>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
			</ul>
		</div>
	</footer>


</body>
</html>

kidsgao

<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">

</head>
<body>

	<!--
	<header>
		
		<div>
			<img src="">
			<img src="">
			<img src="">
			<img src="">
			<img src="">
		</div>

		<div>
			<img src="">
			<img src="">
			<img src="">
		</div>
	</header>
    -->


    <div>
    	
    	<div>
    		
    		<!-- 왼쪽 -->
    		<div>
    			<img src="">

    			<div>
    				<img src="">
    				<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
    			</div>
    		</div>

    		<!-- 중앙 -->
    		<div>
    			<img src="">
    			<img src="">
    		</div>

    		<!-- 오른쪽 -->
    		<div>
    			<img src="">

    			<div>
    				<img src="">
    				<p>풍부한 올리브를 넣어서 보습 효과가 뛰어나답니다.</p>
    			</div>
    		</div>


    	</div>
    </div>





</body>
</html>

학습한내용 중 어려웠던 점

어제와 마찬가지로 손에 익지않아 시간이 많이 걸림

해결방법

반복적으로 강의 수강

학습소감

우리가 평소 사용하는 사이트들을 보며 직접 만들어 볼 수 있어서 신기했다.
앞으로 배울 디자인 영역 css가 기대된다.

좋은 웹페이지 즐겨찾기