코딩을 시작해보자
HTML 1일차
HTML5에서 규격화 한 일반적이고 기본적인 레이아웃
[HTML 내용]
<!DOCTYPE html>
<html lang="ko"> --> <html> 태그는 한 번만 사용할 수 있음.
<head> --> <head> 태그도 한 번만 사용할 수 있음
<meta charset="utf-8">
<title>XX일보</title>
</head>
<body>
<header>
<p>여기는 로고와 이름이 들어갑니다.</p>
</header>
<nav>
<p>여기는 사이트 메뉴입니다.</p>
</nav>
<section>
<p>여기서 부터는 기사가 들어갑니다.</p>
<article>
<p>여기는 첫번째 기사입니다.</p>
</article>
<article>
<p>여기는 두번째 기사입니다.</p>
</article>
</section>
<aside>
<p>여기에 광고가 들어갑니다.</p>
</aside>
<footer>
<p>여기에 회사 정보가 들어갑니다.</p>
</footer>
</body>
</html>
<header> : 웹페이지 또는 섹션의 소개나 제목을 담기 위해 사용하는 태그요소
<nav> : 페이지 이동과 같은 안내 역할을 수행하는 요소. 주로 메뉴를 담는다.
<section> : 기준에 따른 구분을 필요로하는 곳에 사용하는 요소로 섹션에 따른 아티클을 담는다.
<article> : 주제가 되는 내용을 담는 요소로 기사의 내용이 이 태그 하위에 담긴다.
<aside> : 광고 혹은 사이트 주변 부분에 부수적인 내용을 담기위해 마련된 공간을 관장하는 태그요소.
<footer> : 일반적으로 웹사이트의 하단에서 회사정보나 사이트에 대한 정보를 담당하는 태그요소.
[CSS내용]
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 10px;
text-align: center;
font-size: 35px;
color:# white;
}
nav {
background: #ccc;
padding: 10px;
}
section {
background: #bbb;
height: 300px;
padding: 10px;
float: left;
width: 70%;
}
article {
float: left;
padding: 20px;
margin-bottom: 10px;
width: 70%;
background-color: #f1f1f1;
margin-left: 15px;
}
aside{
float: left;
width: 30%;
padding: 10px;
background-color: #444;
height: 300px;
color: #fff;
}
footer {
float: left;
background-color: #777;
width: 100%;
padding: 10px;
text-align: center;
color:# white;
}
이 글은 개인적으로 공부하는 부분을 정리하기 위해서 작성하는 글로 아직까지는 독자들에게 전혀 도움이 되지 않을 것입니다.^^
