HTML Step 27

Front/HTML

HTML Step 27

NOOWGNAJ 2022. 7. 14. 01:01

HTML 5일차 1 HTML 5.0 + CSS3.0

header

main

자동 증가

합니다

section1

section2

article 오른쪽 컨텐츠

article banner

figure

@charset "UTF-8";

	/*	Base code	*/
	body{
		margin : 0;
		padding : 0;
		background-color: none;
	}
	a{
	text-decoration-line : none;
	}
	span,label{
		display : block;
	}
	ul,li{
		list-style: none;
	}
	
	
	/*	최상단	*/
	
	.header_css{
		height: 50px;
		background-color: gray;
	}
	
	.header_div{
		width: 1200px;
		height: 50px;
		background-color: #ccc;
		margin: 0 auto;
		line-height: 50px;
		text-align: center;
		font-size : 20px;
		font-weight: bold;
	}
	/*	메뉴	*/
	.nav_css{
		height: 100px;
		background-color: blue;
		text-align: center;
		font-size : 20px;
		font-weight: bold;
	}
	/*	메인시작*/
	.main_css{
		height: auto;
		background-color: yellowgreen;
		text-align: center;
		font-size : 20px;
		font-weight: bold;
	}
	/*	섹션1	*/
	.section_1 {
		height: 450px;
		background-color: orange;
		text-align: center;
		font-size : 20px;
		font-weight: bold;
	}
	/*	섹션2	*/
	.section_2{
		height: 800px;
		background-color: pink;
		text-align: center;
		font-size : 20px;
		font-weight: bold;
	}
	
	.aside_left_css{
		height: 800px;
		background-color: purple;
		width: 30%;
		float : left;
		text-align: center;
		font-size : 20px;
		font-weight: bold;
	}
	
	.article_right_css{
		height: 800px;
		background-color: green;
		width : 70%;
		float : left;
		text-align: center;
		font-size : 20px;
		font-weight: bold;		
	}
	
	/*	중간 배너	*/
	
	.article_banner{
		clear : both;
		height : 100px;
		color : white;
		background-color: black;
		text-align: center;
		font-size : 20px;
		font-weight: bold;	
	}
	
	/*	figure	*/
	
	.notice{
		height: 300px;
		background-color: yellow;
		text-align: center;
		font-size : 20px;
		font-weight: bold;	
	}
	/*	메인끝	*/
	
	/*	카피라이터	*/
	.footer_css{
		height: 300px;
		background-color: navy;
		color : white;
		text-align: center;
		font-size : 20px;
		font-weight: bold;	
	}

<!DOCTYPE html> 
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
		<meta name="veiwport" content="width=device-width, iniital-scale=1.0">
		<title> HTML 5일차 1 HTML 5.0 + CSS3.0 </title>
		<link rel="stylesheet" type="text/css" href="./index11.css?v=2022071301">
	</head>
	<body>
		<!-- 
		상위 태그 이므로 div는 자식 tag로 들어가야한다. 
		header
		nav
		main
		section
		
		-->
		<!-- header : 최상단에 사용하는 tag 무조건 한번만 사용 (씨멘틱 마크업) -->
		<header class="header_css">
			<div class="header_div">header</div>
		</header>
		<nav class="nav_css">nav</nav> <!-- 대메뉴, 소메뉴 사용 (씨멘틱 마크업) -->
		<main class="main_css">main<br><br><br><br>자동 증가<br><br><br>합니다<br> <!-- 배너, 상품출력, 각종 컨텐츠 (씨멘틱 마크업) -->
		<section class="section_1">section1</section> <!-- 배너, 여러번 사용가능 (마크업) -->
		<section class="section_2">section2 <!-- 상품출력 -->
			<aside class="aside_left_css">aside 왼쪽 컨텐츠</aside> <!-- 왼쪽 컨텐츠 (독립성) (씨멘틱에 들어가기 애매한 태그) -->
			<article class="article_right_css">article 오른쪽 컨텐츠</article> <!-- 오른쪽 컨텐츠 (독립성) (씨멘틱에 들어가기 애매한 태그) -->
		</section>
		<article class="article_banner">article banner</article> <!-- ex) 이벤트광고 -->
		<figure class="notice">figure</figure> <!-- figure : 문서, 이미지, 다이어그램 -->
		</main>
		<footer class="footer_css">footer<br><br> &copy; All Rights Reserved.</footer>
	</body>
	<script>
		
	</script>
</html>

저작자표시 (새창열림)