학습한 내용
-html 설계 예시를 보고 실습 진행
실행 이미지

코드
대식가
대식가
<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>
<li>
<a href="#">
<img>
<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>
----------------------------------------------------------

<ul>
<li>
<a herf="#">
<img src="">
<div>
<span>경제M</span>
<h3>부회장님의 취미생활</h3>
<p>가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하</p>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x100">
<div>
<span>[푸드클래스] 송현경 요리 연구가</span>
<h3>바삭하고 고소한 브런치</h3>
<p>잘 구은 페이스트리 속에 부드럽고 진한 소스와
치즈가 듬뿍!</p>
<div>
<span>#오픈요리</span>
<span>#베사멜소스</span>
</div>
</div>
</a>
</li>
</ul>
------------------------------------------------------------------------
<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>
<!-- 왼쪽 -->
<div>
<ul>
<li>
<a href="#">
<img scr="">
<p></p>
</a>
</li>
<li>
<a href="#">
<img scr="">
<p></p>
</a>
</li>
<li>
<a href="#">
<img scr="">
<p></p>
</a>
</li>
<li>
<a href="#">
<img scr="">
<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>

<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>
<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>

<header>
<div>
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
<div>
<img src="">
<img src="">
<img src="">
</div>
</header>
<div>
<div>
<!-- L -->
<div>
<img src="">
<div>
<img src="">
<p>자초 어성초 감초를 넣어 피부진청 어쩌고 저쩌고 블라블라</p>
</div>
</div>
<!-- M -->
<div>
<img src="">
<img src="">
</div>
<!-- R -->
<div>
<img src="">
<div>
<img src="">
<p>2자초 어성초 감초를 넣어 피부진청 어쩌고 저쩌고 블라블라</p>
</div>
</div>
</div>
</div>
학습한 내용 중 어려웠던 점 또는 해결못한 것들
-따라하는 것 자체는 쉬웠음. 하지만 웹사이트를 만든다고 하면 구성을 어떻게 해야할지 머리속으로
구상하는 것이 어렵게 느껴졌음.
-기초단계여서 이해하지 못했더라도 다시 봄으로 이해가능한 내용들이었음
궁금한 점
코드를 구글링 등으로 다른 사람들이 짜놓은 코드를 가져오면 된다고 한다. 그런데 코딩에도 저작권 개념이 있다고 듣기는 한 것 같은데 그 기준선이 어느 것인지 궁금하다. 모든 웹사이트들이 어떻게 작성되었는지 볼 수 있다고 하는데 마음에 드는 사이트를 그대로 카피할 수 있는 정도가 어느 정도까지인지 아리쏭하다. 허락 되는 모방의 수준이 어디까지일까?
학습 소감
웹 페이지를 만드는 것을 설계라는 표현이 낯설게 느껴졌다.
그리고 html 코드 설계 자체는 어렵지 않은 것 같다. 아직 배우지는 않았지만 css라는 언어가 웹 사이트 꾸미는 것에 가장 큰 차이가 아닌가 싶다.
2주간 파이썬으로 머신러닝 관련 수업을 따라해서 영어타자를 치는 것에 어느 정도 익숙해졌다. 하지만 한글, 영어 왔다 갔다하면서 타이핑을 하는게 마치 왼손으로 글씨를 쓰려고할 때 짜증이 나는 것 처럼 코드 타이핑에 짜증이 조금 난다. 기존에 파이썬에서는 영어 한 가지 언어로만 주로 타이핑을 하니까 덜 했는데 html은 한글 병행도 많아서 현영 바꾸는게 조금 불편하다. 연습을 하다보면 없어질 문제겠지만 지금은 짜증이 난다.
웹 페이지 하나를 처음 부터 끝까지 설명하면서 코딩을 직접하는 실습을 여러번 해보면 좋을 것 같다. 그리고 설계라는 단어가 쓰이듯이 설계를 어떻게 하는지는 설계자에 따라서 다양한 것 같다.