[Web] SNS형 게시판 만들기 프로젝트 (2) - 기본 레이아웃
전체적인 디자인을 구상했습니다.
2차 과제는 기본 게시판과 글 작성 페이지를 구현하는 것입니다.
기본적인 레이아웃을 잡으라는 과제이므로 table을 활용해서 기본 레이아웃을 잡읍시다.
저번에 작성한 스토리보드를 기반으로 만들어봅시다.
CSS 활용은 우선 최소한으로 해보겠습니다. 대신 코드가 굉장히 더러워집니다;;
메인 게시판으로 이동하는 이미지 링크를 먼저 구현합니다.
제가 자주 쓰는 저작권 문제없는 이미지를 받는 사이트가 있습니다.
무료 아이콘 SVG, PNG, ICO 또는 ICNS
icon-icons.com
여기서 적당한 집 아이콘을 다운로드하여서 사용해주겠습니다.
왼쪽 위 구석에 홈 이미지를 박아둘거기때문에 따로 위치 조정은 안 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write</title>
<style>
</style>
</head>
<body>
<header>
<a href="main.html"><img src="image/home.png" style="width:50px; height:auto"></a>
</header>
</body>
</html>
다운로드한 사진 크기가 꽤 크기 때문에 적당한 사이즈 조절을 해줍니다.
정사각형 사진이기 때문에 height:auto로 해도 width 비율에 맞춰서 사진이 조절됩니다.
사진이 아주 예쁘게 들어갔습니다. 여기까진 쉽습니다.
이제 텍스트 박스를 넣어줄까요?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write</title>
<style>
</style>
</head>
<body>
<div class="home">
<a href="main.html"><img src="home.png" style="width:50px; height:auto"></a>
</div>
<div class="text_box" >
<textarea name="main_text" rows="20" cols="80"></textarea>
<form action="#" method="post">
<input style="vertical-align:bottom;" type="submit" name="in" value="글 등록하기">
</form>
</div>
</body>
</html>
html로 코드를 작성할 때는 class명을 적어주는 게 좋습니다. 나중에 CSS를 적용할 때 태그명으로 지정해도 괜찮지만 역할 이름으로 지정해서 조절해주는 게 가장 관리하기가 편합니다.
textarea 코드로 text박스를 만들어 줍시다. input 박스의 vertical-align은 사실 별 효과가 없습니다....;;
문제는 이렇게 작성하면 텍스트 창의 위치가 영 아니게 됩니다.
가운데로 이동시키기 위해서는 여러 가지 방법이 있는데요. 저는 여기서 CSS를 활용해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write</title>
<style>
.text_box {
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-200px;
}
</style>
</head>
<body>
<div class="home">
<a href="main.html"><img src="home.png" style="width:50px; height:auto"></a>
</div>
<div class="text_box" >
<textarea name="main_text" rows="20" cols="80"></textarea>
<form action="#" method="post">
<input style="vertical-align:bottom;" type="submit" name="in" value="글 등록하기">
</form>
</div>
</body>
</html>
position과 margin관련 CSS는 다음 포스팅에서 말씀드리겠습니다. 다음 포스팅에서 엄청나게 많이 씁니다.
이렇게 적용하면 어느 정도 중앙에 배치가 됩니다.
이렇게 간단하게 write.html은 끝났습니다.
이제 제일 골치 아팠던 main.html로 갑시다.
이번 과제는 table을 활용해서 복잡한 레이아웃을 잡아주는 것입니다.
전체적인 레이아웃을 잡을 때 옛날에는 table을 활용해서 잡아줬습니다.
이렇게 되면 나중에 보수작업을 할 때 문제가 발생합니다.
그래서 요즘은 header, section, aside, footer등과 같은 태그를 이용해서 관리를 해주기도 합니다.
실제로 웹페이지를 분석하면 section태그가 굉장히 많습니다.
하지만 이번엔 table을 사용하라 하셨으니.... 불편해도 합시다.
스토리보드를 참고합시다.
section, heade, aside를 사용하면 굉장히 편하게 짤 수 있지만 table로 짜게 되면 큰 테이블 틀을 잡아줘야 합니다.
이렇게 테이블 셀을 짜주고 2행과 3행을 합쳐서 디자인을 해줍시다.
우선 home.html로 이동하는 이미지는 1행 1열에 위치를 잡아줍시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
<style>
</style>
</head>
<body>
<table>
<tr>
<!--home-->
<td><a href="#"><img src="home.png" style="width:50px; height:auto;"></a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<!--text print-->
<td>
</td>
<!--profile-->
<td>
</td>
</tr>
<!--just base-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
홈은 눌러도 자기 자신으로 와야 하기 때문에 href를 #으로 지정해줍시다.
내부 게시글은 신경 써야 할게 좀 많기 때문에 우선 우측의 회원정보를 구현해봅시다.
2행 3열에 정보가 놓이기 때문에 회원정보를 담을 테이블을 지정해줍시다.
테이블로 제작할 때 팁이라면 border="1"로 해서 전체 틀을 보이게 해 줍시다. 안 그러면 헷갈려요... ㅠㅠ
회원정보 테이블의 틀은 이렇게 구성됩니다. 전체 틀은 2행 3열로 구성됩니다.
그리고 1행 2,3열은 열병합을 해줍시다. 마찬가지로 사진이 들어가는 1행 1열과 2행 1열을 행 병합을 해줍시다.
열병합은 rowspan, 행 병합은 colspan을 씁시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
<style>
a{
text-decoration:none;
}
</style>
</head>
<body>
<table border="1" style="border-collapse:collapse;">
<tr>
<!--home-->
<td><a href="#"><img src="home.png" style="width:50px; height:auto;"></a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!--text print-->
<td>
</td>
<!--profile-->
<td>
<table border="1" style="border-collapse:collapse;">
<tr>
<td rowspan="2"><img style="width:100px; height:100px;" src="profile.jpeg"></td>
<td colspan="2">
<h2 style="text-align:center">Cow-coding</h2>
<p style="text-align:center">일반회원</p>
</td>
</tr>
<tr>
<td>
<a href="start.html"> 로그아웃 </a>
</td>
<td>
<a href="edit.html"> 회원정보수정 </a>
</td>
</tr>
</table>
</td>
</tr>
<!--just base-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
닉네임은 좀 굵게 유지해줘야 하므로 h2태그를 사용합시다. 나머지는 틀을 잡아주기 위해서 p태그로 틀을 잡아줍니다.
그리고 CSS부분에서 링크 밑줄을 지워줍니다. text-decoration:none으로 하면 됩니다.
이렇게 하면 아래처럼 페이지가 디자인됩니다.
아직은 확실히 구립니다....
이제 전체 게시글이 출력되게 표시해줍시다.
이쪽 코드는 좀 길어서 접은 글로 넣어드릴게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
<style>
a{
text-decoration:none;
}
</style>
</head>
<body>
<table border="1" style="border-collapse:collapse">
<tr>
<!--home-->
<td><a href="#"><img src="home.png" style="width:50px; height:auto;"></a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!--text print-->
<td>
<table border="1" style="width:1070px; height:100px; border-collapse:collapse">
<tr>
<td><p style="text-align:right">Cow-Coding | 2020.04.01 </p></td>
</tr>
<tr>
<td>
<p>
테스트 글입니다<br>
저는 공부하려고 블로그 작성중입니다.<br>
제 블로그 간단하게 소개시켜드리겠습니다.<br>
티스토리 블로그 링크는 <a href="https:cow-coding.tistory.com">https:cow-coding.com</a>입니다.<br>
</p>
</td>
</tr>
<tr>
<td>
<p style="text-align:right;">
<a href="#">댓글</a> |
<a href="#">수정</a> |
<a href="#">삭제</a>
</p>
</td>
</tr>
</table>
<br>
<br>
<table border="1" style="width:1070px; height:100px; border-collapse:collapse">
<tr>
<td><p style="text-align:right">Cow-Coding | 2020.04.01 </p></td>
</tr>
<tr>
<td>
<p>
교수님 근데 이거 만들다가 발견한건데요....<br>
이거 테이블로 만드니까 옆에 프로필창을 위에 고정을 못시키겠어요 ㅠㅠ<br>
첫번째 글 옆에만 위치 고정시키고 싶은데...
</p>
</td>
</tr>
<tr>
<td>
<p style="text-align:right;">
<a href="#">댓글</a> |
<a href="#">수정</a> |
<a href="#">삭제</a>
</p>
</td>
</tr>
</table>
</td>
<!--profile-->
<td>
<table border="1" style="border-collapse:collapse;">
<tr>
<td rowspan="2"><img style="width:100px; height:100px;" src="profile.jpeg"></td>
<td colspan="2">
<h2 style="text-align:center">Cow-coding</h2>
<p style="text-align:center">일반회원</p>
</td>
</tr>
<tr>
<td>
<a href="start.html"> 로그아웃 </a>
</td>
<td>
<a href="edit.html"> 회원정보수정 </a>
</td>
</tr>
</table>
</td>
</tr>
<!--just base-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
사실 내부 글은 데이터베이스로 가져와야 하는데 교수님이 과제에서 내용은 그냥 적당히 채우라 하셔서 테이블로 넣었습니다.
아마 이 코드를 보시면 왜 테이블로 레이아웃 잡는 게 별로인지 느낌이 오실 거 같습니다.
위치가 잡기가 너무 어려워요.
전체 틀을 잡으시고 border을 표시해주면 이렇게 보입니다.
사실 실수로 글 작성 페이지 이동을 안 만들었습니다...
CSS를 활용하지 않으면 글 작성 사진은 3행 3열에 이동해주면 됩니다.
진짜 이렇게 CSS를 안 쓰면 너무 불편합니다....ㅠㅠ
다음은 CSS위주의 포스팅이니 이제 본격적인 웹 디자인이 가능할 것 같습니다.
'Computer Science > Web' 카테고리의 다른 글
| [Web] SNS형 게시판 만들기 프로젝트 (4) - Java Script 사용 (0) | 2020.05.17 |
|---|---|
| [Web] HTML / CSS /JavaScript 내용 정리 (1) | 2020.05.03 |
| [Web] SNS형 게시판 만들기 프로젝트 (3) - CSS 설정 (0) | 2020.04.13 |
| [Web] SNS형 게시판 만들기 프로젝트 (1) - 스토리보드 구성 (0) | 2020.04.09 |
| [Web] 아톰(Atom) 에디터 사용 플러그인 (0) | 2020.04.08 |