1) 학습한 내용
설계도면실습 (ex- 카카오톡 친구 리스트)
<.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 href="#"><./li>
<./ul>
카카오톡 앱 밑 하단
<.footer> *카카오톡 앱 밑 하단
<nav> <ul> <li> <a href="#">메뉴1</a> </li> <li> <a href="#">메뉴2</a> </li> </ul> </nav></.footer>
</.body>
</.html>
*div 이미지는 이미지끼리 글자는 글자끼리 정리하는 태그 ex) 서랍장
+tip 이미지크기는 정해졌고 이미지가 들어갈 공간을 미리 세팅하고 나중에 이미지파일로 대체.(img placeholder)
*네이버 경제부분 만들기
<.html>
<.head>
<.meta charset="utf-8">
</.head>
<.body>
<.ul><li> <a href="#"> <img src="https://via.placeholder.com/150*80"> <div> <span>경제M</span> <h3>부회장님의 취미생활</h3> <p>hellooooooooooo</p> <span>머니그라운드</span> <span>-</span> <span>4일 전</span> </div> </a href="#"></.li>
</.ul>
</.body>
</.html>
*이미지태그 만들기
<.html>
<h.ead>
<.meta charset="utf-8">
</.head>
<.body>
<.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 href="#"></.li>
</.ul>
</.body>
</.html>
*다음 경제부분 만들기
<.html>
<.head>
<.meta charset="utf-8">
</.head>
<.body>
<왼쪽>
<.div>
<.img src="">
</.div>
<오른쪽>
<..div>
<
</.div>
<오른쪽 상단>
<.div><ul> <li><a href="#"></a></li> <ul> <li><a href="#"></a></li> <ul> <li><a href="#"></a></li></.div>
<오른쪽 하단>
<.div><ul> <li><a href="#"></a></li> <ul> <li><a href="#"></a></li> <ul> <li><a href="#"></a></li>
![]()
다음 영화부분 만들기
div>
<div><!오른쪽 상단 -->
<.div><ul> <li><a href="#"></a></li> <ul> <li><a href="#"></a></li> <ul> <li><a href="#"></a></li></.div>
<!오른쪽 하단 -->
<.div>
<.ul><li><a href="#"></a></li> <.ul> <li><a href="#"></a></li> <.ul> <li><a href="#"></a></li><./div>
</.div>
</.div>
다음 부동산부분 이미지태그
div>
ul> li><a href="#"> img src=""> p></p> /a> /li>/div>
/body>
/html>
뉴스 제목 상단 만들기
html>
head>
meta charset="utf-8">
/head>
body>
div>
h3><인천 서구 아파트시장에 무슨 일이>
div><!-- 왼쪽 --> div> span>헤럴드 결제</speb> span>입력 2021.05.03</span> span>수정 2021.05.03</span> /div> <!-- 오른쪽 --> div> div> a href="#"><spen>가</span> a href="#"><spen>나</span> a href="#"><spen>다</span> /div> /div>/div>
/body>
/html>
start bootstrap 상단영역 만들기 헤더
html>
head>
meta charset="utf-8">
/head>
/body>
header><div> <h1> <a href="#"> <img src=""> </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> 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>
실습에서 만들게될 웹페이지의 특정구역의 설계도면.
+tip 디자인된 순서대로 도면 짜기. 단 왼쪽에서 오른쪽으로.
html>
head>
meta charset="utf-8">
/head>
body>
footer><div> <ul> -li-aherf="#"-메뉴1-/a--/li- -li--aherf="#"-메뉴1-/a--/li- </ul> </div> <div> <a href="#"></a> </div> <div> <p>Accepted payment methods</p> -li--img src=""--/li- -li--img src=""--/li- -li--img src=""--/li- -li--img src=""--/li- -li--img src=""--/li- </div>/footer>
/body>
/html>
siskiller.dotcom 상단 영역 설계도면 작업.
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>
/body>
/html>
++
html>
head>
meta charset="utf-8">
/head>
body>
div><div> <div> !왼쪽 <img src=""> <div> <img src=""> <p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p> </div> <div> !중앙 <img src=""> <img src=""> </div> <div> !오른쪽 <img src=""> <div> <img src=""> <p>풍부한 올리브유를 넣어서 보습효과도 뛰어나답니다..</p> </div> </div>/div>
/body>
/html>
2) 학습내용 중 어려웠던 점
사실 내용 다 어려웠어요. 아 진짜 터진만두처럼 제 머리도 터질 뻔 했어요, 이게 말이 되나요??? 조금 이해한게 있다면 없는 거 같네요 정말.
3) 해결방법
해결방법은 저도 잘 모르겠어요 죽었다 다시 깨어나도 이 코딩은 정말 이해 못할 것 같다는 바입니다. 장난이고 제가 열심히 공부해야죠 자격증 시험도 주말인데 제 주말은 주말이 아닌거같아요.
4) 학습소감
학습소감이요? 강의 내용 다 졸면서 들었는데 소감을.. 쓸 만한게 있을까요?? 아 너무 솔직하게 썻나요 죄송해요 그치만 진짜 쓸 만한ㄷ게 이거밖에 없네요 죄송해요....
