오늘의 강의 내용은?
- 오늘 주요강의 내용은 웹사이트를 만들때 기반을 어떻게
진행하여야 하는지에 대한 내용이였다.
먼저 설계도면을 그리는것이 중요하다. 여기서 말하는 설계도면
이란 건물을 만들때 도면을 보고 만들듯이 웹사이트를 만들때
에도 똑같이 도면과 같은 부분이 필요하다.
어떻게 보면 가장 기본적이면서 중요한 단계 라고 생각한다.
필연적으로 설계도면은 대부분 달라지지 않는것이 많다.
건물에 지을때 반드시 필요한 철골,시멘트,전기배선 필수적으로
꼭 들어가는 부분들이 있듯이 웹페이지의 기틀을 잡는 도면을 그릴때에도 웹사이트 종류와 관계 없이 비슷한 형식을 나타낸다.
이점을 중요시 하고 작업을 하길 바란다.
오늘의 예제 문제
카카오톡 리스트 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/100x100">
<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>
<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>- 한가지 팁! 만약 작업을 진행중 아직 이미지 파일이 정해지지
않은 경우 공백으로 둘시 문제가 될수 있으니
<img src="https://via.placeholder.com/100x100">
src속성에 위에 링크를 통해 사이즈만 나다내는 이미지로 공백을
채워 놓으면 좋다.
네이버 섹션 만들기
-
경제M 부분
.png)
<!-- 경제M -->
<!--
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>부회장님의 취미생활</h3>
<p>HELLO WORLDHELLO WORLDHELLO WORLDHELLO WORLD
HELLO WORLDHELLO WORLDHELLO WORLDHELLO WORLDHELLO WORLDHELLO
WORLDHELLO WORLDHELLO WORLDHELLO WORLDHELLO WORLDHELLO WORLD
HELLO WORLD</p>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>
-->-
레시피 부분
.png)
<!-- 레시피 -->
<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>-
위에 네이버 예문과 같은 소스 코드는 큰틀에서 작은틀로 이어지는 작업들이다. 모습은 아래 그림과 같다.
.png)
-
테두리 쳐진 모습에 따라 제일큰 테두리 안에
왼쪽 이미지, 오른쪽 내용 이순서대로 진행하였다.
이작업을 할때 중요한 태그가<div></div>이다.
위에 태그를 설명하자면 서랍이라고 생각 하면 쉽다.
서랍에 물건들을 넣어두면 한번에 옮길수 있듯이, 여러번 옮겨야 하는 번거로움을 줄일수 있다. 소스코드 또한 한번 썻던 소스코드를 여러번 써야 하는 상황이 자주 나올경우 위태그를 이용하여 옮기는 번거로움을 줄일수있다.
강의 종료후 소감
- 오늘은 웹사이트 제작시에 전체적인 틀을 잡는 작업에 대해 공부하였다. 실제 소스코드로 나타내는 작업물은 많이 없었고 소스코드 만으로 강의를 하였는데, 다시한번 느끼지만 반복과
연습을 상당히 많이 해야 내가 그리고자 하는 설계도면을 유연하게 작업하는게 가능해질것 같았다.아직은 작업의 어려움 보다는
태그의 역할과 상황에 맞게 생략? 유연하게 태그를 사용하는법이
어려움으로 다가왔다. 허나 이또한 수많은 연습과, 반복이 능력치를 향상 시킬것이다.
일지 보강해야 할것
위에 소스코드 외 3,4개의 소스코드가 있으나 일지가 너무 길어질꺼 같아 다 쓰지 못하였다. 같은 강의를 듣고 개발일지를 쓰신분의 깃허브를 이용한 소스코드 고유 방법을 따라할려고 했으나
본인이 깃허브에 이용함에 원할하지 못해 먼저 깃허브를 충분히 익히고 사용하여야 겠다. 조만간이다 화이팅!
i will be the best