4. 앨범을 만들어 보자

2017. 8. 5. 22:32ㆍ하루만에 프로그래밍 끝내기/HTML

1. 웹페이지로 앨범을 만들려면 어떻게 해야 할지 레이아웃을 생각해 봅니다.


- 단을 나눠 사용하는 방법

- 표를 이용하는 방법

- 그림,글자,태그를 이용하여 배치하는 방법
 


2. 표를 사용하여 만드는 방법
   -1) Table 예제

 
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>앨범만들기 - 표</title>
</head>
<body>
 <table border="solid 1px black">
  <tr>
   <td>1행 1열</td>
   <td>1행 2열</td>
  </tr>
  <tr>
   <td>2행 1열</td>
   <td>2행 2열</td>
  </tr>
 </table>
</body>
</html>


   -2) Table 속성

속성 

설명 

border="수치" 

테두리의 두께를 지정합니다. 

width="수치" 

표의 가로 길이를 지정합니다. 

height="수치" 

표의 세로 길이를 지정합니다. 

align="정렬" 

표에서 정렬 방법을 지정합니다. 

 

3. 예제

 
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>앨범만들기 - 표</title>
</head>
<body>
 <table border="solid 1px black"; width="800px"; height=400px; align="center">
  <tr align="center"; bgcolor="lightgray">
   <td height="50px";>사진1</td>
   <td height="50px";>사진2</td>
  </tr>
  <tr>
   <td><img src="../img/4-01.png"></td>
   <td><img src="../img/4-02.png"></td>
  </tr>
 </table>
</body>
</html>


저작자표시 비영리 동일조건

'하루만에 프로그래밍 끝내기 > HTML' 카테고리의 다른 글

6. 멀티미디어를 넣어보자 - Audio  (0) 2017.08.06
5. 페이지를 넘어가자, 하이퍼링크  (0) 2017.08.06
3. 이미지를 불러 보자  (0) 2017.08.02
2. 나를 소개합니다!  (0) 2017.08.02
1. HTML 시작하기  (0) 2017.08.02

관련글

댓글 1

티스토리툴바