heenam
2. HTML5 기본 요소 본문
텍스트 표시
HTML 문서에서 텍스트는 다음과 같이 특별한 테그 없이도 <body> ... </body> 안에서 표시할 수 있다. 하지만 여러
줄로 이루어진 텍스트는 단락을 생성한 후에 단락 안에서 표시하는 것이 좋다.
단락
단락은 <p>태그로 정의 된다. 종료 태그는 안해도 되지만 하는것이 좋다.
<p>태그를 사용하면 단락의 전후에 빈줄을 추가된다.
단락이 아닌 줄바꿈을 원할때는 <br>태그를 사용한다. <br>태그는 종료 태그를 하지 않는다.
텍스트 입력 시 주의할 점
HTML 코드에서 엔터키를 사용하더라도 웹 브라우저에서는 적용되지 않기 때문에 <p>와 <br>을 적절히 잘
사용해야 한다.
<pre> 태그
<p>와 <br>을 사용하지 않고 프로그래머가 입력한 그대로 웹 브라우저에 적용하고 싶을 때는 <pre>...</pre>를
사용하면 해결된다.
헤딩
헤딩은 웹 페이지의 머리기사이다. 문서의 중요한 키워드를 사용자에게 보여줄때 사용한다.
<h1>...</h1> 태그로 정의 되며 숫자 6까지 사용가능 하다.
숫자가 작을 수록 글씨가 크며 h5부터는 일반적용되는 글씨보다 작게 적용되어 나온다.
주석
주석은 코드를 설명하는 글이다. <!--내용--> 태그로 정의된다.
특수문자
<와> 같은 문자를 화면에 표시하려면 상당히 어렵다. 왜냐하면 태그를 표현하기 위해 이미 사용하고 있기 때문이다.
따라서 <와> 같은 문자는 < 와 > 라고 적어야 웹 브라우저에 <와>로 나타난다.
리스트
리스트는 항복을 나열하는 데 사용된다. 리스트는 번호 잇는 리스트와 번호 없는 리스트로 나눌 수 있다.
리스트의 기본 형태는
<ul> <!--리스트의 시작-->
<li>...</li> <!--리스트 항목-->
</ul> <!--리스트의 종료-->이며, <ul>...</ul>는 번호 없는 리스트 <ol>...</ol>은 번호 있는 리스트 이다.
정의 리스트
항목들과 함께 항복의 정의(설명)가 표시되는 리스트이다.
<dl> <!-- 정의 리스트의 시작-->
<dt>...</dt> <!-- 단어-->
<dd>...</dd> <!-- 단어의 설명-->
</dl> <!-- 정의 리스트의 종료-->링크
하이퍼 링크는 다른 문서로 점프할 수 있는 단어나 이미지이다. <a> 태그가 하이퍼 링크를 정의한다.
a는 "anchor"의 약자이다.
<a href = "링크 주소" 화면에 보이는 링크 이름</a>href 속성은 링크의 목적지를 나타낸다.
화면에서 링크는 기본적으로 다음과 같은 색상으로 표시된다.
+ 방문하지 않은 링크는 밑줄이 그어져 있고 청색이다.
+ 방문한 링크는 밑줄이 그어져 있고 보라색이다.
+ 활성 링크(active link)는 밑줄이 그어져 있고 빨간색이다.
target 속성
target 속성은 각 링크가 클릭되었을때, 새로운 페이지가 어디에 열리는지를 지정한다.
<a href ="www.naver.com" target = "target 속성"> 네이버 주소</a>
target 속성안에 필요에 따라 _blank, _self, _parent, _top 이 들어 갈 수 있다.
id 속성
<a href ="#sectionl"> 참고사항으로 가려면 여기를 클릭하세요.</a>
<a id = "sectionl"> 참고사항</a>"참고사항으로 가려면 여기를 클릭하세요." 을 클릭하면 "참고사항"으로 넘어간다. (같은 페이지에서 스크롤이 내려가는 느낌)
이메일 링크
<a href ="mailto: hong@google.com?subject=Feedback">
hong@google.com</a>다운로드 링크
<a href ="naver.com/data.zip">
파일 다운로드</a><base>링크
헤드 섹션에서 <baes> 태그를 사용하면 모든 링크에 대한 기본 디렉토리를 지정할 수 있다.
<head>
<base href = "http://www.company.com" />
<head>
<a href = "info.html" target = "_blank"> 참고사항</a>이미지
이미지는 <img>태그로 정의 된다. 브라우저는 <img> 태그를 다른 태그들에 비하여 약간 다르게 처리한다. <img> 태 그를 발견하면 화면에 표시하기 전에 서버로 부터 다운로드를 받아야 한다.
<img border="0" src="seolak.jpg" alt="설악산" width="300" height="230">width와 height 속성은 가로, 세로 크기를 의미한다.
기본적인 단위는 픽셀이다. 하지만 %단위를 사용하여 브라우저의 크기에 비례하여 상대적으로 이미지의 크기를
지정 할 수 있다. 이미지를 표시할 떄는 반드시 이미지의 크기를 지정하는 것이 좋다. 크기가 지정되면 브라우저는
페이지를 로드할 때, 화면에 이미지를 표시하는 데 필요한 공간을 미리 확보한다. 만약 이들 정보가 없으면 브라우저는
이비지의 크기를 모르게 되고 따라서 페이지 로드 중에 레이아웃이 변경될 수 있다.
alt 속성은 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에, 표시되는 대체 텍스트를 지정한다.
웹에서 사용하는 이미지의 종류
| 장단점 | JPEG | PNG | GIF |
| 추천 이미지 | 실사 사진과 같이 복자바고 많은 색상으로 이루어진 이미지 | 클립 아트와 같이 적은 수의 색상을 가진 이미지 | PNG처럼 로고나 클립 아트 형태의 이미지 |
| 압축과정 | 약간의 데이터는 영구히 사라짐 | 무손실 | 무손실 |
| 파일 크기 | 작다 | JPEG보단 크다 | |
| 투명 배경 지원 | 지원하지 않음 | 지원함 | 지원함 |
| 애니메이션 지원 | 지원하지 않음 | 지원함 |
이미지의 크기가 큰 경우 처리 방법
1200만 화소를 가진 스마트폰 카메라로 사진을 찍으면 이미지의 크기가 상당히 커질 수 있다. 물론 <img> 태그의
width와 height 태그를 이용해 화면에서 이미지의 크기를 줄일 수 있다. 하지만 이미지의 원본 크기는 그대로 두고,
화면에서 표시할 때만 크기를 작게 지정하는 방법은 문제점이 있다. 따라서 가장 좋은 방법은 이미지를 서버에
올리기 전에 포토샵과 같은 사진 애플리케이션을 사용해 이비지의 크기를 적절하게 줄엿 올리는 것이다.
일반적으로 웹에서 이미지의 크기는 800*800보다 작아야 한다.
테이블
테이블<table>은 표 형태의 데이터를 표시하는 데 사용된다.
HTML에서는 테이블의 하나의 행을 <tr>...</tr>로 표현한다. tr은 물론 "table row"의 약자이다.
행안의 데이터는 <td>...</td> 요소로 표현 한다. td는 "table data"의 약자이다.
<table border = "1">
<caption>
최근에 본 영화들
</caption>
<tr>
<th>1열</th>
<th>2열</th>
<th>3열</th>
</tr>
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td colspan="3">3행 1열</td>
</tr>
</table>rowspan은 상하의 셀들을 병합하고 colspan은 좌우의 셀들을 병합한다.
테이블 캡션
테이블의 제목을 삽입하려면 <caption>...</caption>을 사용한다.
'Wep Programming > HTML5' 카테고리의 다른 글
| HTML5 위치 정보와 드래그 드롭 (0) | 2020.07.24 |
|---|---|
| 3. HTML5 멀티미디어와 입력 양식 (0) | 2020.05.22 |
| 1. 기초사항 (0) | 2020.05.14 |