|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 05편 : 프레임 |
#1. 프레임이란 무엇인가?
HTML에는 프레임이라는 개념이 있습니다.
요즈음 인터넷에서는 프레임을 사용하는 곳을 거의 볼 수 없지만,
과거 개인 홈페이지가 성했던 시대만해도 프레임은 거의 모든 곳에서 사용되고 있었습니다.
프레임(frame)이란 틀, 뼈대라는 뜻인데, HTML에서 사용되는 프레임 페이지는
다른 여러 개의 HTML페이지를 동시에 화면에 배치해서 보여주는 커다란 레이아웃 역할을 합니다.
대표적으로 응용되던 방식은,
메뉴와 메인 페이지를 나누어서 메뉴를 누르면 메인페이지만 바뀌게 하거나,
절대 안 바뀌는 프레임을 따로 나누어서 음악을 재생시키거나 하는 등의 방식이었습니다.
거의 대부분은 메뉴와 메인 페이지죠.
요즈음은 일체형 페이지가 대부분이라 잘 쓰이지 않습니다만,
프레임은 여전히 응용될 수 있는 곳에는 어디에든 쓰일 수 있습니다.
#2. 프레임을 만들어보자.
프레임을 만들려면 최하 3개의 HTML 페이지가 필요합니다.
편의를 위해서 frame.html, menu.html, main.html의 3개라고 하죠.
menu.html 과 main.html 은 미리 만들어둔 완성된 html 문서입니다.
지금까지 배웠던 것을 응용해서 원하는 페이지를 만드시면 됩니다.
그리고 frame.html은 완성된 다른 2개의 페이지를 가져와서 한 곳에서 보여주는 창틀입니다.
지금부터 쓰는 태그는 frame.html에서 쓰는 태그입니다.
[frameset 태그]
<frameset></frameset> 태그는 화면을 어떻게 나눌지를 설정해주는데, 화면을 가로와 세로로 크게 나눕니다.
( frameset 속성 cols )
cols속성은 화면을 세로로 어떻게 나눌지를 결정합니다.
들어가는 값은 %(100분율 비율)값, 혹은 픽셀로 된 수치값입니다.
(예1)
<frameset cols="30%, 70%"></frameset>
| (결과1)
frame.html 실행 시 화면 분할
|
(예2)
<frameset cols="300, *"></frameset>
| (결과2)
frame.html 실행 시 화면 분할
|
( frameset 속성 rows )
cols속성은 화면을 가로로 어떻게 나눌지를 결정합니다.
들어가는 값은 마찬가지로 %(100분율 비율)값, 혹은 픽셀로 된 수치값입니다.
rows와 cols를 병행하여 화면을 3구간 이상으로 나눌 수도 있습니다. 당연히 나눈 만큼의 html 페이지가 필요합니다.
(예)
<frameset rows="200, *">
<frameset cols="30%, 70%">
</frameset>
</frameset>
| (결과)
frame.html 실행 시 화면 분할
|
( frameset 속성 frameborder )
0혹은 1값을 가지며 프레임 페이지간의 경계선 표시 유무를 지정합니다.
0이 안 보이게, 1이 보이게.
( frameset 속성 border )
다른 border 속성처럼 수치를 적어주면 되며, 마찬가지로 경계선의 두께를 지정합니다.
( frameset 속성 bordercolor )
경계선의 색을 지정합니다.
( frameset 속성 framespacing )
프레임간의 여백을 지정합니다.
[frame 태그]
화면을 나눴다면 이제 분할된 영역에 html 페이지를 불러와야합니다.
이 때 사용되는 태그가 <frame> 입니다.
frame 태그는 frameset의 태그 안에 사용하는데,
frame 태그가 쓰인 순서에 맞춰서 frameset 태그로 분할한 화면에 차례대로 들어갑니다.
예는 아래의 속성을 보고서 보겠습니다.
( frame 속성 src )
img 태그와 마찬가지로 불러올 페이지의 주소를 지정합니다.
src 속성으로 주소가 지정되지 않으면 분할된 프레임에 아무 페이지도 불려오지 않습니다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html">
</frame>
<frame src="./main.html">
</frame>
</frameset>
| (결과1)
frame.html 실행 시 화면
|
( frame 속성 noresize )
분할된 프레임의 크기가 변하지 않게 하는 속성입니다.
이 속성을 지정하지 않으면 방문자가 프레임의 크기를 마우스로 클릭해서 마음대로 바꿀 수가 있습니다.
다른 속성과 다르게 따로 값을 지정해줄 필요없이 써주기만 하면 됩니다.
(예) <frame src="./main.html" noresize> </frame>
( frame 속성 scrolling )
스크롤링 속성은 아래의 3가지 값을 같습니다.
(1) yes : 해당 프레임에 스크롤바를 표시.
(2) no : 해당 프레임에 스크롤바를 표시하지 않음.
(3) auto : 평소에는 스크롤바를 표시하지 않지만, 해당 프레임의 내용이 프레임 크기보다 커지면 스크롤바를 자동으로 표시.
어떤 값을 지정해주느냐에 따라서 프레임에 스크롤바가 나올지 말지를 결정합니다.
( frame 속성 marginwidth )
프레임의 가로 여백의 크기를 지정합니다.
( frame 속성 marginheight )
프레임의 세로 여백의 크기를 지정합니다.
( frame 속성 topmargin, leftmargin, marginheight, marginwidth)
프레임의 각각 상하좌우 4방향에 해당하는 여백의 크기를 지정합니다.
( frame 속성 name )
프레임에서 name 속성은 중요합니다.
일반적으로 프레임을 나누는 이유는 메뉴 프레임 등의 하이퍼링크를 클릭해서
메뉴 프레임의 다른 페이지를 콘트롤하기 위함입니다.
이 때, 프레임에 이름이 없으면 특정한 프레임을 대상으로 해서 명령을 내릴 수가 없습니다.
때문에 프레임을 만들 때 반드시 아래와 같이 이름을 지정해주어야합니다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html" name="menu">
</frame>
<frame src="./main.html" name="main">
</frame>
</frameset>
|
name값은 자신이 원하는 임의의 이름을 지정하면 됩니다.
여기서 잠시 앞에서 배웠던 앵커태그를 다시 봅시다.
( a 태그 속성 target )
앞에서 이미 살펴본 속성입니다. 우리는 _blank 값이 들어갈 경우 새 창으로 링크가 뜬다는 것을 이미 알고 있습니다.
여기서 target 속성이 갖는 좀 더 명확한 의미는 '하이퍼링크의 결과를 표시할 대상'을 의미합니다.
예를 들어서 <a href="./contents.html"> 컨텐츠 표시 </a> 라는 링크가 있을 때,
이 링크를 누르면 링크가 표시되어있는 해당 페이지 자체가 contents.html로 바뀔 것입니다.
이것은 target, 즉 목표가 지정이 안 되어있기 때문입니다.
위에서 봤던 프레임을 다시 한 번 봅시다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html" name="menu">
</frame>
<frame src="./main.html" name="main">
</frame>
</frameset>
|
여기서 menu.html에 <a href="./contents.html"> 컨텐츠 표시 </a> 라는 링크가 있다고 칩시다.
이 링크를 누르면 프레임의 menu.html 페이지 부분이 contents.html 로 바뀌고, main.html은 그대로 표시되어있을 것입니다.
하지만 우리는 main.html 이 들어있는 프레임의 내용을 바꾸고 싶습니다. 이 때 바로 target을 지정합니다.
(예)<a href="./contents.html" target="main"> 컨텐츠 표시 </a>
이렇게 지정한 후 링크를 누르면, main 프레임창에 있는 main.html이 contents.html로 바뀌게 됩니다.
이것이 바로 프레임을 만드는 가장 큰 이유 중 하나입니다.
target속성은 이것 이외에도 몇 가지 기본 속성을 갖고 있습니다.
1) _blank : 새 창
2) _top : 모든 프레임을 무시하고 페이지 전체를 바꿈. 즉, 여기서는 frame.html 페이지 자체를 다른 페이지로 바꾸게 됨.
3) _parent : 이 창의 한 단계 위 부모창을 바꿈. (이 기능을 쓰게 되면 한 번 테스트해보세요.)
4) _self : 현재 창, 혹은 현재 프레임 내부를 바꿈.
만약 target에서 _blank를 지정하지 않았는데, 새 창에서 열린다면 그건 대게의 경우 target으로 지정된 대상이 없을 때입니다.
즉, 실수이거나 오타인 것이지요.
그런데 menu.html에는 하이퍼링크가 아주 많고, 그 대부분은 main 프레임의 내용을 바꾸고 싶습니다.
이 때 하이퍼링크 하나하나마나 target을 지정해줘야할까요?
답은 아닙니다.
#3. head 태그의 안을 한 번 건드려보자
2강에서 html의 기본구조를 배웠고, 거기서 html태그 안에는 head와 body태그가 있다고 배웠습니다.
그리고 우리가 그동안 배웠던 모든 것은 다 body태그 안에서 일어나는 일이구요.
이제 head 태그의 내부를 살짝만 건드려봅시다.
즉, html 문서에 설정을 하나 추가해봅시다. 아주 간단합니다.
다음은 menu.html 의 내부라고 가정합니다.
(예) # menu.html
<html>
<head>
설정이 들어갈 부분
</head>
<body>
<a href="./contents.html"> 컨텐츠 표시 </a>
</body>
</html> |
지금 우리가 이것을 보는 이유는, 모든 링크에 하나하나 target을 지정해주기가 귀찮아서였죠?
간단하게 한 줄로 써주죠.
<base target="main">
즉, 전체가 이렇게 됩니다.
(예) # menu.html
<html>
<head>
<base target="main">
</head>
<body>
<a href="./contents.html"> 컨텐츠 표시 </a>
</body>
</html> |
이제 다시 frame.html 로 가봅시다.
menu 프레임에 menu.html 이 불려져있습니다.
여기 있는 target 이 지정되어있지 않은 무슨 링크를 클릭하든,
내용이 바뀌는 것은 main 프레임의 내부입니다.
특정 페이지 전체의 기본 target을 다르게 설정해준 것입니다.
이제 프레임을 거의 다 봤습니다. 하나만 더 보겠습니다.
#4. 프레임을 지원하지 않는 브라우져
저는 한 번도 본 적이 없달까, 사실 대부분의 사람들이 제가 인터넷 익스플로러를 썼'었'기 때문에 잘 모르겠습니다만.
간혹 프레임이 표시되지 않는 브라우져가 있다고 합니다.
특히 요즘처럼 스마트폰이 많아지면 어떻게 될지 모르겠어요.
(아이팟에서 프레임이 지원되는 것은 확인했습니다만)
그러면 프레임을 지원하지 않는 브라우져를 위한 최소한의 배려는 없을까요?
그걸 배워보죠.
[ noframe 태그 ]
사용은 <noframe> 내용 </noframe> 이렇게 합니다.
보통은
<noframe>
이 페이지를 보려면 프레임을 지원하는 브라우저가 필요합니다.
</noframe>
이런 식으로 쓰고 끝입니다. 저 안에는 프레임을 지원하지 않는 브라우저가 볼 수 있는 내용이 출력됩니다.
어떤 식의 내용을 쓰실지는 제작자의 자유입니다.
#5. 인라인 프레임
인라인 프레임. 태그로는 iframe 이라고 씁니다. <iframe></iframe>
iframe은 html 문서 내부에 창문을 열어서 다른 문서를 불러오는 역할을 합니다.
프레임이랑 뭐가 다르냐구요?
frameset은 화면 전체를 가로나 세로로 나누는 것 밖에 못합니다.
하지만 iframe은 html 문서 안에 마치, 테이블로 작은 창을 하나 만든 것 처럼 구멍을 뚫어줍니다.
사용법을 볼까요?
<iframe src="./small_window.html" width="300" height="100" name="small_window" marginwidth="0" frameborder="0"></iframe>
기본적으로 frame 태그와 거의 같은 방식으로 쓰인다는 걸 볼 수 있을 것입니다.
하지만 table이나 td 태그 처럼 width와 height, 즉 가로 세로 길이를 지정하는 것이 보이죠?
이것은 페이지 한 가운데에 구멍을 낼 것이기 때문에 그 구멍의 크기를 지정해줄 필요가 있는 것입니다.
iframe은 페이지 가운데에 다른 페이지를 띄워서 특정 정보를 스크롤을 이용해서 보여줄 수도 있고,
iframe 내부의 정보만을 바꾸면서 외부에 영향을 주지 않을 수도 있는 등 다양한 용도로 활용될 수 있습니다.
이제 프레임도 다 배웠습니다.
html의 끝이 보입니다. 조금만 더 힘내죠.
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 04편 : 테이블 |
#1. 테이블이란 무엇인가?
HTML에서 하이퍼링크만큼이나, 혹은 더 많이 사용되는 것이 바로 테이블입니다.
테이블을 마스터하면 HTML은 끝난 것과도 같죠.
테이블이란 웹페이지에서 '표'와 같은 형식으로 보여지는 바둑판식 상자라고 보시면 됩니다.
아래 예를 보시죠.
테이블은 사각형의 격자무늬라는 모양의 한계를 갖고 있기는 하지만,
다양한 설정을 해줄 수 있기 때문에 그 활용 범위가 굉장히 높습니다.
#2. 테이블의 용도
1. 표를 만든다.
당연한 이야기이지만 테이블의 첫 번째 용도는 표를 만드는 것입니다.
태그를 이용한 레고쌓기 놀이를 통해 원하는 표를 만들어냅니다.
| 이름 | 성별 | 키 | 체중 | 비고 | | 홍길동 | 남자 | 171Cm | 68Kg | 도적 | | 임꺽정 | 남자 | 180Cm | 85Kg | 도적 | | 박문수 | 남자 | 168Cm | 52Kg | 암행어사 | | | | | | | | | | | | |
2. 내용을 나눈다.
이건 위의 1번과 비슷한 내용입니다만, 문서의 내용을 표를 통해서 나눌 수 있습니다.
여기서 중요한건 표 안에서 쓰는 태그와 표 밖에서 쓰는 태그는 서로 영향을 안 준다는 겁니다.
즉, 표를 사용하면 태그의 영향권에서 표 안의 내용을 (일부) 격리됩니다.
(예) <s></s>안에 테이블을 만들어서 글자를 써보기.
보시는 것 처럼
태그 영향을 안 받습니다.
있죠.
물론 이건 하나의 예시일뿐이고 실재로 이런 용도로 쓴다는 것은 아닙니다.
쓸 수도 있지만 그냥 태그를 닫았다가 다시 여는 게 편하겠죠.
3. 정렬을 시키거나 공간을 맞춘다.
이건 테이블의 아주 중요한 용도입니다.
아래의 예를 보죠.
(예)
사이어인 : 원숭이로 변한다.
나메크성인 : 머리에 촉수가 있다.
인조인간18호 : 크리링, 이 부러운 녀석.
이것을 :(콜론)을 기준으로 정확히 열을 맞춰서 정렬시키고 싶습니다.
하지만 일반적인 스페이스바로는 정렬시키는 게 귀찮을 뿐 아니라 불가능할 때도 많아요.
특히 특수문자나 영문, 숫자, 한글 등이 혼용될 경우는요. 하지만 테이블을 쓰면 간단해집니다.
사이어인
나메크성인
인조인간18호 | : 원숭이로 변한다.
: 머리에 촉수가 있다.
: 크리링, 이 부러운 녀석. |
테이블을 안 보이게 하면 끝.
사이어인
나메크성인
인조인간18호 | : 원숭이로 변한다.
: 머리에 촉수가 있다.
: 크리링, 이 부러운 녀석. |
또한 테이블은 글자 뿐만 아니라 그림 등 표현할 수 있는 여러가지 요소를 배치하는 데에 중요한 역할을 합니다. 예를 들어서 그림으로부터 자기가 원하는 만큼의 거리를 정확히 벌린 후 글씨를 쓰고 싶을 때,
스페이스바, 공백문자, 엔터키 등은 대략의 거리는 나와도 정확하게는 안 나오죠.
하지만 그럴 때 테이블의 길이를 정확히 맞추고 내용을 비우면 거리를 맞출 수 있습니다.
아래와 같이요.
|  |
| 글자 |
마찬가지로 테이블을 안 보이게 할 수도 있죠.
HTML작업을 할 때 어지간한 것은 테이블로 거리를 맞추시는 게 좋습니다.
안 그러면 뒤늦게 세밀한 조정이 필요하다는 것을 알게 되었을 때 복잡해진 태그들 위에 테이블을 새로 만들어야할 수도 있으니까요.
그러면 이제 테이블을 만들어보죠.
#3. 테이블을 만들어보자.
[table 태그] [tr 태그] [td 태그]
테이블은 3개의 태그가 기본적으로 항상 사용됩니다. 바로 <table><tr><td>입니다.
이것의 기본적인 사용형태는 아래와 같습니다
(예)
<table>
<tr>
<td>
내용
</td>
</tr>
</table>
|
<table>은 테이블을 만들어주고 테이블의 속성을 지정해주는 태그입니다.
하나의 테이블에는 하나의 테이블 태그가 쓰이는데 테이블의 내용은 항상 이 안에 들어갑니.
<table>내용이나 다른 하위 태그</table>
<tr>은 테이블의 세로칸을 만들었다는 뜻입니다.
<td>는 테이블의 가로칸을 만들었다는 뜻입니다.
한 번 볼까요?
아래는 <tr>과 <td>가 한 번씩 쓰였습니다.
그러면 가로와 세로가 한 번씩 만들어졌으니 1*1, 즉 한 칸 짜리 표가 나올 것입니다.
(예)
<table>
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과)
|
<tr>과 <td>의 사용은 보통
<tr> 태그의 안에 <td> 태그를 사용합니다.
그리고 <td> 태그의 안에는 표 안의 공간에 들어갈 내용을 넣어줍니다.
<tr><td>내용</td></tr>
이런 식으로요. 세로 칸을 하나 만들었는데 그 안에 가로 칸이 하나 있다는 뜻이죠.
이렇게 표 안에 만들어진 한 칸의 네모상자를 셀(cell)이라고 부릅니다.
<table></table>이 테이블을 만들거라는 태그라면
<tr></tr><td></td>는 그 안에 셀을 만들기 위한 태그인거죠.
그러면 다시 한 번 보세요.
<tr>은 테이블의 세로 칸을 만들었다는 뜻이고
<td>는 테이블의 가로 칸을 만들었다는 뜻입니다.
그러면 가로와 세로 칸을 두 번씩 만든 아래의 태그는 어떻게 보여질까요?
(예)
<table>
<tr>
<td>
내용1
</td>
</tr>
<tr>
<td>
내용1
</td>
</tr>
</table>
|
답은 아래와 같습니다.
왜 이렇게 될까요?
(첫 번째 세로 칸을 만들었다)
(가로 칸을 만들었다)
내용1
(가로 칸이 끝났다)
(첫 번째 세로 칸이 끝났다)
(두 번째 세로 칸을 만들었다)
(가로 칸을 만들었다)
내용2
(가로 칸이 끝났다)
(두 번째 세로 칸이 끝났다)
이렇게 되었기 때문입니다.
태그가 레고라고 한 것이 기억나시나요? 그냥 쌓고 조립하기 때문입니다.
그러면 이번에는 이렇게 해보죠.
세로 칸을 한 번 만들고 그 안에 가로 칸을 두 번 만들었습니다.
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
</table>
|
결과는 어떨까요?
(세로 칸을 만들었다)
(첫 번째 가로 칸을 만들었다)
내용1
(첫 번째 가로 칸이 끝났다)
(두 번째 가로 칸을 만들었다)
내용2
(두 번째 가로 칸이 끝났다)
(세로 칸이 끝났다)
아시겠나요? 이해만 되면 참 쉽죠? 그냥 블럭쌓기, 레고 놀이이니까요^^
그러면 이번에는 앞에 나왔던 이 모양을 만들어 봅시다.
우선 그 동안 배운 것만으로 한 번 만들어볼까요?
세로를 만들고, 가로를 만들고 끝내고, 가로를 만들고 끝내고, 세로를 끝내고,
세로를 만들고, 가로를 만들고 끝내고, 세로를 끝내고.
이렇게 해보죠.
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
<tr>
<td>
내용3
</td>
</tr>
</table>
|
만들어 질까요?
안타깝지만 안됩니다.
이렇게 되버리네요. 왜 그럴까요?
( td 속성 : colspan )
이유는 테이블 안에 일단 셀을 만들면, 아랫 줄에 만들어지는 셀의 간격도 위의 줄에 맞춰지기 때문입니다.
위에 두 칸 짜리 가로를 만들었는데 아래에는 하나 밖에 안 만들었으니, 공간이 하나 비는거죠.
이럴 때 지정해주는 td 태그의 속성이 바로 colspan 입니다.
colspan은 해당 셀이 가로 칸 몇 칸 분량을 차지해주는지를 지정해주는 건데,
이것은 윗 줄이나 아랫 줄에 가로로 만들어진 셀이 더 많을 때만 지정해줍니다.
저희는 여기서 위에 2칸이 만들어졌으니 2의 값을 지정해주죠.
colspan="2" 이렇게요.
그럼 다시 해볼까요?
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
</tr>
<tr>
<td colspan="2">
내용3
</td>
</tr>
</table>
| (결과)
|
잘 되는군요!
그럼 좀 더 응용해볼까요?
(예)
<table>
<tr>
<td>
내용1
</td>
<td>
내용2
</td>
<td>
내용3
</td>
</tr>
<tr>
<td>
내용4
</td>
<td colspan="2">
내용5
</td>
</tr>
<tr>
<td colspan="3">
내용6
</td>
</table>
| (결과)
|
레고놀이 맞죠?^^
이제 테이블에 대해서 거의 다 배웠습니다. 조금만 더 봐요.
( td 속성 : rowspan )
앞에서 본 colspan과 비슷하죠? 사용법도 같지만 다른 점은 효과입니다.
colspan이 가로로 얼마나 칸을 차지하는지를 설정해주는 것이라면,
rowspan은 세로로 얼마나 칸을 차지하는지를 설정해주는 것입니다.
이건 아래의 예만 보고서 끝내죠.
(예)
<table>
<tr>
<td rowspan="2">
내용1
</td>
<td>
내용2
</td>
</tr>
<tr>
<td>
내용3
</td>
</tr>
</table>
| (결과)
|
colspan과 rowspan을 섞어서 연습해보세요.
#4. 그 외의 테이블 속성.
( table 속성 : align )
align은 테이블의 속성이기도 하지만 앞으로 자주 나옵니다. 그리고 앞으로 나오는 모든 align속성은 아래의 3가지 값을 가집니다.
1) left : 좌측으로 정렬
2) center : 가운데 정렬
3) right : 우측으로 정렬
align은 정렬을 시킨다는 의미인데, 그 중에서도 가로줄 정렬을 이야기합니다.
아래의 예를 보시죠.
(예1)
<table align="center">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
(예2)
<table align="right>
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과2)
|
( td 속성 : align )
테이블의 align이 테이블 자체의 가로 위치를 나타냈다면, td의 align은 셀 내부의 내용이 어떻게 정렬될지를 이야기합니다.
이것은 아래의 속성과 함께 보겠습니다.
( td 속성 : valign )
valign은 v 즉, 버티컬. 세로 정렬을 시키는 속성입니다.
이것은 테이블 내부의 내용을 세로 정렬 시키는데 값은 아래의 세 가지 입니다.
1) top : 위로 정렬
2) middle : 가운데 정렬
3) bottom : 아래로 정렬
이것도 아래에서 다음에 나오는 속성과 함께 보도록 하겠습니다.
( td 속성 : width )
이것은 테이블의 가로 길이를 지정해주는 속성입니다.
물론 여러가지 상황에서 안의 내용이 불어나면 길이가 변할 수도 있지만, 기본적으로는 고정됩니다.
width 뒤에는 숫자를 써서 길이를 지정해줍니다.
다음에 나오는 속성과 함께 보도록 하겠습니다.
( td 속성 : height )
이것은 테이블의 세로 길이를 지정해주는 속성입니다.
width와 마찬가지로 뒤에 숫자를 써서 길이를 지정해줍니다.
그러면 위의 4가지를 합쳐서 예를 보죠.
(예1)
<table>
<tr>
<td width="100" height="300" align="center" valign="middle">
내용
</td>
</tr>
</table>
| (결과1)
|
( table 속성 : width )
테이블 자체의 가로 길이를 지정해주고 싶을 때는 table에 width 속성을 지정해주기도 합니다.
(예1)
<table width="300">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
( table 속성 : cellpadding )
cellpadding은 셀의 바깥 테두리와 셀 안의 내용 사이에 들어가는 여백공간의 길이를 지정해주는 속성입니다.
아래의 예를 보시면 이해가 빠르실 겁니다.
(예1)
<table cellpadding="0">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
(예2)
<table cellpadding="30">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과2)
|
( table 속성 : cellspacing )
테이블은 얼핏 보면 테두리가 하나처럼 보이지만, 사실은 두 개가 있습니다.
테이블 전체의 외곽 테두리와 셀 하나하나의 외곽 테두리이죠.
cellspacing은 테이블의 테두리와 셀의 테두리 사이의 여백을 지정해주는 속성입니다.
아래의 예를 보시죠.
(예1)
<table cellspacing="0">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과1)
|
(예2)
<table cellspacing="30">
<tr>
<td>
내용
</td>
</tr>
</table>
| (결과2)
|
여기서 꼭 명심하셔야할 것은,
처음에는 테이블을 만들 때, cellspacing 과 cellpadding의 값을 항상 지정해주는 습관을 가집시다.
그 이유는 이 두 값은 지정을 안 해주면 0이 아닌 기본 값을 갖기 때문입니다.
이것은 외관상의 문제보다 더 중요한 문제를 야기합니다.
테이블로 간격을 맞추거나 정렬을 할 때 여러 개의 테이블을 사용하게 될 때도 많습니다.
이 때 값을 1단위로 조정해서 맞추고 있는데, 어떤 테이블이 cellspacing 이나 cellpadding 값으로 임의의 알 수 없는 값을 가지면 미세한 조정이 불가능하기 때문입니다. 보기에는 테이블 크기가 서로 같아보이는데 여백 때문에 미묘하게 더 큰 크기를 갖는 테이블이 생기거나 하는 것이죠. 그러므로 이 값을 늘 기억하시기 바랍니다.
( table 속성 : border )
테이블의 테두리의 두께를 설정해주는 속성입니다.
0으로 맞추면 테이블이 눈에 보이지 않게 됩니다.
(하지만 눈에 보이지 않을 뿐 여전히 cellspacing 과 cellpadding 의 값은 갖고 있습니다.)
( table 속성 : bordercolor )
드디어 색깔이 나왔군요. 잠시 웹에서 쓰는 색상 코드에 관련된 설명을 하겠습니다.
웹에서는 색을 표시할 때 16진수로 전환된 6자리 색상코드를 사용합니다.
물론 red, blue와 같은 기본 색은 단어로 색을 지정해줘도 브라우져가 알아서 해석을 합니다.
하지만 기본 색 이외의 다양한 색을 사용하거나, 혹은 브라우져 자체의 속도를 위해서도 결국 색상코드를 사용하게 됩니다.
색상코드는 앞에 #(샵) 표시를 붙여줍니다. 붙이지 않아도 알아보긴 하나 붙이는 게 약속입니다. 꼭 붙이세요.
다음은 색상코드의 예입니다.
#FFFFFF : 흰 색
#000000 : 검은 색
이 두 가지가 색상 코드의 양쪽 끝입니다. 16진수는 0에서 시작해서 F로 끝나죠.
이 외에도 다양한 값을 쓸 수 있는데
#FF0000 : 빨간 색
#F6F5FD : 현재 이 글이 쓰여지고 있는 셀의 배경색
여러가지가 있습니다.
이 후 나오는 모든 속성의 색상 값은 이것을 이용해서 지정합니다.
그리고 색상 코드를 외워서 사용하는 것은 흰 색과 검은 색을 제외하고는 거의 불가능 합니다.
색상 코드를 자동으로 보여주는 프로그램이 많이 있으니 구해서 쓰시기 바랍니다.
혹시 구하지 못하시면 저한테 말씀하시면 보내드리겠습니다.
|
bordercolor는 테이블의 테두리의 색을 지정해주는 속성입니다. 값은 위의 색상코드로 지정을 해줍니다.
다음에 나오는 속성과 함께 예를 보겠습니다.
( table 속성 : bgcolor )
테이블의 배경색(BackGround Color)을 지정해주는 속성입니다.
마찬가지로 앞에서 본 색상 코드를 이용해서 지정해줍니다.
( td 속성 : bgcolor )
셀의 배경색을 지정해주는 속성입니다.
이제 예를 보겠습니다.
(예2)
<table border="5" bordercolor="00FF00" bgcolor="#FF0000" width="100">
<tr>
<td bgcolor="#0000FF">
내용
</td>
</tr>
</table>
| (결과2)
|
두께 5로 커진 연두색 테두리와, cellspacing의 여백 사이로 보이는 테이블 배경색 빨강, 그리고 다시 셀 테두리와 제일 안쪽에 파랑색 셀 배경색을 확인하실 수 있을겁니다.
마지막 보너스
( td 속성 : background )
셀에 그림파일을 배경으로 지정하는 속성입니다.
따라오느라 수고하셨습니다.
이번에는 좀 길었죠? 테이블이 끝났습니다.
이제 HTML은 거의 다 끝난거나 마찬가지 입니다.
테이블을 자유롭게 쓸 수 있을 때 홈페이지를 원하는데로 만들 수 있다는 것을 잊지마세요.
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 03편 : 글자쓰기와 이미지 출력, 하이퍼링크 |
#1. 글자를 쓰는 법
HTML문서에 글자나 문장을 쓰는 법은 간단합니다.
그냥 쓰기를 원하는 부분에 글자를 쓰면 됩니다.
하지만 웹페이지를 보시면 글자에 어떤 이펙트가 들어갔음을 보실 수 있습니다.
자주 쓰는 글자 관련 태그는 아래와 같습니다.
[b태그 : 글자를 굵게 한다(bold)]
[s태그 : 글자 가운데 선을 긋는다(stroke)]
[i태그 : 내용을 이탤릭체로 바꾼다]
[br태그 : 줄바꿈을 한다 (HTML은 줄바꿈을 따로 안 해주면 줄이 바뀌지 않는다. Enter키가 먹히지 않는다는 것)]
(예)
내용1<br>내용2
| (결과)
내용1
내용2
|
[br태그 응용 : 줄 간격을 띄운다 (더 여러 줄로도 응용 가능)]
(예)
내용1<br><br>내용2
| (결과)
내용1
내용2
|
[pre태그 : 안의 내용을 일반 글쓰기 처럼 쓸 수 있다]
(예)
<pre>
내용
랄랄라
~_~)~
</pre>
| (결과)내용
랄랄라
~_~)~
|
[font태그 : 글자 속성을 바꾼다. (바꾸는 법은 나중에)]
[ : 공백 문자 (띄어쓰기 할 때 필요)]
(예)
내용
| (결과)
내용
|
글자 관련은 이 정도만 알아두면 되겠네요.
더 알고 싶은 게 있겠지만 참으시고 일단 따라오세요.
#2. 그림을 보여주는 법
[img 태그 : 그림파일을 보여준다]
다음은 이미지 출력입니다.
(예)
<img src="./upload/dogcow03_01.jpg">
| (결과)
|
여기서 두 가지 처음 보는 게 나왔을 겁니다.
1) 우선 태그 안이 뭔가 복잡하다.
2) 이상한 파일 이름이 들어가있다.
( img 태그 속성 : src )
여기서 처음으로 태그의 속성값을 보게 되었는데요. 이것은 태그 안에서 태그가 어떤 방식으로 실행될지를 설정해줍니다.
이미지를 출력하는 태그는 <img>이죠. 하지만 이것만으로는 이미지가 출력되지 않아요.
왜냐하면 <img>태그는 보여줄 파일이 어디있는지 모르거든요.
그렇기 때문에 속성인 src가 쓰입니다. src는 source의 약자로 출처, 원본이란 뜻이죠.
대부분의 속성은 '='기호를 이용해서 값을 설정해주게 됩니다.
src의 경우는 src="파일 위치" 인데, 앞으로 모든 속성의 설정값은 큰 따옴표("") 혹은 작은 따옴표('')로 감싸주는 습관을 들이는 것이 좋습니다.
피치못하게 감싸지 못할 때를 제외하고는 말이죠.
다음으로 '파일 위치'에 대해서 잠깐 알아보죠.
파일 위치, 파일 경로 란 파일이 있는 장소, 파일의 주소를 말하는 것인데,
컴퓨터에서 파일 경로를 보여주는 법은 다음과 같습니다.
(1) c:\homepage/test/dogcow03_01.jpg ← C드라이브의 homepage폴더 안의 test폴더의 dogcow03_01.jpg라는 파일
(2) dogcow03_01.jpg ← 현재 실행되고 있는 파일과 같은 폴더 안의 dogcow03_01.jpg라는 파일
(3) ./dogcow03_01.jpg ← 현재 실행되고 있는 파일과 같은 폴더 안의 dogcow03_01.jpg라는 파일
(4) ../dogcow03_01.jpg ← 현재 실행되고 있는 파일이 있는 폴더 보다 한 단계 상위 폴더에 있는 dogcow03_01.jpg라는 파일
(5) http://www.aierse.net/dogcow03_01.jpg ← 해당 웹페이지 주소에 있는 dogcow03_01.jpg라는 파일 |
여기서 생소한 것은 아마도 (2), (3), (4)번 일겁니다.
(2)번의 경우는 현재 실행되고 있는 html파일과 같은 폴더 안에 dogcow03_01.jpg 라는 파일이 있다는 뜻입니다.
(3)번은 2번과 같은 뜻인데 여기서 제일 앞에 쓰는 ./ ← 이 표시를 익혀둡시다. 이것은 '현재폴더의 안'이라는 뜻으로 (2)번의 표현보다 좋은 표현입니다.
(4)번의 ../ ← 이 표시는 현재 실행되고 있는 html파일이 있는 폴더보다 한 단계 상위 폴더라는 뜻입니다.
예를 들어서 지금 실행되는 폴더의 경로가 c:\homepage/test/라면, 한 단계 상위 폴더는 homepage폴더가 됩니다.
 |
