⏺학습한 내용🕵️‍♂️

---

✅ Naver 실습

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/150x80">
			<div>
				<span>경제M</span>
				<h3>무주택자의 호소</h3>
				<p>이분에게 해줄 조언은 한 가지
				이분에게 해줄 조언은 한 가지
				이분에게 해줄 조언은 한 가지</p>
				<span>레이달리오</span>
				<span>-</span>
				<span>1개월 </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>
				</div>
				</div>
		</a>
	</li>
</ul>

---

✅ News 실습

<div>
	<h3>인천 서구 아파트시장에 무슨 일이</h3>
	<div>
		<!-- 왼쪽(성질이 달라 ul보다 span) -->
		<div>
			<span>해럴드 경제</span>
			<span>입력 2021.05.03</span>
			<span>수정 2021.05.03</span>
		</div>
		<!-- 오른쪽(아이콘누르면 다른창이동->a태그) -->
		<div>
			<a href="#"><span>가</span></a>
			<a href="#"><span>나</span></a>
			<a href="#"><span>다</span></a>
		</div>
	</div>
</div>

---

✅ Kakao 실습

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/100x50">
			<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>

---

✅ Web Site 실습

!-- 상단영역-->
<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>

<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>

---

⭕HTML 강의내용

✅ HTML 태그

🛑 HTML 태그는 크게 두 가지 진영으로 나뉜다.

🔹Inline = 공간을 만들 수 없다, 상하 배치 작업이 불가하다.

🔹Block = 공간을 만들 수 있다, 상하 배치 작업이 가능하다.

└> 줄 바꿈 효과의 유무를 통해 요소 판별이 가능하다.

---

⏺학습내용 중 어려웠던 점🤦‍♂️

div 태그가 생각보다 엄청 유용하게 작동한다고 생각했는데 막상 써보니 자주 사용하니까 한 번씩 라인이 헷갈릴때가 있었다. 그 점 말고는 아주 재밌게 실습을 마침.

⏺해결방법🙋‍♂️

유용한만큼 많이 쓰이는 태그일테고, 그만큼 활용방법과 처음 구축할때의 중요성에 대해서 느꼈고, css,js 다 배우기 까지 HTML에 대한 내용은 최대한 반복,숙달하도록.

⏺학습소감🙇‍♂️

속성으로 배우긴 했지만 HTML구축에 대해서 뼈대를 빠르게 배운 느낌이고 중간에 살짝씩 알려주시는 실무팁도 꽤 쓸모있다고 생각중,, 단축키도 그렇고 작업을 빠르게 하는 방법을 하나씩 터득중인데 열심히 정보를 모아가며 성장해야겠다. 집에 밤 늦게 오기때문에 최대한 정리를 해서 당일에 올리고 다음날 아침에 복습하며 마무리 작업을 해놓는게 최선일듯,,