티스토리 뷰
css3 색상
-----------------------------------------------------------------------------------------
color.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>색상</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- header>h1#logo+nav>ul#gnb>li{메뉴$}*4-->
<header>
<h1 id="logo">로고</h1>
<nav>
<ul id="gnb">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</nav>
</header>
<section>
본문내용
</section>
</body>
</html>
-----------------------------------------------------------------------------------------
color.css
@charset "utf-8";
/*초기화 reset 태그 초기화*/
* {margin: 0;//padding: 0;border:0;}
/*ul {list-style: none;}노멀라이저 내에서 h1, h2 값이 정해짐*/
h1, h2 {margin: 0;}
a{text-decoration: none;color: inherit;}
/*http://www.w3schools.com/colors/colors_picker.asp*/
/*색상 표현방법1 p178*/
/*header #logo를 쓸 경우 이후에도 이렇게 작성하여야 함*/
#logo {
color: gray;
background-color:skyblue;
}
/*색상 표현방법2*/
/*nth-child, nth-of-type 구분하여야 함*/
#gnb li:first-child {
color: #00ff00;
background-color: #0000ff;
}
#gnb li:last-child {
color: #0f0;
background-color: #00f;
}
/*CSS3 표현방법1 rgb(0~255): 구형 브라우저에서는 지원이 안 될 수도 있음*/
#gnb li:nth-child(2) {
color: rgb(255,255,255);
background-color: rgb(50,50,50)
}
/*CSS3 표현방법2 rbga(0~1)
투명도를 줄 수 있다. 교재에 안 나옴*/
#gnb li:nth-child(3) {
color: rgba(255,255,255,1);
background-color: rgba(50,50,50,0.5)
}
/*CSS3 표현방법3 hue saturation lightness
: 0=빨강 60=노랑 300=-60=마젠타
saturation=0% 무채색
lightness=100% 하얀색각도색깔 알아놓기*/
section {
color: hsl(0,100%,50%);
background-color: hsl(270,50%,70%);
}
/*CSS3 표현방법4*/
body {
color: hsla(0,0%,0%,0.5); /*안 먹는다*/
background-color: hsla(0,0%,0%,0.09);
}
-----------------------------------------------------------------------------------------
margin: 외부여백
padding: 내부여백
border: 테두리값 결정
-----------------------------------------------------------------------------------------
css 리셋태그
* {margin: 0;padding: 0;border: 0;}
ul {list-style: none;}
h1, h2 {margin: 0;}
a {text-decoration: none;color: inherit;}
a는 앵커태그
-----------------------------------------------------------------------------------------
display.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>디스플레이</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/display.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- span{inline}+(div.box>span{inline})+span{inline}-->
<span>inline</span>
<div class="box">
<span>inline</span>
</div>
<span>inline</span>
<hr>
<!--img[src=img/p_0$.jpg]*2-->
<img src="img/p_01.jpg"><img src="img/p_02.jpg">
</body>
</html>
-----------------------------------------------------------------------------------------
display.css
@charset "utf-8";
/*reset*/
* {margin: 0;padding: 0;border: 0;}
ul {list-style: none;}
h1, h2 {margin: 0;}
a {text-decoration: none;color: inherit;}
/*p183*/
/*display 속성
'none'
'block'
'inline'
'iline-block'
*/
span:first-child {
color: green;
}
/*1번, 2번: div 안의 첫째*/
span:last-child {
color: red;
}
/*2번: div 안의 첫째이자 막내, 3번*/
/*display:none*/
span:nth-child(3) {
display: none;
}
/*display:block
위에서 none으로 막아놓은 요소를 나타내는 것은 block으로만 가능
인라인 요소는 글자처럼 취급되어 여백이 생겨 붙지 않는다.
블럭 요소는 여백 없이 붙는다.
*/
span:nth-child(1) {
display: block;
}
/*display:inline*/
.box {
display: inline;
}
/*div는 블럭요소지만 inline 요소로 바꿈. 하지만 이런 경우는 잘 없음*/
span:nth-child(1) {
display: inline;
width: 50px;height: 50px;
background-color: hotpink;
margin: 10px;
}
/*inline 요소에는 아래위로 커지는 것 불가능. 양 옆으로만 가능*/
/*margin과 padding에는 block 요소에만 먹는다*/
/*display:inline-block
<- 인라인이자 블럭요소. 블럭요소를 인라인처럼 한 줄에 나타내고 싶을 때*/
span:nth-child(1) {
display: inline-block;
}
/*인라인 레이아웃을 유지하면서 가로세로 조절할 때. 내비게이션 메뉴에 사용.*/
/* display가 중요한 이유
1. inline 요소를 block으로 변환할 때
2. inline 요소를 inline-block으로 변환할 때
3. display를 none해서 숨길 때*/
img {
width: 200px;
display: block;
}
/*좌우로 붙을 때는 여백이 없지만 아래위로 나눠질 때는 여백이 생긴다
block 처리하면 여백 사라짐*/
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------