즉, src="./dogcow03_01.jpg" 는 '현재 html파일과 같은 폴더 안에 있는 dogcow03_01.jpg 이란 파일' 이라는 뜻이고,
<img src="./dogcow03_01.jpg"> 는 'src가 가리키고 있는 경로의 그림 파일을 보여줘라'라는 뜻이 됩니다.
( img 태그 속성 : border )
img태그(이미지 태그)에서는 한 가지를 더 알아두면 좋은데 바로 border 속성입니다.
border는 이미지 이외에도 여러가지 태그에서 사용되는 속성으로 보통은 '테두리의 두께'를 이야기합니다.
예를 들어서 <img src="./upload/dogcow03_01.jpg" border="5"> 이렇게 써주면 두께 5의 테두리를 가진 그림이 보여집니다. 일반적인 값은 0이죠. 직접 해보세요.
#3. 링크를 거는 법
[a 태그 : 다른 문서와 연결하는 링크를 만들어 줌]
마지막으로 하이퍼링크를 연결해주는 앵커태그 <a>입니다.
앵커태그는 저희가 익숙하게 사용하고 있는, '버튼이나 문장을 눌러서 다른 페이지로 이동하기'를 구현해주는 태그입니다.
( a 태그 속성 : href )
앵커태그는 <a>버튼 or 문장<a> 이런 형태를 갖지만, 속성이 없으면 이미지 태그와 마찬가지로 아무 일도 하지 못합니다.
앵커태그는 href라는 속성값을 갖는데 이것은 연결할 파일 등의 위치를 나타냅니다. 이미지 태그의 src 속성과 비슷하죠.
('hypertext reference'의 약자라 추정되는데 몰라도 됩니다.)
따라서 기본 사용법은 아래와 같습니다.
(예)
<a href="http://www.aierse.net/">홈페이지로 이동</a>
|
폴더 내에서만 이동할 경우 이렇게 해도 됩니다.
(예)
<a href="./dogcow03_01.jpg">그림도 연결된다</a>
|
다른 폴더로 가도 똑같이.
(예)
<a href="../test/test.html">문서도 연결된다</a>
|
( a 태그 속성 : target )
앵커태그는 기본적으로 현재 html페이지에서 다른 페이지로 이동을 시켜줍니다.
여기서 target이란 속성을 다시 한번 지정해줄 수 있는데,
target 속성이 지정되면 현재 보는 페이지를 바꾸는 게 아니라 새 창을 띄우는 등의 일을 할 수도 있습니다.
지금은 새 창 띄우기만 보죠.
(예)
<a href="./upload/dogcow03_01.jpg" target="_blank">그림도 연결된다</a>
| (결과)
그림도 연결된다
|
눌러보시면 새 창이 뜨는 것을 알 수 있습니다. target 속성에 _blank 값이 들어가면 새 창이 뜹니다.
마지막으로 앵커태그의 버튼을 이미지로 썼을 경우입니다. 이렇게도 가능하죠.
(예)
<a href="./upload/dogcow03_01.jpg" target="_blank"><img src="./upload/dogcow03_01.jpg"></a>
| (결과)
|
만일 그림 주변에 자동으로 border(테두리)가 형성되었다면 이미지의 border값을 0으로 해주면 원래대로 됩니다.
이번엔 여기까지만 하죠.
별 거 안 했는데 속성이랑 경로가 처음 나와서 괜히 길어졌네요^^;
|
|
[PREV] [1] ... [275][276][277][278][279][280][281] ... [379] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|