반응형
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>My first website</title>
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body>
<!-- 상단영역 -->
<header id="header">
<h1>헤더영역</h1>
<div class="wrap flex between view-size"> <!-- div를 이렇게 묶음용도로 많이 사용함-->
<!-- id를 반영하면 선택자로 되어서 css 스타일링이 가능-->
<!-- 헤더의 내용을 넣을 예정입니다.-->
<section id="logo" class="flex center column">
<h1>로고영역</h1>
<div class="wrap"> <!-- class는 중복해서 사용가능-->
<a href="/">NOWON</a>
</div>
</section>
<nav> <!-- 이름이 붙어 있는 section = 메뉴영역 -->
<h1>메인메뉴</h1>
<div class="wrap">
<!-- ul 태그 안에는 li만 쓸것, HTML5에서는 사용되지만 다른 버전은 안됨 -->
<ul class="flex column">
<li><a href="#">메뉴1</a>
</li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</div>
</nav>
<section id="userMenu">
<h1>유저메뉴</h1>
<div class="wrap">
<ul class="flex">
<li>
<a href="#"><button>회원가입<button></a>
<li>
<a href="#"><button>로그인</button></a>
</ul>
</div>
</section>
</div>
<!-- 메인영역 -->
<!-- 하단영역 -->
</header>
<main id="view-size"><!-- 문서 하나당 하나만 존재해야 함--> <!-- 이름이 붙어있는 section-->
<h1>메인영역</h1>
<div id="view-size">
메인컨테츠가 들어갈 영역입니다.
</div>
</main>
<footer>
<h1>푸터영역</h1>
<div id="view-size">
푸터의 내용이 들어갈 영역입니다.
</div>
</footer>
</body>
</html>@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
/* color:black; */
color: #000;
/* color: rgb(0,0,0); */
}
li{
list-style: none;
}
h1{
position : absolute;
left: -999px;
}
/* /////////////////////////////////////////////// */
/* ////////////////////common///////////////////// */
/* /////////////////////////////////////////////// */
.view-size{
width: 800px;
margin: 0 auto;
border: 1px solid #ff0000;
}
.flex {display: flex;}
.column{flex-direction: column;}
.center{justify-content: center;}
.between{justify-content: space-between;}
/* ////////////////////// */
#header>.wrap {
height:80px;
}
#logo>.wrap a{
font-size: 40px;
font-weight: bold;
color: blueviolet;
}반응형
'Programming > HTMLCSS' 카테고리의 다른 글
| Foodforest 홈페이지 및 로그인 페이지 (0) | 2022.04.25 |
|---|---|
| Xml 파일이란 무엇인가? (0) | 2022.04.21 |
| HTML CSS 로 사이트 만들기 (0) | 2022.03.17 |
| 티스토리에 TOC(Table of Contents) 목차 만들기 (1) | 2021.12.29 |
| 티스토리 단축키 (0) | 2021.12.29 |
