Day 2 - 설계도면 짜기

1. 학습한 내용

설계도면짜기

카카오톡 친구 목록과 메뉴 만들기

친구 목록

  1. UL과 LI를 사용하여 리스트로 표시
  2. 친구를 클릭하면 채팅방을 표시하는 것은 새페이지를 연다고 생각
    새페이지를 열때 a 태그 사용
  3. div 태그를 통해 임의의 공간을 만들어 동일한 성격의 컨텐츠를 묶어서 작업
  4. https://placeholder.com/ 를 통해 사진 공간을 미리 임시로 채울 수 있음
  5. footer: 하단에 메뉴가 들어가기 때문에 사용
  6. nav 태그 : 메뉴를 만들기 위한 태그
<meta charset="utf-8">
<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>박지연</h3>
				<p>다정한 사람</p>
			<div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>이유리</h3>
				<p>행복한 사람</p>
			<div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>이진욱</h3>
				<p>멋진 사람</p>
			<div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<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>

네이버 경제M, 레시피 목록 만들기

경제M
1. span으로 상단 만들기
2. 기본적으로 카카오친구 목록과 비슷
3. div안에 또 다른 div 설정가능(서랍장 속 또다른 서랍)
4. h3는 제목
5. p는 문단 설정

<meta charset="utf-8">
<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50*80">
			<div>
				<span>경제M</span>
				<h3>부회장님의 취미생활</h3>
				<p>Hello World Hello World Hello World Hello World
				 Hello World Hello World Hello World
				 Hello World Hello World Hello World</p>

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


<ul>
	<li>
		<a href="#">
			<img src = "https://via.placeholder.com/200*120">

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

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

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

다음 메인화면 만들기

  1. 상단, 하단으로 구분
  2. 상단 영역에서 왼쪽(사진), 오른쪽(글자)영역으로 다시 구분
  3. 상단 오른쪽에서 위, 아래로 다시 또 구분

큰사진
사진4개

<meta charset="utf-8">
<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="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
	</ul>
</div>

<div>
	<!-- 왼쪽-->
	<div>
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<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>

뉴스 타이틀 상단 만들기

  1. 상단 영역을 감싸는 구역 만들기
  2. 타이틀 넣기
  3. 타이틀 아래 작은 박스 왼쪽과 오른쪽 구분
  4. 왼쪽과 오른쪽 내용,성격이 각각 다르기 때문에 ul과 li로 구분하지 않고 span
<meta charset="utf-8">
<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>

홈페이지 상단 만들기 agency

  1. 네비게이션 역할을 하기 때문에 nav 태그 사용
<meta charset="utf-8">
<header>
	<div>
		<h1>
			<a href="#">
				<img src="">
			</a>
		</h1>

		<nav>
			<ul>
				<li><a href="">Service</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>

helbak 하단 만들기

1.footer 사용
2.왼쪽 중앙 오른쪽으로 구분
3.왼쪽은 메뉴
2.오른쪽 글자와 이미지

<footer>
	<!-- 왼쪽 -->
	<div>
		<ul>
			<li><a href="#">Terms and conditions</a></li>
			<li><a href="#">Cookies</a></li>
		</ul>
	</div>

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

	<!-- 오른쪽 -->
	<div>
		<p>Accepted paymnet methods</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>

kidsgao 홈페이지 움직이는 이미지

  1. 공간 구분 잘하기

  2. 상단에는 이미지, 하단은 글자를 담은 서랍, 서랍장 안에 이미지로 된 글자(자초 어성초 등)와 내용

  3. 상단 이미지는 구름과 그릇 두가지 이미지

<meta charset="utf-8">
<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>

연습하기(네이버 웹툰)

<div>
	<!-- 왼쪽 -->
	<div>
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/150">
					<div>
						<span>웹툰</span>
						<h3>[용사가 돌아왔다> 최신화 보러가기</h3>
						<p>누군가에겐 영웅, 누군가에겐 악당이라는 딜레마</p>
						<span>나락/풍백</span>
					</div>
				</a>
			</li>
		</ul>
	</div>

	<!-- 오른쪽 -->
	<div>
		<!--위-->
		<div>
			<a href="#">
				<img src="https://via.placeholder.com/150">
				<div>
					<span>웹툰</span>
					<h3>웹툰으로 화요일 급속충전!</h3>
					<span>요일별 웹툰</span>
				</div>
			</a>
		
		</div>

		<!-- 중간 -->
		<div>
			<a href="#">
				<img src="https://via.placeholder.com/150">
				<div>
					<span>웹툰</span>
					<h3>서준아 이젠 진짜 안녕</h3>
					<span>여신강림</span>
				</div>
			</a>
		
		</div>

		<!-- 아래 -->
		<div>
			<a href="#">
				<img src="https://via.placeholder.com/150">
				<div>
					<span>웹툰</span>
					<h3>호랑이들의 편식</h3>
					<span>호랑이 들어와요</span>
				</div>
			</a>
		
		</div>
	</div>
</div>

2. 학습 중 어려웠던 점

  • 태그에 대해 이해도가 떨어진다.
  • velog 작성이 아직 익숙하지 않다.
  • 결과물이 맞게 되었는지 비교할 수 없다.

3. 해결방법

  • 수업 외 다른 소스로 내가 혼자 해보기

4. 학습 소감

  • 이해가 가는 듯 가지 않는 듯 하다. 완성된 결과물을 만들 수가 없어서 그런 것 같다.

좋은 웹페이지 즐겨찾기