티스토리 뷰
http://www.wah.or.kr/
웹 접근성 연구소
CDNL: 콘텐츠 전송 네트워크 Content Delivery Network/Content Distribution Network
https://fonts.google.com/earlyaccess 나눔폰트
http://sass-lang.com/
http://lesscss.org/
webkit: 크롬
ie9 = 윈도우7이 설치된 상태
---------------------------------------------------------------------------------------------
리셋은 base.css가 아닌 normalize.css에 함
normalize 맨 밑에
/*초기화설정*/
* {margin:0;padding:0;border:0;}
/*0에는 px 단위를 주지 않는다. 다른 숫자에는 줘야함.*/
ul {list-style:none;}
h1 {margin: 0;}
/*h1에 자체적으로 마진이 들어가 있음*/
a {text-decoration: none;color: inherit;}
---------------------------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/base.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--p214-->
<!--h1#logo{nike}+header>nav>ul#gnb>(li>a{주메뉴})*3
emmet에서 # = id-->
<h1 id="logo">nike</h1>
<header>
<nav>
<ul id="gnb">
<li><a href="#">주메뉴1</a></li>
<li><a href="#">주메뉴2</a></li>
<li><a href="#">주메뉴3</a></li>
</ul>
</nav>
</header>
<hr>
<section>
<article class="txt">
<h3>글상자1</h3>
<p>
정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다. 중앙선거관리위원회는 대통령이 임명하는 3인, 국회에서 선출하는 3인과 대법원장이 지명하는 3인의 위원으로 구성한다. 위원장은 위원중에서 호선한다.
</p>
<h3>글상자2</h3>
<p>
선거운동은 각급 선거관리위원회의 관리하에 법률이 정하는 범위안에서 하되, 균등한 기회가 보장되어야 한다. 여자의 근로는 특별한 보호를 받으며, 고용·임금 및 근로조건에 있어서 부당한 차별을 받지 아니한다.
</p>
<h3>글상자3</h3>
<p>
대통령은 법률안의 일부에 대하여 또는 법률안을 수정하여 재의를 요구할 수 없다. 국가는 여자의 복지와 권익의 향상을 위하여 노력하여야 한다. 군인은 현역을 면한 후가 아니면 국무총리로 임명될 수 없다.
</p>
</article>
</section>
<hr>
<footer>바닥글</footer>
</body>
</html>
---------------------------------------------------------------------------------------------
https://fonts.google.com/earlyaccess
https://fonts.google.com/
base.css
@charset "utf-8";
/*webfont 사용1(한글)*/
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
/*webfont 사용2(영문)*/
@import url(https://fonts.googleapis.com/css?family=Play);
/*폰트적용하기*/
body {
font-family: 'Nanum Brush Script', play, sans-serif;
font-size: medium;
}
/*사용자에 글꼴이 없을 경우 san-serif로 출력. nanum brush script 때문에 play 폰트가 출력되지 않는다.*/
#logo {
font-family: play;
font-size: 2em;
}
nav > #gnb {
/*nav > #gnb는 ul을 불러내는 것과 같다*/
background-color: #999;
padding: 10px;
margin: 5px;
}
#gnb a {
color: #eee;
font-size: 1.2em;
}
/*#gnb 홈페이지에 하나뿐인 id 소환. 다른 것 없음.*/
#gnb a:hover,
#gnb a:focus {
color: #0ae;
}
/*웹 접근성 설정*/
section, footer, .box, li:first-child a {
font-family: play;
}
section, footer {
//height: 200px;
}
/*높이값을 주면 데이터가 겹치므로, 높이값을 주지 말자*/
/*txt*/
section .txt {
color: #333;
}
section h3 {
margin-bottom: 10px;
}
.txt p {
margin-bottom: 20px;
line-height: 1.6em;
letter-spacing: -0.5px;
/*한글 본문 작성시 반드시 적용
text-align: justify;(양측정렬)*/
text-align: justify;
}
.txt p:nth-of-type(1) {
font-weight: bold;
font-style: italic;
font-size: 14px;
}
.txt p:nth-of-type(2) {
/*CSS3*/
/*p248 그림자 멀티효과 가능*/
text-shadow: 1px 1px 3px #555
/* x축 y축 크기 색깔 */
}
.txt p:nth-of-type(3) {}
#logo {
text-transform: capitalize;
/*
uppercase 대문자
lowercase 소문자
capitalize 단어의 첫 글자만 대문자화
*/
text-shadow: 2px -2px 5px #aaa,
0 0 10px #000;
color: #0af;
}
/*박스(block) 그림자 효과*/
nav #gnb {
/* css3 버튼을 코딩으로 만들 수 있다 */
border-radius: 20px;
box-shadow: 1px 1px 6px #333,
inset 0 0 5px #fff,
inset 0 0 20px #00c
/*inset: 내부그림자*/
}
---------------------------------------------------------------------------------------------
background.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/backgrounnd.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<!--header{header}+section{section}+aside{aside}+footer{footer}-->
<header>header</header>
<section>section</section>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------
background.css
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Play);
/*base*/
body {
font-family: Play;
font-size: 30px;
color: #eee;
background-color: #555;
}
/*layout*/
.wrap {
width: 800px;height: 1200px;
/*포지션이 어렵다.......*/
margin: auto;
/*auto로 하면 항상 중앙정렬*/
}
.wrap header {
height: 100px;
}
.wrap section {
height: 300px;
}
.wrap aside {
height: 100px;
}
.wrap footer {
height: 100px;
}
/*p201 배경속성*/
.wrap {
background-image: url(../img/b_1.jpg);
/*..을 붙이는 이유: 상위폴더*/
background-repeat: no-repeat;
/*반복이 기본 값. repeat-x x축 반복, repeat-y y축 반복*/
background-position: right;
/*right 값만 줄 경우 y축은 자동으로 중앙정렬
50%=중앙정렬, 0% 위, 100% 아래 px 값으로도 줄 수 있다.*/
background-attachment: fixed;
/*scroll 기본값, fixed 고정*/
/*CSS3 size: cover, contain*/
background-size: 50%;
/*이전에는 포토샵으로 줄여야만 했다. x축, y축, px, auto, 가능
cover: background 요소 꽉 채우기. 비율 안 맞으면 짤림. 빈틈없이 채움
contain: 사진 전체를 보여줌*/
background-image: url(../img/b_3.jpg),
url(../img/b_2.jpg),
url(../img/b_1.jpg);
background-position
: 0 0,150px 150px, 300px 300px
}
/*레이아웃*/
.wrap {}
/*효과*/
---------------------------------------------------------------------------------------------
block 정렬할 때는 margin: auto를 준다!
p 태그 안에 div 태그 넣을 수 없음. div 안에 p 가능.
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------