1) 학습한 내용
- 설계도면 작업에 대한 이해(구조를 잘 짜야한다)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
</ul>
</body>
</html>div태그는 서랍장이다
도면을 그릴 때; 비슷한 성질끼리, 좌표로 옮길 것 까지 고려
*팁; 임시로 이미지 크기를 넣어둠"https://via.placeholder.com/150"
*메뉴를 만들 때, nav 태그
- 기본 골격
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img src="">
</a>
</li>
</ul>
</body>
</html>- 부분연습_홈페이지 기사 (body에 들어갈 내용)
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>부회장님의 취미생활</h3>
<p>Hello World Hello World Hello World
Hello World Hello World Hello World </p>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>- 부분연습_신문기사 전문
<div>
<h3>인천 서구 아파트 시장에 무슨 일이</h3>
<div>
<!-- Left -->
<div>
<span>헤럴드 경제</span>
<span>입력 2021.05.03</span>
<span>수정 2021.05.03</span>
</div>
<!-- Right -->
<div>
<span>가</span>
<span>나</span>
<span>다</span>
</div>
</div>- a 태그를 넣으면 다른 페이지로 이동
<a href='#'><span>가</span></a>- 라이브프리뷰 상단영역 (live pre-view)
<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>2) 학습내용 중 어려웠던 점
-
익숙하지 않아 따라가기 어려움
-
영상 볼륨이 생각보다 너무 낮음
-
Command + / 또는 Ctrl + / 등의 단축키를 잘 모름
3) 해결방법
-
3회 반복, 듣는 것과 동시에 이해하기 어려우므로, 선코딩 후이해를 목표로 움직임
-
태그나 구조가 손에 익숙해지는 것을 목표로 삼음
-
영상 볼륨 방법은 못 찾겠음
4) 학습소감
- 강의 중에 부분적인 연습이 했었다는 말처럼 홀로 부분적인 요소를 만들어보고 연습하는 시간이 필요하다고 느낌
Please be wonderful but don't be so serious, enjoy this journey with the good people!