1. iframe을 사용해서 프레임 넣어보기
iframe 명령어를 사용해 문서 내 프레임을 만들고 그 내용을 채워보자.
웹사이트에서 이러한 프레임이 자주 사용되는 곳은 회원가입시 약관동의서가 적혀져 있는 창이다.
한 창 안에 많은 내용들을 다 넣기 힘들 때 새로운 프레임을 짜서 그 안에 넣는 것이다.
위의 사진은 아래와 같은 코드를 사용해 만든 결과물이다.
<!DOCTYPE html>
<html lang="ko"><head><title>07_iframe.html</title></head><body><!-- 프레임 삽입 -->약관동의<br><iframe src="06_미디어.html" width="300" height="200"></iframe>
<!--<div> 태그와 CSS로 프레임 모양 가능<textarea> 태그로 프레임 모양 가능--></body></html>
2. 페이지와 페이지를 연동하기(link)
세상엔 무수히 많은 페이지가 존재한다.
그리고 그 페이지들을 모두 연결하는 것이 아니라 사용자가 원하는 페이지들을 연결해서 정리해주는 것이 필요할 것이다.
이 웹페이지의 연결은 크게 1) 서로 다른 페이지를 연결하거나 2) 같은 페이지 내에서 문서를 연결(북마크)하는 방식으로 사용된다.
1) 서로 다른 페이지 연결하기
페이지의 연결은 정확한 주소를 알면 가능하다.
명령어의 기본적인 형태는 아래와 같다.
<a href="경로명+페이지명 또는 URL주소">문자열</a>
예시
<a href="https://www.itwill.co.kr/">아이티윌</a>
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.daum.net/">다음</a>
<hr>
<a href="04_색상.html">색상</a>
<a href="05_이미지.html">이미지</a>
*
만약 새 창으로 띄우고 싶을 땐 target="_blank" 를 입력한다.
더 자세한 사항은 아래의 사이트 참고.
https://www.w3schools.com/html/html_links.asp
2) 단락
긴 글이 적혀있는 뉴스기사가 적혀있는 웹 사이트를 살펴보면 단락과 단락 사이가 나누어져있는 것을 흔히 볼 수 있다.
이 단락을 나누게 하는 명령어가 바로 <p>,</p>이다.
이 명령어를 사용하면 <p>에서부터 </p>까지의 글자들을 한 단락으로 나누어준다.
3) 같은 페이지 내에서 문서 연결하기(북마크)
이 경우를 예로 들자면 긴 스크롤을 다 내렸을 때 사이트의 상단으로 다시 이동하는 버튼을 떠올리면 된다.
명령어는 아래와 같다.
<h1 id="아이디명">서울</h1>
<a href="#아이디명">여기</a>
* 여기서 #은 id를 가리키는 단축키이다.
이것을 연습하기 위해 W3Schools의 한 예제를 사용해보려 한다.
너무 길기 때문에 링크를 걸어놓는다.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
여기서 보면 #C4와 #C10이라는 id를 새로 만들고 그 아이디에 각각의 챕터로 이동하는 것을 부여하였다.
버튼을 누르면 바로 각각의 챕터로 이동한다.
4) 다른 페이지로 이동하면서 북마크한 곳으로 이동
아래의 문장을 입력하면 된다.
이 경우에 Jump to Chapter 4 버튼을 누르면 html_demo.html 페이지의 C4 아이디를 가진 곳으로 이동하게 된다.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
3. 페이지에 목록 만들기
목록을 만든다는 것은 결국 문서를 구조화할 필요가 있다는 것이다.
HTML은 글자 색을 바꾸거나 크기를 바꾸는 데에 주안을 두고 있는 것이 아니다.
이런 것들은 CSS를 활용하는 것이다.
오히려 문서의 구조, 커다란 줄기들을 정해두는 것에 주안을 두고 있다.
그렇기에 웹페이지를 구조화할 때 목록을 만든다.
HTML에서 만들어지는 목록은 다음과 같은 세 가지 유형으로 나누어진다.
1) 순서가 있는 목록
순서가 있다는 말은 다양한 순서를 붙일 수 있다.
아라비아 숫자, 로마자 숫자, 알파벳 등등.
명령어는 <ol>로 시작하며(;orderlist), 목록마다 <li>,</li>를 붙여서 구분한다.
2) 순서가 없는 목록
순서가 없는 목록을 만드는 명령어는 <ul>이며(;unoderlist), 목록마다 <li>,</li>를 붙여서 구분한다.
3) 정의 목록
정의 목록이란 일정 항목에 원하는 정의를 내려서 출력하는 것을 뜻한다.
이 때 사용되는 명령어는 <dl>이며 그 하위에 <dt>로 대분류를 정하고, 또 그 하위에 <dd>로 소분류를 정할 수 있다.
- dl : definition list ;정의목록
- df : definition term ;정의용어
- dd : definition description ;정의설명
*
물론 목록의 앞에 붙는 여러 기호들은 다양하고 더 눈에 띄는 것들로 바꿀 수 있지만 HTML에서는 굳이 작업하지 않는다.
그럼 어디서 작업할까. 그렇다, CSS이다.
HTML의 목적에 맞게 HTML로는 페이지의 구조를 짜는 것에 집중하자.
4. 테이블(표 만들기)
사이트에 왜 표가 들어가야하는 것일까.
정렬 때문이다.
그렇다면 사이트를 살펴볼 때 이러한 표를 본 적 있는지 떠올려보자.
위의 사진을 보면 표가 보이는가?
쇼핑 항목에 보이는 이미지와 글자들의 정렬을 살펴보면 마치 표 안에 들어가있는 것처럼 보이지 않는가?
그렇다.
이 사이트 안엔 보이지 않는 투명한 테두리를 가진 표가 들어있는 것이다.
이것을 HTML에서는 테이블(Tables)이라고 부른다.
1) 테이블의 기본 개념
엑셀을 떠올려보자.
열과 행, 그리고 열과 행이 만나면 생기는 하나의 네모 칸인 셀.
테이블에도 그러한 열, 행, 셀이 존재한다.
영어 그대로 column 열, row 행, cell 셀로 불린다.
그렇다면 과연 테이블 안에 테이블을 삽입하는 것은 가능할까?
가능하다.
다만 테이블마다의 마무리 코드(닫아주는)를 제대로 입력하지 않으면 에러가 나기에 조심해야한다.
이 에러가 나지 않을려면 여는 태그와 닫는 태그를 정확하게 살피는 것이다.
이제 본격적으로 Table 코드를 사용해보자.
2) 테이블 코드 사용해보기
<table border="1">
<tr> <!-- table row, 한줄 시작 --><td>셀1</td> <!-- table data, cell --><td>셀2</td><td>셀3</td></tr> <!-- 한줄 끝 --></table>
table에서 사용되는 코드는 아래와 같다.
<table> : 테이블 코드의 시작
<th> : table head; 표의 제목줄
<tr> : table row; 행의 나눔
<td> : table data; 셀의 내용
테이블은 당연히 크기도 설정할 수 있는데 앞에서와 마찬가지로 픽셀 단위와 퍼센트 단위 모두 설정 가능하다.
아래의 코드를 살펴봐보자.
<!-- 표크기(픽셀 단위) -->
<table border="1" width="500" height="300"><tr><th>이름</th><th>주소</th></tr><tr><td>무궁화</td><td>강남구 테헤란로</td></tr></table>
<!-- 표크기(% 단위) --><table border="1" width="50%"><tr><th>이름</th><th>주소</th></tr><tr><td>무궁화</td><td>강남구 테헤란로</td></tr></table>
3) 정렬하기
한글이나 엑셀 표에서 할 수 있는 정렬, HTML도 할 수 있다.
대신 기준에 따라 용어가 달라진다.
가로행 기준이라면 align 을 쓰며 left, center, right 으로 정렬할 수 있다.
세로열 기준이라면 valign 을 쓰며 top, middle, bottom 으로 정렬할 수 있다.
이러한 기준들을 각각 적용하여 코드를 짜서 테이블을 만들어보았다.
코드와 페이지 화면을 비교해보면서 각각의 차이점을 확인해보면 쉽게 이해할 수 있다.
먼저 코드는 아래와 같다.
그리고 출력된 화면은 아래와 같다.
4) 테이블 안에서 영역 구분하기
테이블은 크게 세 가지 영역으로 구분지을 수 있다.
물론 이 영역들을 적용하여 코드를 작성한다고 해서 출력되는 값이 다르게 보이거나 하지는 않지만 코드를 살펴본다면 데이터를 보기에 더 잘 정렬하여 확인할 수 있는 것이다.
세 가지 영역은 다음과 같다.
- thead : 머리말 영역
- tbody : 본문 영역
- tfoot : 꼬리말 영역
위의 내용들을 정리하여 1,2,3월에 냈던 요금을 표로 정리한 결과값을 도출해보자.
이때 월과 요금의 내용이 들어있는 제목 줄이 머리말 영역, 각 월과 요금들이 적혀있는 줄이 본문 영역, 합계와 합계금액이 적혀있는 곳을 꼬리말 영역으로 구분하였다.
아래의 코드와 출력된 결과 화면을 천천히 살펴봐보자.
* 코드 내용
* 결과 화면
<여담, 이나 앞으로 배울 것을 기대하게 하는 이야기>
유튜브 댓글을 떠올려보자.
수많은 댓글들이 있지만 처음부터 그 댓글들이 보이진 않는다.
"더보기" 버튼을 눌러야 수많은 댓글들이 보이기 시작한다.
이 버튼은 어떤 방식인진 아직 다 모르지만 무언가의 프로그래밍이 작동되게 만든다는 것은 이해가 된다.
만약 위의 사진에서는 1,2,3월의 요금 내용 옆에 더보기 버튼이 있고, 그 버튼을 누르면 4,5,6월의 요금이 나온다고 생각해보자.
이 때 tbody, 즉 본문 영역이 구분되어있기에 tbody 영역만 수정한다면 table 코드의 전체를 수정하지 않아도 되는 것이다.
그리고 이것을 가능하게 하는 것은 추후 스프링 부트와 함께 배우게 될 AJAX이다.
그 때를 기대해보자(와.. 신난다.... 으륩긌즈*.... 는틀륬으**...)
* 어렵겠지 ** 난 틀렸어
5) 테이블의 셀과 셀을 합치기
셀을 합치는 것도 당연히 가능하다.
셀을 합칠 때 가로로 합칠 지, 세로로 합칠 지에 따라 다르다.
가로일 경우엔 colspan, 세로일 경우엔 rowspan을 쓴다.
이 때 셀이 합쳐지는 것을 잘 생각해서 데이터를 배치해야한다.
아래의 코드와 결과물을 살펴보며 이해해보자.
* 코드 내용
* 출력 결과
6) 테이블 내부에 테이블 넣기
테이블의 마지막 챕터이다(화이팅).
테이블 안에 테이블을 넣는 것도 가능하다.
우선 아래와 같은 표를 하나 만들었다.
이제 나는 국어의 오른쪽, 수학의 위쪽인 빈 칸에 테이블을 만들려한다.
여기서 테이블을 삽입한다는 것은 셀 하나에 넣는 다는 뜻이다.
그 말인 즉슨, 이미 만들어진 테이블 안에 넣어야지 처음부터 넣어져있는 상태로 재창조할 수는 없다는 말이다.
위의 그림처럼 새로운 테이블이 들어갈 공간을 마련해두는 것이 첫번째 작업이다.
빈 공간에 새로운 테이블 코드를 열고 표를 만든다.
그리고 결과를 확인해보면 다음과 같다.
이렇게 오늘의 테이블 배움은 마친다.
내일은 HTML로 form(양식) 만드는 것을 배울 예정이다.
5. 마지막으로 받은 과제를 위한 과제
이거 만들기..
그럼 이제 저는 노가다하러 갑니다..
여러분 안녕..
+ 추가
'⁂ HTML > : 기본 익히기' 카테고리의 다른 글
| [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 |
| [HTML] #2-1 HTML 파헤치기 1 : 기본 문법, 문자(색상, 크기, 특수문자), 외부자료연결하기 (0) | 2022.07.27 |
| [HTML] #1-1 HTML이 뭐야? (0) | 2022.07.26 |