2021_06_29 개발일지
1) 학습한 내용
오늘은 어제에 이어 배운내용을 토대로 카카오리스트 만들기, 네이버,다음,여러페이지 등의 일부분 만들기를 진행하였다.
1.카카오 리스트 만들어보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<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>
2.네이버 일부분
<!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 world Hello worldHello world
Hello world Hello worldHello world
Hello world Hello world Hello world
Hello worldHello 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/200x120">
<div>
<span>[푸드클래스] 송현경연구가</span>
<h3>바삭하고 고소한 브런치</h3>
<p> 잘 구운 페이스트리 속에 부드럽고 진한
소스와 치즈가 듬뿍!</p>
<div>
<span>#오븐요리</span>
<span>#베사멜소스</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>
3.다음 일부분
<!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="
https://via.placeholder.com/200x120">
<p></p>
</a>
</li>
<li>
<a href="#">
<img src="
https://via.placeholder.com/200x120">
<p></p>
</a>
</li>
<li>
<a href="#">
<img src="
https://via.placeholder.com/200x120">
<p></p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x120">
<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>
4.news 일부분
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>인천 서구 아파트시장에 무슨일이</h3>
<div>
<!--왼쪽-->
<div>
<span>헤럴드 경제</span>
<span>입력 2021.06.29</span>
<span>수정 2021.06.29</span>
</div>
<!--오른쪽-->
<div>
<a href="#"><span>가</span></a>
<a href="#"><span>나</span></a>
<a href="#"><span>다</span></a>
</div>
</div>
</div>
</body>
</html>
5.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="#">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>
</body>
</html>
6.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>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>
</body>
</html>
7.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>
오늘은 body 부분에서 header와 footer가 페이지상 위치하는 부분, 그안에서 다시 묶어서 나눠주는 작업 등을 집중적으로 다뤄보는 실습을 했던것같다.
태그 ul 을 이용해 우선순위가 필요없는 부분에 대한 입력을 해보았으며, 여기서 꼭 따라와야하는 li와 그속에 div로 다시 묶어주거나, a,img,span ... 등의 여러 태그들을 넣어가며 여러가지 기능을 사용할 수 있음을 알 수 있었다.
비슷하면서도 조금씩 다른 특색을 가지고 사용하는 태그들을 사용해가면서 조금더 이해할 필요를 느꼈던것같다.
2) 학습내용 중 어려웠던 점
'div' 라는 태그를 이용하여 여러가지 단락으로 쪼개주고 묶어주는 방법을 배웠는데, 오늘은 간단한 부분만 하여 큰 어려움이 없었는것 같았지만, 좀 더 복잡한것을 다루게 된다면 어느 부분을 어떻게 어디까지 묶어야할지 어려울 것 같았다.
또 비슷한것 같이 보이는 태그들이 조금씩 다른 특색을 가지고 있어 그런 태그들의 특색을 잘알아야 특정 상황에서 무엇으로 도면을 구성하면 좋을지는 알 수 있을 것 같다.
3) 해결방법
여러 다른 페이지들의 레이아웃을 보는 경험을 늘려가면서 조금씩 이런 것들이 있구나 하면서 익혀가야할것같다.
4) 학습소감
확실히 어제보다는 빠르게 따라갈 수 있었던것같다. 그러나 이렇게 가르쳐주지 않고 혼자서 해보라고한다면 정말 많은 시간이 걸릴 것 같았다.
두번째 날이라 그런지 조금은 익숙해진 것만 같은 느낌이었다. 더더더 익숙해지는 그날이 빨리 오길 바라며 열심히 따라가야겠다 :)
Author And Source
이 문제에 관하여(2021_06_29 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@526yeo_eunhye/20210629-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
