홈페이지 만드는 방법

홈페이지 만드는 방법을 탐구해보도록 하겠습니다. 이 글을 끝까지 읽으시면 홈페이지 만드는 방법을 이해하게 되실 것이라고 기대하고 있습니다. 홈페이지 만드는 방법이 궁금하다면 끝까지 읽어주세요. 좋은 정보들을 총정리 해뒀습니다 이제 고혈압 낮추는 방법를 알아보도록 하겠습니다.

 

홈페이지 만드는 방법

아래의 기본적인 코드 소스를 외워두면 좋다 클리어 id는 부모 코드에게

그리고 그 밑에 div 라던지 nav 같은 곳엔 id="class"를 이용하며 

 

레이아웃이 깨지지 않게 정렬 해주는 float: left 같은 코드를 썻다면 인덱스에

class="clearfix"를 써서 연계 해주어야 한다

 

/* reset */ 
*{margin: 0; padding: 0;} 
.clearfix::before, .clearfix::after {display: block; content ''; clear: both;} 

/* 레이아웃 */ 
#wrap {width: 1200px; margin: 0 auto;} 

#side {float:left; width: 300px; height: 850px; background: #ccc; } 

#content {float:left; width: 900px; height: 850px; background: #ddd;} 

/* header */ 
#side .logo {width: 300px; height: 150px; background: #999;} 
#side .nav {width: 300px; height: 750px; background: #888;} 

/* banner */ 
#banner {width: 900px; height: 450px; background: #777;} 

/* contents */ 
#contents {} 
#contents > div {float:left; width: 33.33333%; height: 300px;} 
#contents > div.cont1 {background: #666;} 
#contents > div.cont2 {background: #555;} 
#contents > div.cont3 {background: #444;} 

/* footer */ 
#footer {} 
#footer .foot1 {float: left; width: 200px; height: 100px; background: #333;} 
#footer .foot2 {float: left; width: 700px; height: 50px; background: #222;} 
#footer .foot3 {float: left; width: 700px; height: 50px; background: #111;}

 

홈페이지 만드는 방법을 알려드렸습니다. 도움이 되셨길 바랍니다. 추가적으로 필요하신 정보가 있다면 위의 정보들을 참고해보세요. 도움이 되셨다면 구독, 하트(공감), 댓글을 해주시면 블로거들에게 블로그를 운영하는 힘이 됩니다 :)

 

내일 부턴 이제 레이아웃을 넘어서 이미지를 직접 넣은 실제 홈페이지 제작 방법에 대해서 알아 봐야겠다 ㅎㅎ