HTML페이지에 <Enter> 키를 여러 개 입력해도 한 개의 빈칸으로 처리되어 다음 줄로 넘어가지 않는다.
새로운 줄로 넘기고자 하면 <br> 태그를 사용해야한다.
종료 태그는 없다.
6. 블록 태그와 인라인 태그
HTML 태그들은 블록 태그와 인라인 태그로 나뉜다.
● 블록(block) 태그
▪ 항상 새 라인에서 시작하여 출력
▪ 양 옆에 다른 콘텐트를 배치하지 않고 한 라인 독점 사용
▪ 블록 태그 : <p>, <h1>, <div>, <ul>
<div> 태그 - 블록을 구성하기 위함 - <p> 태그는 문단을 만들기 위해 사용되지만, <div>는 특별한 의미 없이 여러 HTML 태그들을 블록으로 묶는 컨테이너로 이용된다. - 예를 들어, <div> 블록 전체에 동일한 CSS 스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다루고자 할 때 사용한다.
● 인라인(inline) 태그
▪ 블록 속에 삽입되어 블록의 일부로 출력
▪ 인라인 태그 : <strong>, <a>, <img>, <span>
<span> 태그 - 텍스트 일부분에 특별한 모양을 주거나, 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 사용한다.
<dl> <dt><strong>Internet Explorer</strong> // 용어 <dd> 마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용 // 설명 <dt><strong>Firefox Mozilla</strong> <dd>재단에서 오픈 소스로 만든 것으로 W3C의 웹 표준을 선도 <dt><strong>Chrome</strong> <dd>구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용 </dl>
리스트 특징
- 리스트의 각 아이템은 <li> 태그를 사용하며, </li>는 생략 가능하다.
- 아이템을 나타내는 마커(marker)
▪ type : 마커의 종류
type="1" (디폴트) → 1, 2, 3 ...
type="A" → A, B, C ...
type="a" → a, b, c ...
type="i" → i, ii, iii ...
▪ start : 마커의 시작 값 (단, 숫자에 대해서만 적용 가능)
start="5" → 5, 6, 7 ...
<table> 표 만들기
<table> ... </table>
▪ <table> : 표 전체를 담는 컨테이너
▪ <caption> : 표 제목
▪ <thead> : 헤딩 셀 그룹
▪ <tfoot> : 바닥 셀 그룹
▪ <tbody> : 데이터 셀 그룹
▪ <tr> : 행. 여러개의 <td>, <th> 포함
▪ <th> : 제목(헤딩) 셀
▪ <td> : 데이터 셀
비정형 표 만들기
▪ <td rowspan="3"> </td> : 열로 3칸 합치기
▪ <td colspan="2"> </td> : 행으로 2칸 합치기
하이퍼링크
하이퍼링크(hyper link)
- HTML 페이지에서 다른 HTML 페이지를 연결하는 고리
- 텍스트나 이미지에 다른 웹 페이지의 주소를 달아서 만든다.
- 하이퍼링크는 같은 사이트에 다른 HTML 페이지뿐 아니라, 다른 사이트에 있는 웹페이지를 연결하기도 한다.
<a> 하이퍼링크 만들기
<a href="URL" / "URL#앵커이름" / "#앵커이름" target="윈도우 이름" download> 텍스트 혹은 이미지 </a>
▪ href : 이동할 HTMl 페이지의 URL 혹은 HTML 페이지 내 앵커 이름
1. 같은 사이트의 HTML 페이지를 연결하는 경우 → HTML 파일의 경로명만 지정 <a href="picturepage.html"> 클릭하면 사진 페이지로 이동합니다. </a>
2. 다른 웹 사이트로 연결하는 경우 → "http://"로 시작하는 웹 사이트의 주소 지정 <a href="http://www.naver.com> 네이버 </a>
▪ target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
_blank, _self, _parent, _top, 윈도우 이름
▪ download : 링크가 클릭되면 href에 지정된 파일이 다운로드 됨
이미지, PDF, MP3, HTML 파일, HWP 파일, PPT 파일 등 모든 파일을 다운로드 할 수 있는 링크를 만든다. 이 때 다운로드 할 파일명은 href 속성에 지정한다. <a href="Elvis.png" download> 엘비스 사진 다운로드 </a>
링크 텍스트의 색
링크 텍스트는 사용하는 과정에서 3가지 색으로 변경된다.
○ 처음 링크 (standard link) : 밑줄과 함께 blue색
○ 방문이 이루어진 링크 (visited link) : purple 색
○ 마우스로 링크를 누르고 있는 동안 (active link) : red 색
링크의 디폴트 색은 CSS3를 이용하여 변경할 수 있다.
id 속성으로 앵커 만들기
긴 내용을 가진 웹 페이지를 읽을 때 사용자는 브라우저 스크린을 오르락내리락하면서 읽어야하는 어려움을 해소하고 문서를 쉽게 읽을 수 있도록, 문서 내 특정 위치로 이동하는 링크를 만들 수 있도록 하였다ㅏ. 문서의 특정 위치를 앵커(anchor)라고 한다. 목차를 만들기 위함으로 해석해본다.
