*리스트 만들기 - <ol>, <ul>, <li(ol과 ul의 하위에 위치)>
<ol> 순서 있는거
- 타입 : A(대문자 A부터 시작), a, I(로마자), start(몇번부터 시작할지 결정)
<ul> 순서 없는거
- 타입 : circle, square
<li>
- 타입 : value(start와 비슷. 중간에 번호 매김을 재지정 가능함)
※<li>의 쓰임 : <li value="12">테이블을 사용하는 이유 <-- 이런 식으로 쓰임.
<ol>, <ul> 예제
소스보기
<html>
<head>
<title>리스트(목록), 순서있고없고</title>
</head>
<body>
<ol start="3">
<li>html 어원
<ul type = "circle">
<li>html 어원
<li type = "square">테이블을 사용하는 이유
<li>테이블은 크기가 유동적이지 못함
</ul>
<li>테이블을 사용하는 이유
<li>테이블은 크기가 유동적이지 못함
</ol>
<ul type = "circle">
<li>html 어원
<li type = "square">테이블을 사용하는 이유
<li>테이블은 크기가 유동적이지 못함
</ul>
</body>
</html>
주황색으로 쓰여진 코드를 추가하면, 위와 같이 하위폴더로 들어간다.
*쓴대로 보여지는 태그 - <pre>
- 주의사항 : <ol>과 같은 태그는 그대로 쓰면 쓴대로 보여지지 않는다.
대신 이럴 때는 2가지 방법이 있는데,
<ol>
<xmp><ul></xmp> <-이렇게 쓰면 된다.
예제
소스코드
<html>
<head>
<title>쓴대로 보여지기</title>
</head>
<body>
<pre>
------------------------------------
월 화 수 목 금
1 웹표준
2 <ol>
3 <xmp><ul></xmp>
4
</pre>
</body>
</html>
*링크 만들기 태그 - <link>, <vlink>, <alink>
☆ 기본옵션
- link : 링크로 걸려져 있는 처음 상태의 색깔
- vlink : 방문하고 나왔을 때의 색깔
- alink : 마우스로 눌렀을 때의 색깔
글자에 링크걸기
이미지에 링크걸기
- 이미지에 테두리 없애기 : img 태그에 border를 추가해서 '0'으로 지정해주면 없어진다.
예제
그림에 마우스를 갖다댔을 때 "그림입니다" 라는 문구가 뜨게하는 title 기능
그림에도 링크를 거는 <a herf>태그 등이 적용되었다.
소스코드
<html>
<head>
<title>링크 a태그의 기본</title>
</head>
<body topmargin="50"
link="#ABF200"
vlink="#FFBB00"
alink="#C90000"
>
<font face="맑은 고딕">
<a href="01.html">인사말</a> <br>
<a href="02.html">조직도</a> <br>
<a href="03.html">회사BI소개</a> <br>
<a href="04.html">오시는길</a> <br><br><br>
</font>
<a href="05.html">
<img src="img/yes.jpg" width="300" border="0" title="그림입니다">
</a>
</body>
</html>
새 창 띄우기 태그 - <target = "_blank">
- 그림이나 글자에 하이퍼링크 적용할 때 위의 target 태그를 통해 새창을 띄울 수 있다.
하이퍼링크된 글자 혹은 그림을 클릭할 경우, 새 창이 띄워진다.
"인사말" 글자에 새 창 태그가 적용되었다. 인사말을 클릭하면,
해당 창이 새창으로 이동하게 된다.
소스코드
<html>
<head>
<title>링크 a태그의 기본</title>
</head>
<body topmargin="50"
link="#ABF200"
vlink="#FFBB00"
alink="#C90000"
>
<font face="맑은 고딕">
<a href="01.html"
target="_blank">인사말</a> <br>
<a href="02.html">조직도</a> <br>
<a href="03.html">회사BI소개</a> <br>
<a href="04.html">오시는길</a> <br><br><br>
</font>
<a href="05.html">
<img src="img/yes.jpg" width="300" border="0" title="그림입니다">
</a>
</body>
</html>
* 이미지를 배경으로 설정하기 - <background>
<body> 안에 백그라운드 태그를 적용하면 위의 그림과 같이 이미지가 적용된다.
위 그림과 같이 바둑판식으로 배경 이미지가 정렬된다.
*<table>에 배경색 설정해서 링크테이블을 구분하기
그런데, 링크가 잘 안보인다. 그래서 잘 보이게 해주고 싶다. 어떻게 해야 할까?
위 그림처럼 글자와 그림 전체에 흰색 배경이 들어간 것을 볼 수 있다.
나오게 하려면, table에 bgcolor를 적용해주면 된다.
소스보기
<html>
<head>
<title>링크 a태그의 기본</title>
</head>
<body topmargin="50" background="img/bg_line.jpg"
link="#ABF200"
vlink="#FFBB00"
alink="#C90000"
>
<table bgcolor="ffffff">
<tr>
<td>
<font face="맑은 고딕">
<a href="01.html"
target="_blank">인사말</a> <br>
<a href="02.html">조직도</a> <br>
<a href="03.html">회사BI소개</a> <br>
<a href="04.html">오시는길</a> <br><br><br>
</font>
<a href="05.html">
<img src="img/yes.jpg" width="300px" border="0" title="그림입니다">
</a>
</tr>
</td>
</table>
</body>
</html>
s(ㅇ_ㅇ)/