별거 없지만 내가 만든 그림?
2시간 넘게 걸림 ㅋㅋㅋㅋㅋ
대신 Html 살짝 진짜 살짝 친해짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
#header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
#nav {
width: 100%;
height: 3%;
font-size: 20px;
border: 0.3px solid #7b9acc;
float: none;
background-color: #C0C0C0;
}
/* Style the list inside the menu */
#nav ul {
list-style-type: none;
padding: 0;
color: white;
}
#nav li{
display: inline-block;
padding-left: 180px;
padding-right: 150px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
#article{
width: 100%;
height: 30%;
float: right;
font-size: 20px;
border: 0.3px solid #7b9acc;
margin-top: 5px;
text-align: center;
color: white;
background-color: #C0C0C0;
}
/* Style the footer */
#footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div id = "header">
<p>Bespoke TailorShop</p>
</div>
<div id = "nav">
<ul>
<li>Domestic</li>
<li>Iatly</li>
<li>British</li>
</ul>
</div>
<div id = "article">
<p>good making</p>
<div id = "footer">
<p>Manner Maketh Man</div>
</body>
</html>
대강 코드는 이렇다
div를 활용한 코드고
#은 id로 쓰고, .은 클래스로 쓴다
이게 결론.
공부하면 돈 버는 직업