외부 스타일시트 선언
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!--코드 순서 중요-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
</body>
</html>보통 인라인보다 외부 스타일시트를 사용하는데 선언을 할때 reset 과 main으로 나뉘는데,
reset 을 먼저 ! 배치해줘야 한다.
reset.css
* {
margin: 0;
padding:
0;
}
body {
font-family: '맑은고딕';
color: #555;
font-size: 12px;
}
ul,
li {
list-style-type: none;
}
a {
text-decoration: none;
color: #555;
}
img {
border: 0;
}reset.css 는 전체적인 스타일을 선언하기 위한 스타일시트이다.
찐 스타일시트는 main.css 에 들어가게 된다.
그럼 html 파일엔 뭐가 들어갈까?
<body>
<div id="wrap">
/* wrap 은 전체 레이아웃(:header, content, footer)을 의미한다 */
<div id="header">
/* header (상단)의 구역을 나눠준다 */
<div id="header_top">
<div class="logo">
<h1><img src="./images/logo.jpg" alt="로고입니다"></h1></div>
/* alt 태그는 이미지가 보여지지 않을 때를 대비한 alternate text */
<div class="group">
<ul class="infomn">
<!--ul.infomn>li*5>a-->
/* '젠코드' 라는 건데 이걸 익히면 빠르게 코드할 수 있다 */
<li><a href="JOIN"></a>JOIN</li>
<li><a href="LOGIN"></a>LOGIN</li>
<li><a href="MYPAGE"></a>MYPAGE</li>
<li><a href="CART(0)"></a>CART(0)</li>
<li><a href="즐겨찾기"></a>즐겨찾기</li>
</ul>
<div class="test">test</div>
</div>
<div class=""></div>
<div class=""></div>
</div>
<div id="header_nav"></div>
</div>
<div id="mainimg"></div>
<div id="contents">
<div class="item"></div>
<div class="gotoshop"></div>
<div class="view"></div>
<div class="style"></div>
<div class="banner"></div>
<div class="info"></div>
</div>
<div id="footer">
<div id="footer_top">footer_top</div>
<div id="footer_line"></div>
<div id="footer_bottom">footer_bottom</div>
</div>
</div>
</body>
</html>The div tag defines a division/section in an HTML doc.
It is styled by using the class or id attribute.
Class selector (클래스 선택자) 는 하나의 html 요소에 여러 개를 지정해줄 수 있다. 다중 class를 선택자로 지정 가능. 기호는 "."
Id selector 는 하나의 html 요소에 한번만 사용할 수 있다. 기호는 "#"
젠코드
1. ID, Class 속성
div#page.section.main
<div id="page" class="section main"></div>
2. 커스텀 속성
a[title="hello world"]
<a title="hello world"></a>
3. element 복제
li*3
<li></li>
<li></li>
<li></li>
넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4,...)
li.item$*3
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
li.item$$$*2
<li class="item001"></li>
<li class="item002"></li>
4. Grouping
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2+div#footer
5. Id, Class 앞에 태그명을 생략하면 div로 간주
#content>.section
<div id="content">
<div id="section'>
</div>
</div>
6. text
p>{click}
<p>click</p>main.css
#wrap {
width: 100%;
}
-----------------------header-------------------------
#header {
width: 100%;
height: 165px;
background-color: pink;
}
#header_top {
margin: 0 auto;
width: 1000px;
height: 115px;
background-color: rgb(52, 83, 83);
}
#header_top .logo {
float: left;
padding-top: 50px;
width: 220px;
height: 115px;
box-sizing: border-box;
}
#header_top .group {
float: right;
width: 660px;
height: 115px;
background-color: violet;
}
#header_top .infomn {
float: left;
margin-left: 300px;
}
#header_top .test{
float: left;
width: 300px;
height: 30px;
border: 2px solid #000;
}
#header_top .infomn li {
float: left;
border-right: 1px solid #f00;
padding-right: 10px;
margin-right: 10px;
line-height: 10px;
}
#header_top .infomn li:last-child {
border-right: 0;
padding-right: 0;
margin-right: 0;
}
#header_top .infomn li a{
font-size: 10;
}
#header_nav {
width: 100%;
height: 50px;
background-color: rgb(104, 255, 255);
}
-----------------------main-------------------------
#mainimg {
width: 100%;
height: 460px;
background-color: antiquewhite;
}
-----------------------content-------------------------
#contents {
width: 100%;
height: 2000px;
background-color: aqua;
padding-top: 40px;
}
#contents>div {
background-color: blue;
}
#contents .item {
margin: 0 auto;
width: 1000px;
height: 260px;
}
#contents .gotoshop {
margin: 0 auto;
margin-top: 40px;
width: 1000px;
height: 280px;
}
#contents .view {
margin-top: 40px;
width: 100%;
height: 300px;
}
#contents .style {
margin: 0 auto;
margin-top: 40px;
width: 1000px;
height: 260px;
}
#contents .banner {
margin: 0 auto;
margin-top: 40px;
width: 1000px;
height: 395px;
}
#contents .info {
margin-top: 40px;
width: 100%;
height: 660px;
}
-----------------------footer-------------------------
#footer {
width: 100%;
height: 430px;
background-color: black;
}
#footer_top {
margin: 0 auto;
width: 1000px;
height: 290px;
background-color: beige;
}
#footer_line {
width: 100%;
height: 2px;
background-color: burlywood;
}
#footer_bottom {
margin: 0 auto;
width: 1000px;
height: 140px;
background-color: rgb(173, 173, 74);
}margin: 0 auto; 와 margin-top: 40px; 는 순서가 중요하다 !
margin-top이 먼저 와버리면 값이 먹히지 않는다.
.
.
.
.
이제 웹페이지의 레이아웃을 배우는 중인데 살짝 어렵다 !!
header 안에도 많은 구역으로 나눠지니까 복잡하기도 하고...
셀럭터의 이름을 하나하나 잡아주는 것도 생각보단 어렵고.. 이름이 자꾸 길어지기도 한다 ㅋㅋㅋㅋ
무엇보다 margin..하 ^^
그래도 margin은 요소의 바깥 쪽 여백이고 padding 은 안쪽 여백이라는 걸 알고나니 좀 도움이 되긴하다 !
시간 날때 짬짬이 태그 공부하고 젠코드 공부 중인데, 확실히 효과는 조금 보고있는걸지도..?ㅎ
손체리