돈혁_ Creative

안녕하세요. 돈혁입니다. 

웹페이지를 만들때 상품을 나열할때 이럴때 필요한 리스트, 맨위로 맨아래로기능 다른 사이트로 연결하는 링크,

설명을 쉽게쉽게 만들게하는 이미지첨부 기능 이 세 기능을 알아보겠습니다.

HTML공부 : 리스트

리스트는 항목을 나열하는데 사용된다. 리스트는 번호 있는 리스트와 번호 없는 리스트로 나눌 수 있다.

                           리스트의 시작 ---->    <ul>

                                                                 <li> ... </li>    <-----리스트 항목

                                                                 <li> ... </li>    <-----리스트 항목

                           리스트의 종료 ---->    </ul>

번호 없는 리스트

번호 없는 리스트는 <ul> 태그로 시작한다. 각 리스트 항목은 <li> 태그로 시작한다 <li>는 "list item"의 약자이다.

번호 있는 리스트

번호 있는 리스트는 <ol>태그로 시작한다. 리스트 항목은 앞에 번호가 붙는다.

정의 리스트

정의 리스트는 항목들과 함께 항목의 정의가 표시되는 리스트이다.

정의 리스트는 <dl> 태그로 생성된다. <dt> 태그는 항목을 나타내며 <dd>태그는 항목에 대한 설명을 나타낸다.

HTML5공부 : 링크

<a>태그가 하이퍼링크를 정의한다. a는 "anchor"의 약자이다.

<a>요소의 가장 중요한 속성은 href 속성이다. 링크 주소는 href 속성으로 정의된다.

<a href="info.html">추가정보</a>

target 속성이 "_blank"이므로, 링크는 새로운 탭에서 열립니다.

target속성은 각 링큭가 클릭되었을때, 새로운 페이지가 어디에 열리는지를 지정한다.

_blank : 새로운 윈도우에서 새로운 페이지를 연다.
_self : 현재 윈도우에 새로운 페이지를 적재한다.

_parent : 부모 프레임에 새로운 페이지를 적재한다.

_top : 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다.

이미지

웹페이지에서 이미지는 아주 중요합니다. 이미지는 <img> 태그로 정의됩니다. 

<img src ="seolak.jpg" width="300" height = "230">

하나의 이미지를 표시하는 예는 위 그림과같다.

저장한 html파일과 이미지파일이 같은 폴더안에 있어야 저렇게 쓸수 있다.

파일형식도 정확히 적어야 이미지를 불러올수 있으니 주의하자.

이미지의 크기가 큰 경우는 <img> 태그의 width와 height태그를 이용해 이미지의 크기를 줄일수 있다.

테이블

테이블은 표 형태로, 데이터를 표시하는데 사용된다. <table> 태그로 정의 된다.

HTML에서는 테이블의 하나의 행을 <tr> ...</tr> 로 표현한다. tr은 table now의 약자이다.

행안의 데이터는 <td> ... </td> 로 표현한다. td는 table data의 약자이다.

위 사진과 같이 표시된다.  border는 테이블에 경계선을 만들어 주는 태그이다.

테이블에는 각 열의 제목(공통된 제목) 이 있는 경우가 있다.

그때는 <tr>로 행을 만들고 <th> ... </th> 를 사용하여 생성해주면 볼드체, 가운데 정렬로 생성된다.

이런식으로 볼드체 가운데정렬이 된것을 알수있다.

그밖에도 다른 태그들이 있다.

rowsapn : 상하의 셀들을 병합한다. 

ex) <td rowspan="2"> 상하의 2개 셀을 병합한다.

colspan : 좌우의 셀들을 병합한다.

ex) <td colsapn="3"> 좌우의 3개 셀을 병합한다.

caption : 테이블의 제목을 설정한다.

ex) : <caption> 돈혁의 블로그 </caption>

이렇게 HTML3번째 공부! 리스트, 링크, 이미지, 테이블 만드는법에대해 알아보았습니다.

이것들을 활용하고 응용한다면 간단하게 자신의 웹페이지를 꾸밀수 있을겁니다!.

다음 HTML4번째 공부에서 뵙도록 할게요. 감사합니다.