1) 학습한 내용
설계도면 만들기
1. 카카오톡 친구 목록 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/80">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/80">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/80">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/80">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
</ul>
</body>
</html>
- 친구 목록에는 순서가 중요하지 않기 때문에 ul, li를 사용함(항상 같이 사용)
- 클릭하면 채팅방으로 넘어가기 위한 a 사용
- 프로필 사진을 img로 삽입(https://via.placeholder.com/150 -> 실무팁, 사용할 이미지가 아직 제공되지 않았을 경우 사용, 숫자를 변경하면 사이즈가 변경됨)
- 이름과 상태명은 한 개의 그룹으로 묶기 위해 div사용 (div는 임의로 구역을 정할 수 있음 -> 비슷한 성격끼리 묶기)
<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>
- 카카오톡 하단의 메뉴는 footer로 지정, 가장 밑 단작업
- 메뉴를 구성할 때 nav사용(네비게이터)
- 메뉴 또한 ul, li 사용
- 클릭하면 다른 창으로 넘어가기 때문에 a 사용
2. 네이버 경제 M, 레시피
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>부회장님의 취미생활</h3>
<p>Hell WorldHell WorldHell WorldHell World
Hell WorldHell WorldHell WorldHell World
Hell WorldHell WorldHell WorldHell WorldHell World</p>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>
- ul, li 사용
- 클릭하면 다른 곳으로 이동하기 때문에 a 사용
- 이미지 삽입을 위한 img, 사이즈는 150*80
- div로 임의의 구역을 생성
- 경제M - span(문장 내에서 특정 단어에 디자인을 적용하고자 할 때)
- h3 제목 지정
- p : 본문 내용삽입
- 머니그라운드 - 4일 전 : span
<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>
- 이미지를 누르면 다른 창으로 이동하기 때문에 a와 img
- 푸드클래스 ~~ 소스 까지 하나의 div로 지정
- #오븐요리 #베사멜소스 도 하나의 div로 지정 --> div안에 div 지정 가능!!
3. news
<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>
- div로 한 구역을 지정
- 제목 : h3
- div안에 div 지정 ( 구간을 나누어 왼쪽, 오른쪽으로 생성 )
- span을 이용해 텍스트 작성
4. helbak.com(https://helbak.com/)
<footer>
<!-- 왼쪽 -->
<div>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</div>
<!-- 중앙 -->
<div>
<a href="#"></a>
</div>
<!-- 오른쪽 -->
<div>
<p>Accepted payment 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>
- div로 구역을 나누어 줌( 왼쪽, 중앙, 오른쪽 )
- 가장 밑 단의 부분 footer
5. agency (https://startbootstrap.com/previews/agency)
<header>
<div>
<h1>
<a href="#">
<img src="">
</a>
</h1>
<nav>
<ul>
<li>
<a href="#">Service</a>
<a href="#">Portpolio</a>
<a href="#">About</a>
<a href="#">Team</a>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<div>
<h2>Welcome To Our Studio</h2>
<h3>IT'S NICT TO MEET YOU</h3>
<a href="#">TELL ME MORE</a>
</div>
</header>
- header로 지정
- 가장 윗부분 div로 지정, 로고는 h1으로 지정, 이미지를 위한 img와 a
- 메뉴 : nav, ul, li 각 5개의 메뉴 생성
- 또다른 div지정, 로고는 아니지만 강조하는 글씨이기 때문에 h2, h3사용
6. kidsgao(http://sisikiller.dothome.co.kr/)
<header>
<div>
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
<div>
<img src="">
<img src="">
<img src="">
</div>
</header>- header 지정, 2개의 div로 나누어 줌 (실행하면 아무것도 안 나옴)
<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>빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9 지방산이 풍부한 올리브유를 넣어서 보습효과도 뛰어나답니다. </p>
</div>
</div>
</div>
</div>
- 이 구역을 나타내는 타이틀 정보가 없으므로 div 설정
- 그 div안에서 컨텐츠 영역을 감싸고 있는 div 설정
- 왼쪽, 중앙, 오른쪽 3개의 div로 구역을 나누어 줌
- 왼쪽 : 이미지를 위한 img, 글자를 감싸고 있는 div 하나 더 설정
- 본문 글자 : p 사용
- ctrl + / = 주석처리 단축키
2) 학습내용 중 어려웠던 점
처음에 설계도면 작성하는거에 대해 잘 따라가지 못해서 어버버 거렸는데 정지를 하고 차근차근 생각해보니 이해가 됐다. 마지막에 kidsGao 할 때 div구역을 지정하는게 헷갈렸다.
3) 해결방법
복습만이 해결방법이라 생각하여 영상을 한번 더 돌려보았다.
개발일지를 쓰고 한번 더 시청할 계획이다.
kidsGao를 복습하여 알게 된게 구역을 나타나는 타이틀 정보가 없으면 임의로 div를 설정해주고, 그 div안의 컨텐츠만을 위한 div를 또 설정해주고, 그 안에서 구역을 또 나누어 진행을 하면 된다. 작성하다보니 또 헷갈리는 것 같은데 한번 더 시청해야겠다.
4) 학습소감
이제 < !DOCTYPE html> ~~ < /html> 까지 안 헷갈리고 작성 할 수 있다. 일부러 복사 붙여넣기 안하고 차근차근 작성해보았다. 별 거 아닐지 몰라도 이렇게 기초부터 해나가면 발판이 되겠지..! 설계도면도 이제 어느 정도 감이 왔다. 순서대로 구역을 지정해주고 그 안에서 또 지정을 해주고 또 지정을 해주고..!
Hello!