지금까지 메인과 관련한 CSS 코딩을 살펴봤습니다.

메인 레이아웃은 1칼럼을 갖고 있는 것을 구현했습니다.

부메뉴는 2칼럼을 갖고 있는 레이아웃을 살펴볼 것입니다.

레이아웃을 구현하는 방법은 여러가지가 있지만 여기서는 2칼럼을 구현하기 위해 CSS float속성을 이용하였습니다.

아래는 float속성을 clear하기 위한 코드입니다.

.main2:after {display:block;visibility:hidden;clear:both;content:""}

그누보드5를 적용할 경우 로그인 기능을 쉽게 구현할 수 있습니다. 여기서는 자리배치만 고려해 보도록 하겠습니다.

사이드 부분에 로그인창이 노출되도록 CSS 코딩을 아래와 같이 하였습니다.

.login{position: relative;height: 150px;width:260px;padding: 10px;z-index: 2; background:#345;
margin-bottom:20px;}

지금까지의 전체 레이아웃 CSS 코드는 아래와 같습니다.

.main2{
    position:relative;
    width:1000px;
    margin:0 auto 0;

    min-height:300px;    
    border-right: 1px solid #dde4e9;
    border-left: 1px solid #dde4e9;
}
.main2:after {display:block;visibility:hidden;clear:both;content:""}
.subtitle{
    width:1000px;
    margin:0 auto;      
}
.aside {float:right;width:270px;}
.subtainer {z-index:4;width:720px;
    position:relative;
    float:left;
    border-right: 1px solid #dde4e9;
    min-height:500px;
}
.subtainer .breadcrumbs{
    background-color:#b80606;
    color:#dde4e9;
    padding:8px 5px;
    font-weight:600;
}
.subtainer p{
    padding:10px 20px;
}
.login{position: relative;height: 150px;width:260px;padding: 10px;z-index: 2; background:#345;
margin-bottom:20px;}
.login input[type=text]{
	width: 240px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px;
	color: #fff;
	font-weight: 400;
	padding: 4px;
}
.login input[type=password]{
	width: 240px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px;
	color: #fff;
	font-weight: 400;
	padding: 4px;
	margin-top: 10px;
}

.login input[type=button]{
	width: 240px;
	height: 35px;
	background: #fff;
	border: 1px solid #fff;
	cursor: pointer;
	border-radius: 2px;
	color: #a18d6c;
	font-weight: 400;
	padding: 6px;
	margin-top: 10px;
}

지금까지 여러 시간을 할애하여 메인 및 부메뉴 레이아웃을 코딩하였습니다.

나머지 메뉴도 상단 및 하단은 동일하기 때문에 복사하여 사용하고 컨텐츠 부분만 수정하여 완성할 수 있습니다.

메뉴에 맞게 컨텐츠를 채운 후 완성을 하면 일반 PC용 홈페이지는 마무리가 됩니다.

도메인과 호스팅

홈페이지를 실제로 운영하기 위해서는 도메인과 호스팅 서비스가 필요합니다.

도메인 및 호스팅 서비스는 포탈사이트에서 검색을 하면 수백 개 이상의 업체가 나올 수 있습니다.

원하는 업체에서 도메인을 등록하고 호스팅 서비스를 신청하면 접속할 수 있는 ftp정보를 메일로 받아볼 수 있습니다.

그러면 지금까지 코딩한 웹문서를 ftp로 전송하면 흔히 인터넷에서 볼 수 있는 홈페이지가 구현이 됩니다.

다음 과정부터는 지금까지 만든 웹문서를 반응형으로 구현하는 과정을 진행하겠습니다.