[웹코딩]2강 이미지 가운데 정렬해보기<DIV><Table>

지난 시간에 이어 배경이미지를 바꿔보고 그림 , 글씨 , 동영상도 배치해 볼게요.

[ 배경 이미지 패턴 검색 후 다운받기 ]

[ 메인화면 이미지 움짤 GIF 사진 다운받기 ]

메모장을 열고 소스를 써주세요.

메모장을 연습.html로 저장하고

저장된 페이지를 열어보면

이렇게 나옵니다.

사진을 가운데로 오게 하고 싶네요.

<div align=center>

</div>

이렇게 레이어 시트를 만들어 그 안에 이미지를 넣고 가운데 정렬 명령어를 넣으면 돼요.

div는 division의 약자이고

align은 라인을 좌,우,가운데 정렬하는 방법을 설정하는 거예요.

</P>

도 똑같은 역할을 하지만

<P> </P>는 좁은 개념이라 블럭을 삽입할 수 없지만

<DIV>는 레이어의 개념이라 <DIV> </DIV>안에 수 많은 블럭 명령어들을 삽입할 수 있어요.

짠~ 가운데 정렬이 되었어요.

이제 이미지가 정가운데 오도록 넣어보고 싶어요.

상하 중간에 넣으려면

테이블(표)를 만들어서 그 안에 이미지를 넣고 표전체를 가운데 정렬 해야해요.

<table width="100%" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td align="center" valign="middle">

</div>

</td>

</tr>

</table>

<TABLE> = 표

<TABLE>~</TABLE>안에 BORDER 속성을 설정하면 표 외곽선을 볼수 있어요.

<TR>~</TR>표의 한 줄.(Table Row) [행]

<TD>~</TD>표의 한 셀(칸)(Table Data) [열]입니다.

저장하고 실행해보니 결과물이 잘 나왔어요.

바로 이 <Table>명령어로 홈페이지를 표 형태로 만들 수 있는데요.

<table> </table>을 이용해

표를 만들고 각 셀안을 이미지나 링크 글씨 등으로 꾸며주는 거예요.

초기엔 모든 홈페이지가 이 방식으로 만들어 졌답니다.

HTML은 아주 간단한 명령어들이기 때문에 만들기가 정말 쉬웠더랬죠;

하지만 이 방법은

PC가 아닌

태블릿, 스마트폰 등 등 다양한 인터넷접속 기기가 나오면서

각 기기의 특성에 따라 화면비율이 엉망으로 보여지거나 실행 오류가 생기는 등

문제점이 계속 발생하게 됩니다.

그래서 요즘은 표<table>를 이용해서 홈페이지를 구성하지 않고

<DIV> </DIV>를 이용해 레이어 형태로 만들고 있어요.

앙꼬모찌