HTML5 - 190616 Basic Study 43(WebSite Layout Basic 1)

1. Website 제작 실습

    - 구성 요소 : Header / Section / Footer / Navigation-gnb / Navigation-gnb-submenu

                     Navigation-lnb / Navigation-lnb-submenu / aside

    

    - 총 3행 분할 구조

      ㄱ. 1행 : Header / Navigation-gnb / Navigation-gnb-submenu / Navigation-lnb / Navigation-lnb-submenu

      ㄴ. 2행 : Section / aside

      ㄷ. 3행 : Footer

 

2. CSS 초기화 코드(동일한 출력 만들기)

*{
	margin:0 auto;
	padding:0;
}
ul,li,ol{
	list-style:none;
}
a{
	text-decoration:none;
	color:black;
}

 

3. 사용할 폰트 지정(구글 웹 폰트)

<link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" />

font-family:"Henny Penny", cursive;

 

4. Header HTML(+Navigation Bar) Code

<header id="main_header">
        <hgroup id="title">
            <h1>Rint Development</h1>
            <h2>HTML5 + CSS3 Basic</h2>
        </hgroup>
        <nav id="main_gnb">
            <ul>
                <li><a href="#">Web</a>
                	<ol>
                    	<li>Naver</li>
                        <li>Daum</li>
                        <li>Nate</li>
                    </ol>
                </li>
                <li><a href="#">Mobile</a>
                	<ol>
                    	<li>Naver</li>
                        <li>Daum</li>
                        <li>Nate</li>
                    </ol>
                </li>
                <li><a href="#">Game</a>
                	<ol>
                    	<li>Webgen</li>
                        <li>Nexon</li>
                        <li>Netmable</li>
                    </ol>
                </li>
                <li><a href="#">Simulation</a></li>
                <li><a href="#">Data</a></li>
            </ul>
        </nav>
        <nav id="main_lnb">
            <ul>
                <li><a href="#">HTML5</a>
                	<ol>
                    	<li>HTML5 Foundation</li>
                        <li>HTML5 Middle class</li>
                        <li>HTML5 Advanced</li>
                    </ol>
                </li>
                <li><a href="#">CSS3</a>
                	<ol>
                    	<li>CSS Foundation</li>
                        <li>CSS Middle class</li>
                        <li>CSS Advanced</li>
                    </ol>
                </li>
                <li><a href="#">JavaScript</a>
                	<ol>
                    	<li>JavaScript Foundation</li>
                        <li>JavaScript Middle class</li>
                        <li>JavaScript Advanced</li>
                    </ol>
                </li>
                <li><a href="#">jQuery</a>
                	<ol>
                    	<li>jQuery Foundation</li>
                        <li>jQuery Middle class</li>
                        <li>jQuery Advanced</li>
                    </ol>                
                </li>
                <li><a href="#">Node.js</a>
                	<ol>
                    	<li>Node.js Foundation</li>
                        <li>Node.js Middle class</li>
                        <li>Node.js Advanced</li>
                    </ol>                
                </li>
            </ul>
        </nav>
    </header>

 

5. Header CSS Code

/* 글꼴 변경 */
#title{
	font-family:"Henny Penny", cursive;
}

/* 헤더 수정 */
#main_header{
	width:900px;
	/* 윤곽확인 */
	border:1px solid black;
	position:relative;
	height:110px;
}
#title, #main_gnb, #main_lnb{
	position:absolute;
}
#title{
	left:15px;
	top:10px;
	}
#main_gnb{
	right:5px;
	top:5px;
	}
#main_lnb{
	right:5px;
	bottom:5px;
	}

 

6. id="main_gnb" CSS Code

/* main_gnb 처리 */
#main_gnb>ul{
	overflow:hidden;
}
#main_gnb>ul>li{
	float:left;
	border:1px solid black;
}
#main_gnb>ul>li>a{
	display:block;
	padding:5px;
	}

/* 선 겹치는 부분 처리 */
#main_gnb>ul>li:first-child{
	border-right:0;
	border-radius:8px 0 0 8px;
	}
#main_gnb>ul>li:last-child{
	border-left:0;
	border-radius:0 8px 8px 0;
	}
#main_gnb>ul>li:nth-child(2){	
	border-right:0;
}
#main_gnb>ul>li:nth-child(3){	
	border-right:0;
}

/* 롤오버 효과 */
#main_gnb>ul>li:hover{
	background:black;
}
#main_gnb>ul>li:hover>a{
	color:white;
}

 

7. id="main_lnb" CSS Code

/* main_lnb 처리 */
#main_lnb>ul{
	overflow:hidden;
}
#main_lnb>ul>li{
	float:left;
	border:1px solid black;
}
#main_lnb>ul>li>a{
	display:block;
	padding:8px;
	}

/* 선 겹치는 부분 처리 */
#main_lnb>ul>li:first-child{
	border-right:0;
	border-radius:10px 0 0 10px;
	}
#main_lnb>ul>li:last-child{
	border-left:0;
	border-radius:0 10px 10px 0;
	}
#main_lnb>ul>li:nth-child(2){	
	border-right:0;
}
#main_lnb>ul>li:nth-child(3){	
	border-right:0;
}

/* 롤오버 효과 */
#main_lnb>ul>li:hover{
	background:black;
}
#main_lnb>ul>li:hover>a{
	color:white;
}

 

8. Header 그라데이션 효과 CSS Code

/* header 그라데이션 효과 */
#main_header{
	background:linear-gradient(snow 0%, beige 50%, ivory 100%);
}

 

9. main_gnb SubMenu CSS Code

/* gnb 서브 메뉴 구현하기 */
#main_gnb{
	z-index:2;
}
#main_gnb>ul{
	overflow:visible;
	position:relative;
}
#main_gnb>ul>li{
	/* position:relative; */
}
#main_gnb ol{
	display:none;
	position:absolute;
	width:100%;
	border:1px solid black;
	background:white;
}
#main_gnb>ul>li:hover ol{
	display:block;
	left:0;
	top:40px;
	font-size:12px;
	border-radius:5px;
	box-shadow:3px 3px 1px black;
}
#main_gnb>ul>li>a{
	padding:10px;
}

 

10. main_lnb SubMenu CSS Code

/* lnb 서브 메뉴 구현하기 */
#main_lnb{
	z-index:1;
}
#main_lnb>ul{
	overflow:visible;
	position:relative;
}
#main_lnb>ul>li{
	/* position:relative; */
}
#main_lnb ol{
	display:none;
	position:absolute;
	width:100%;
	border:1px solid black;
	background:white;
}
#main_lnb>ul>li:hover ol{
	display:block;
	left:0;
	top:40px;
	font-size:12px;
	border-radius:5px;
	box-shadow:3px 3px 1px black;
}
#main_lnb>ul>li>a{
	padding:10px;
}