과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인원_2_HTML_210505
주제 : HTML
html 설계도
웹사이트의 구성 그리기
설계도면의 개념은 건축물의 도면을 그리듯 웹사이트의 레이아웃에 따라 텍스트, 이미지 그리고 다른 다양한 컨텐츠 들이 배치되는 구역을 태그를 통해 구별하여 모듈형태로 편집과 수정의 편리함은 물론 체계적인 관리가 가능해진다.
div 태그는 구역을 분리하는데 사용하는 태그 div 태그 안에 또 다른 div태그를 삽입하여 구역 안에 하위구역을 나눌 수 있다.
- 임시로 이미지의 자리를 채울수 있는 URL
https://via.placeholder.com/100x100
수치의 조정으로 필요한 사이즈의 이미지를 불러올 수 있다.
카카오톡 친구리스트 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/100X50">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/100X50">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/100X50">
<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>- div 태그를 이용하여 카카오톡 친구리스트의 사진, 이름 그리고 알림말을 한계의 구역으로 묶어준다.
네이버의 경제, 요리 세션
<!-- 경제M -->
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>부회장님의 취미생활</h3>
<p>hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello 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>----------------
- 네이버 메인페이지 구역중 경제/ 요리 구역을 구성해봄
- 요리 구역에서는 div 태그 속에 div 태그를 사용하여 해쉬태그 영역을 구분함
다음 메인페지이 뉴스박스
<div>
<!-- 왼쪽 -->
<div>
<img src="">
</div>
<!-- 오른쪽 -->
<div>
<!-- 오른쪽 상단 -->
<div>
<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>
<li><a href="">오른쪽 상단5</a></li>
</ul>
</div>
<!-- 오른쪽 하단 -->
<div>
<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>
<li><a href="">오른쪽 하단5</a></li>
</ul>
</div>
</div>
</div>
-------------------
<div>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<p></p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<p></p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<p></p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<p></p>
</a>
</li>
</ul>
</div>
----------
<div>
<!-- 왼쪽 -->
<div>
<ul>
<li>
<a href="">
<img src="https://via.placeholder.com/150x100">
<p>1</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/150x100">
<p>2</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/150x100">
<p>3</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/150x100">
<p>4</p>
</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 태그
Header태그 사용_홈페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<div>
<h1>
<a href="">
<img src="https://via.placeholder.com/600x80">
</a>
</h1>
<nav>
<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>
</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>- header 태그의 사용
- 홈페이지 상단의 이미지 메뉴 그리고 슬로건 혹은 카피라이트를 포함한 다양한 정보를 입력
header 안에서 구역분리
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<!-- 로고 -->
<div>
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
</div>
<!-- 구름 / 잠자리 -->
<div>
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
</div>
</header>
<div>
<div>
<!-- 왼쪽 -->
<div>
<img src="https://via.placeholder.com/80">
<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
</div>
</div>
<!-- 중앙 -->
<div>
<img src="https://via.placeholder.com/50">
<img src="https://via.placeholder.com/50">
</div>
<!-- 오른쪽 -->
<div>
<img src="https://via.placeholder.com/80">
<p>풍부한 올리브유를 넣어서보습 효과도 뛰어나답니다.</p>
</div>
</div>
</div>
</body>
</html> <!-- 구름 / 잠자리 -->자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.
<!-- 중앙 --> <!-- 오른쪽 -->풍부한 올리브유를 넣어서보습 효과도 뛰어나답니다.
- 배치할 텍스트와 이미지는 물론 구역을 많이 나눌 수록 웹프로그래밍의 난이도가 높아진다.
### footer의 구성<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<footer>
<!-- 왼쪽 -->
<div>
<li><a href="">메뉴버튼1</a></li>
<li><a href="">메뉴버튼2</a></li>
</div>
<!-- 중앙 -->
<div>
<a href="#"></a>
</div>
<!-- 오른쪽 -->
<div>
<p>Accepted payment methods</p>
<ul>
<li><img src="https://via.placeholder.com/30"></li>
<li><img src="https://via.placeholder.com/30"></li>
<li><img src="https://via.placeholder.com/30"></li>
<li><img src="https://via.placeholder.com/30"></li>
<li><img src="https://via.placeholder.com/30"></li>
</ul>
</div>
</footer>
</body>
</html> <!-- 중앙 --> <!-- 오른쪽 -->Accepted payment methods
Review
웹사이트의 구역은 header / main / footer로 나누어 진다. 각 구역의 안에서도 필요에 따라 divx태그를 사용하여 한번더 혹은 그이상의 구역을 구분한다. 구역을 나누는 것은 텍스트와 이미지 혹은 비디오 등 컨텐츠의 종류에 따라 구분하든 아님 정보의 가독성 혹은 디자인 적인 요소로 웹페이지를 제작하는 자에 따라 자유롭게 구성할 수 있겠지만 목적에 따라 구성할 수 있어야 한다.
웹페이지의 설계도면은 웹페이지의 구조를 짜는 일이다. 작업을 반복하며 나에게 맞는 작업루틴을 만드는 것이 이후 작업의 효율을 높일 수 있는 방법 일듯 하다. 지금은 단순히 강의 따라 하며 작업과 작업의 결과를 비교하는 것으로 웹프로그래밍 작업에 익숙해지는 것이 가장 중요하다는 생각이든다.
강의에서는 공백으로 남겨둔 태그들이 많아 출력된 결과물을 쉽게 이해되지 않는다. 앞의로의 강의에 따라 다르겠지만 이미지든 텍스트든 쉽게 알아 볼 수 있는 임의의 속성값 입력하여 코드를 완성한다.
레퍼런스로 사용할 수 있는 여러 사이트들의 코드들을 찾아보는 과정이 역량을 키우는데 큰 도움이 될 것 같다.
Idealist