프론트 (HTML·CSS·JS)
HTML과 CSS
경이가 꿈꾸는 플랫폼 개발
2021. 8. 4. 21:57
HTML과 CSS의 기본적인 명령어들은 알아야 크롤링 등 여러 작업을 쉽게 할 수 있기에 빠르게 배워 적어보려 한다.
(실제로 데이터(빅데이터) 분석을 하기 위해 웹크롤링 등으로 데이터를 끌어오려면 HTML과 CSS를 완벽하게는 아니더라도, 구성요소를 포함해 뭐가 어떤 것을 가리키는지 정도는 알아야 한다고 생각한다.)
그리고 독학한 것을 익히기에 직접 활용해서 만드는 것보다 좋은 것은 없기에 홈페이지를 구성해 보았다. 전에 말했듯이 독학한 내용을 확인하기 위한 것이라 많이 부족하다.
내부 구성은 Javascript를 배우고 나서 또 추가해보겠다.
HTML은 대략 이렇게 구성해보았고,
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oguweb</title>
<link href="CSS/default.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<header>
<!--header 들어가는 곳-->
<div id="login">
<a href="#">Login</a> | <a href="#">Join</a>
</div>
<div class="clear"></div>
<div id="logo">
<img src="images/logo_ogu.gif" width="265" height="62">
</div>
<nav id="top_menu">
<!--navigation 들어가는 곳 -> 어딘가로 가게 해주는 친구들 -->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">CUSTOMER CENTER</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
<div class="clear"></div>
<div id="main_img">
<img src="images/ogu_background.jpg" width="971" height="282">
</div>
<article id="front">
<!--메인 컨텐츠 들어가는 곳-->
<div id="solution">
<div id="welcome">
<h3>Ogu Fan Page</h3>
<p>This page is for people who love OGU <br>
Ogu character<br>
Frog, DDozi, Monkey, etc<br>
Want to know more?<br>
Visit formal Ogu page!</p>
</div>
<div id="sites">
<h3>OGU Formal Websites</h3>
<p>
OGU Instagram : https://www.instagram.com/ogu_officia1_kr/
<br>
OGU Facebook : https://www.facebook.com/ogu.official/
<br>
OGU Twitter : https://twitter.com/ogu_official_kr </p>
</div>
<div id="payment">
<h3>Buy OGU Products!</h3>
<p>To Buy? <br>
Below : see how to buy ogu backgrounds<br>
There are lots of information here.<br>
If you want to know more, <br>
ask rainbow6468@gmail.com. Enjoy!
</p>
</div>
</div>
<div class="clear"></div>
<div id="sec_news">
<h3><span class="orange">Notice</span> News</h3>
<dl>
<dt><a href="#">The reason why I love OGU </a></dt>
<dd><a href="#">New character in pop-up store! There will be frog,
bash, some interesting creatures! come and enjoy! play with
new friends and have fun </a></dd>
<dt><a href="#">More OGU pictures </a></dt>
<dd><a href="#">How to buy ogu backgrounds? With this question, we had a lot of debate.
So, finally ogu backgrounds will go on sale! So, if you're interested,
register and get lovely ogu stickers and goods. (Of cours backgrounds either!)</a></dd>
</dl>
</div>
</article>
<div id="news_notice">
<h3 class="brown">News & Notice</h3>
<table>
<tr>
<td class="context"><a href="#">new emoticon! </a></td>
<td><a href="#">2011.07.31</a></th>
</tr>
<tr>
<td class="context">new character in pop-up store!</td>
<td>2011.06.11</td>
</tr>
<tr>
<td class="context">more and more OGU pictures</td>
<td>2011.05.12</td>
</tr>
<tr>
<td class="context">how to buy ogu backgrounds go on sale! </td>
<td>2011.05.08</td>
</tr>
<tr>
<td class="context">Introductions about new OGU family </td>
<td>2011.04.25</td>
</tr>
</table>
</div>
<footer>
<!--footer 들어가는 곳-->
<hr>
<div id="copy">
All contents Copyright 2021 OguWeb Inc. all rights reserved<br>
Contact mail : rainbow6468@gmail.com Tel: +92 10 4217 6468
</div>
<div id="social">
<img src="images/instagram.GIF" width="33" height="33" alt="Instagram">
<img src="images/facebook.gif" width="33" height="33" alt="Facebook">
</div>
</footer>
</div>
</body>
</html>CSS는 이렇게 (아래와 같이) 구성해보았다.
body{
background-color: whitesmoke;
}
#wrap{
width: 971px;
text-align: left;
margin:0;
margin-right: auto;
margin-left: auto;
min-height: 780px;
background-image: url(../images/shadow.png);
background-repeat: repeat-y; /*y축 방향으로 반복*/
}
#logo {
width: 265px;
margin: 40px 0 0 40px;
float:left;
}
header{
height:151px;
margin:0;
padding:0;
}
nav#top_menu{
width: 600px;
margin:50px 20px 0 0;
float:right;
}
nav#top_menu ul{
list-style: none;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
font-weight: 100;
color: #333;
}
nav#top_menu ul li{
float:left;
margin:0 5px;
}
nav#top_menu a{
text-decoration: none;
display: block; /*padding height width 설정 가능*/
padding:10px;
height:20px;
color: #333;
}
nav#top_menu a:hover{
background-image: url(../images/yellow.PNG);
background-repeat: repeat-x;
background-position: bottom;
}
#login{
float:right;
margin:20px 64px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
word-spacing: 15px;
}
#login a{
text-decoration: none;
color: #333;
}
#login a:hover{
color: #F90;
}
.clear{
clear:both;
}
#main_img{
width: 971px;
height: 308;
background-image: url(../images/yellow.PNG);
background-position: center top;
}
article#front{
margin:5px 0 5px 0;
}
#solution{
border:solid 2px rgb(88, 88, 86);
width:910px;
min-height: 150px;
background-color:rgb(228, 228, 227);
padding:10px;
border-radius:10px;
margin: 0 0 0 20px;
}
#welcome, #sites, #payment{
width: 30%;
float:left;
padding:10px;
}
@font-face {
font-family: "seo";
src: url(../images/segoeui.eot);
}
#welcome h3, #sites h3, #payment h3{
font-family: seo;
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0 0 10px 80px;
}
#welcome p, #sites p, #payment p{
font-family: seo;
font-size: 10px;
color: #333;
margin: 0 0 0 80px;
}
#welcome{
background-image:url(../images/1ogu.GIF);
background-size: 80px;
background-repeat: no-repeat;
background-position: left 15px;
border-right:1px solid #ccc
}
#sites{
background-image:url(../images/2ogu.GIF);
background-size: 80px;
background-repeat: no-repeat;
background-position: left 15px;
border-right:1px solid #ccc
}
#payment {
background-image:url(../images/3ogu.GIF);
background-size: 80px;
background-repeat: no-repeat;
background-position: left 15px;
border-right:1px solid #ccc
}
#sec_news, #news_notice {
float:left;
width:420px;
margin:15px 0 0 20px;
}
#sec_news h3, #news_notice h3{
font-family: seo;
font-size: 14px;
font-style:italic;
font-weight: normal;
width:420px;
height:24px;
background-image: url(../images/h3_back.jpg);
background-repeat: no-repeat;
padding:5px 0 0 22px;
}
#sec_news dt{
font-family: seo;
font-size: 16px;
margin:5px 0;
color:black;
}
#sec_news dt a{
color: #333;
text-decoration: none;
}
#sec_news dt a:hover{
color: #F90;
text-decoration: underline;
}
#sec_news dd{
margin-left:0;
color:black;
}
#sec_news dd a{
color: #333;
text-decoration: none;
}
#sec_news dd a:hover{
color: gold;
text-decoration: underline;
}
#news_notice{
padding-left: 30px;
}
#news_notice table{
width: 400px;
border-collapse: collapse;
text-align: center;
}
#news_notice td{
padding: 6px 4px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}
#news_notice td.context{
background-image: url(../images/tr_back.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
text-align: left;
color:#333;
}
#news_notice a{
color: #333;
text-decoration: none;
}
#news_notice a:hover{
text-decoration: none;
color: #f90;
}
footer{
margin: 350px 0 0 0;
height: 100px;
background-image: url(../images/logo_ogu.gif);
background-size: 130px;
background-repeat: no-repeat;
background-position: 40px center;
}
footer hr{
width:900px;
margin: 0 0 0 15px;
}
footer #copy{
font-family: seo;
width: 450px;
margin: 20px 0 0 190px;
float:left
}
footer #social{
width: 130px;
margin: 20px 20px 0 0 ;
float:right;
}
footer #social img{
margin: 0 7px;
}
기본적인 HTML, CSS 용어들을 익히기 위해 자그마한 홈페이지와 Animation, Selector 등을 활용해서 귀여운 홈페이지를 만들어보았다. 만드는 내내 지치지 않게 해준 아기오구와 오구에게 고맙다ㅎ
결과물은 이렇다.
