티스토리 뷰





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

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

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




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번째 공부에서 뵙도록 할게요. 감사합니다.


댓글
댓글쓰기 폼