안녕하세요. 돈혁입니다.
웹페이지를 만들때 상품을 나열할때 이럴때 필요한 리스트, 맨위로 맨아래로기능 다른 사이트로 연결하는 링크,
설명을 쉽게쉽게 만들게하는 이미지첨부 기능 이 세 기능을 알아보겠습니다.
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번째 공부에서 뵙도록 할게요. 감사합니다.
'컴퓨터활용 > HTML (웹프로그래밍)' 카테고리의 다른 글
HTML5공부5. 로그인창을 만들어보자.<input><text><password>....... (2) | 2018.09.17 |
---|---|
HTML5공부4. 웹페이지에 동영상 넣는법.<audio> <video> (6) | 2018.09.15 |
HTML5공부3. 리스트,링크,이미지,테이블 (0) | 2018.09.09 |
[HTML5] 2. 웹페이지를 만들어보자 (텍스트,주석,수평선) (0) | 2018.09.07 |
[HTML무엇일까] HTML5, 에디터, 기본구조 알아봅시다 (4) | 2018.09.02 |