1. Block, 사실 안쓰는 곳이 없다.
인터넷 사이트를 처음 열면 등장하는 인트로 화면을 떠올려보자(초록창이라등가, 구구리라등가).
이 화면은 구조보다는 디자인적 요소가 굉장히 강조되는 화면이다.
하지만 메뉴를 누르거나, 페이지를 살펴보다보면 비슷한 흐름과 비슷한 구조를 가진 화면이 반복되는 것을 발견할 수 있다.
이런 부분들을 뜯어보면 블록 요소가 안쓰인 곳이 없다.
이제 이 블록 요소를 활용해서 페이지를 만들어보려한다.
먼저 아래의 사이트를 참고해보자.
https://www.w3schools.com/html/html_layout.asp
HTML Layout Elements and Techniques
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
2. 웹페이지 화면 만들어보기
스마트폰이 발달하기 전까지는 당연히 데스크탑 화면에 최적화 된 웹페이지 구현이 웹페이지를 만드는 것의 목표였다.
그러나 데스크탑보다 스마트폰 접근성이 더 높아진 지금은 핸드폰 화면에 최적화되어 웹페이지를 구현하는 것이 목표가 되었다.
위의 사이트에서는 기본적으로 제공하는 레이아웃이 2단으로 구성되어있다(데스크탑용).
이 블로그에서 할 과정들은 데스크탑 화면 보단 핸드폰 화면에 최적화 된 1단의 구성으로 페이지를 구성하는 것을 목표로 할 것이지만 처음이다보니 있는 그대로의 레이아웃을 사용해보려 한다.
아래의 사이트를 열면 데스크탑, 태블릿, 폰의 화면에 맞는 화면 구성을 그림으로 살펴볼 수 있다.
https://www.w3schools.com/css/css_rwd_intro.asp
Responsive Web Design Introduction
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이제 웹페이지 화면은 아래 예시처럼 구성을 해보려 한다.
CSS를 아직 배우지 않았기 때문에 최대한 HTML에서 할 수 있는 구성으로 채워보려한다.
1) 일단 코드 입력해보기
앞서 배웠던 <div> 를 사용해서 페이지를 구성해보려한다.
가장 밑바탕이 될 백그라운드를 잡은 후 구역을 나누려 한다.
하지만 코드를 짠 의도와는 달리 적절한 자리의 구성이 되지는 않는다.
HTML은 자리를 잡기만 할 뿐이어서 하나씩 순서대로 쌓인 것처럼 출력되기 때문이다.
이것을 하기 위해선 CSS의 positioning이 필요하지..만 일단 진행해보자! :)
코드는 아래를 참고하자(게시글을 몇 개를 올렸는데 이제야 코드블럭을 알아버린 나... 바보..).
<!DOCTYPE html>
<html lang="ko">
<head>
<title>15_layout.html</title>
</head>
<body>
<div id="wrap" style="background-color: red;">#wrap전체블럭
<div id="header" style="background-color: pink;">#header</div>
<div id="main" style="background-color: orange;">#main
<div id="sub" style="background-color: wheat;">#sub</div>
<div id="content" style="background-color: lawngreen;">#content</div>
</div><!-- id=main 끝 -->
<div id="footer" style="background-color: blue;">#footer</div>
</div><!-- id=wrap 끝 -->
</body>
</html>
그 결과물은 아래와 같다.
(위에서 말했듯 쌓여있는 상태로만 출력이 된다).
사실 웹사이트를 만드는 레이아웃은 반고정화가 되어있다고 생각해도 된다.
그래서 이제는 이 모든 과정이 담겨있는 명령어가 따로 생겼다.
그것이 바로 <header>,</header>, <main>,</main>, <footer>,</footer> 태그이며 시멘틱 요소라고도 한다.
* 시멘틱 요소 : 시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다.
즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
2) 인터넷 웹사이트 따라 만들어보기
- 헤더(header)
강사 선생님의 취향(ㅋㅋ)을 따라 동행복권 웹사이트의 레이아웃을 따라 만들어보려한다.
먼저 헤더 부분을 만들려한다.
헤더 부분은 또 로고 부분과 메뉴 부분, 두 부분으로 나누어서 만들어보려 한다.
우선 동행복권과 그 옆쪽에 있는 버튼들을 만들었다.
<div>
<span>동행복권</span>
<input type="button" value="로그인">
<input type="button" value="회원가입">
<input type="button" value="마이페이지">
<input type="button" value="고객센터">
</div>
그리고 하위 버튼을 만들려고 하는데 각 탭들은 또 세부의 탭을 가진 것, 즉 대분류로 묶을 수 있는 것이다.
그래서 이것들은 <ul>*로 묶어서 정리를 했고, 대분류라는 이름이나 분류 앞에 붙은 기호들은 굳이 필요 없기에 CSS를 사용하여 안보이게 만들었다.
* 기억을 되새겨 보아요 <ul>
unorderlist로 순서 없는 리스트를 만들 때 쓰는 요소입니다!
순서 있는 리스트를 만들땐? <ol>! (orderlist)
무언가의 정의를 내리는 목록을 만들 땐? <dl> (definition list)
- 메인(main)
다음은 메인 부분의 구성이다.
다 하기엔 어려움이 있으니 판매점 페이지를 구성해보려한다.
① 왼쪽 부분의 판매점이란 대분류 아래의 구입처 안내와 당첨 판매점이란 중분류 구분해주기
<div id="main"></div> <!-- main end -->
<div id="sub">
<h2 style="display: none">중분류</h2>
<span>판매점</span><br>
<ul style="list-style: none;">
<li>구입처안내</li>
<li>당첨판매점</li>
</ul>
</div><!-- sub end -->
② 오른쪽 상단, '지역으로 검색'과 '상호/지역으로 검색' 테이블 만들기
- 로또6/45판매점 조회를 표기한다.
- table로 구획을 나누어준다.
- 첫번째 구획에 제목인 "지역으로 검색"을 출력시키고 <select>를 이용하여 시도, 구군을 출력, <input type="button">으로 조회 버튼을 출력시킨다.
- 두번째 구획에 제목인 "상호/지역(읍/면/동)으로 검색"을 출력시키고 <select>를 이용하여 상호를 출력, <text>로 글자를 쓸 공간 출력, 그리고 <input type="button">으로 조회 버튼을 출력시킨다.
<div id="content">
<h3 style="display: none;">소분류</h3>
<span>로또6/45판매점 조회</span><br>
<table border="1">
<tr>
<td>
<strong>지역으로 검색</strong>
<form>
<select id="sido" name="sido">
<option>시/도선택</option>
<option>서울</option>
<option selected>경기</option>
<option>부산</option>
</select>
<select id="gugun" name="gugun">
<option>구/군선택</option>
<option>종로구</option>
<option selected>강남구</option>
<option>마포구</option>
</select>
<input type="button" value="조회">
</form>
</td>
<td>
<strong>상호/지역(읍/면/동)으로 검색</strong>
<form>
<select id="sangho" name="sangho">
<option selected>상호</option>
<option>지역(읍/면/동)</option>
</select>
<input type="text" id="keyword" name="keyword">
<input type="button" value="조회">
</form>
</td>
</tr>
</table>
</div> <!-- content end -->
③ 오른쪽 중하단, '검색결과' 테이블 만들기
- 테이블을 만들어서 각각의 데이터 입력하기
- 마지막 돋보기 버튼은 <a> 태그로 링크를 걸어서 이미지에 삽입시켰다.
<table border="1">
<tr>
<th>상호명</th>
<th>전화번호</th>
<th>소재지</th>
<th>위치보기</th>
</tr>
<tr>
<td>GS25(논현동현점)</td>
<td>02-516-0245</td>
<td>서울 강남구 도산대로50길 27 동현종합상가 맞은 편</td>
<td><a href="" src="../images/search.png"></td>
</tr>
</table>
- 푸터(footer)
마지막 푸터(꼬리말) 부분을 작업해보려한다.
모든 부분들을 다 작업하진 않으려하고 검은색으로 배경이 쳐져있는 검은 네모 박스 부분만 만들어보려한다.
개발자들은 사이트의 구조를 스스로 정하고 파악하고 작업할 수 있어야 한다.
지금까지 헤더의 한 부분들의 대분류를 정해서 작업하고, 메인의 어느 부분들도 대분류와 중분류로 나누어서 작업했던 것처럼 푸터 내에서도 각 항목들을 대분류로 나누어 작업해보려한다(당연히 이렇게 나누는 것은 개발자의 재량이자 몫이다. 다만 이전까지 배워왔던 것들을 최대한 활용해보고자 하는 의도로 메인에서는 <ul>, 푸터에서는 <ol>의 요소를 사용해보기로 한다).
① 꼬리말 부분을 먼저 구분한 뒤 검은 박스부분에 적혀있는 항목들을 <ol> 요소를 활용해 목록화를 시킨다.
② 출력되지 않아도 되는 부분들은 display none;으로 가린다.
③ 나머지 부분들(주소, 전화번호 등)을 출력시킨다.
<코드>
<div id="footer">
<h1 style="display: none;">꼬리말</h1>
<ol style="list-style: none;">
<li>이용약관</li>
<li>개인정보 처리방침</li>
<li>인쇄복권당첨금지급기준</li>
</ol>
주소 : 06719 서울 서초구 남부순환로 2423 한원빌딩 4층 고객문의 1588-6450 FAX 02-6933-3063
</div>
'⁂ HTML > : 기본 익히기' 카테고리의 다른 글
| [HTML] #4 서버에 대한 이해 (0) | 2022.07.29 |
|---|---|
| [HTML] #3-3 시맨틱 요소(semantic element) 알아보기 (0) | 2022.07.29 |
| [HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야? (0) | 2022.07.28 |
| [HTML] #2-4 HTML 파헤치기 4 : 폼의 속성 (0) | 2022.07.28 |
| [HTML] #2-3 HTML 파헤치기 3 : 폼 만들어보기 (0) | 2022.07.28 |