CSS 문법
<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>
<style type="text/css">
/** ( * : 전체 태그 선택자)
* {color: red;}
/** p : 태그 선택자 */
p { color: red; }
div { color: blue; background-color: aqua; }
p { color: green; } /*가장 가까운것이라 위에껀 @overload됨*/
</style>
</head>
<body>
<p>Hello CSS</p><br>
<div>Hello CSS</div>
<p>Hello CSS</p><br>
<div>Hello CSS</div>
<p>Hello CSS</p><br>
</body><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>
<style type="text/css">
.c1 { color: red;}
.c2 { color: blue;}
div.c1 { color: green;}
</style>
</head>
<body>
<p class="c1">Hello CSS</p>
<div class="c1">Hello CSS</div>
<p class="c2">Hello CSS</p>
<div class="c2">Hello CSS</div>
<p class="c3">Hello CSS</p>
<div class="c3">Hello CSS</div>
</body><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>
<style type="text/css">
/*
#i1 {color: red;}
#i2 {color: green;}
#i3 {color: blue;}
*/
#i1, #i2, #i3 {color: green;}
</style>
</head>
<body>
<p id="i1">Hello CSS</p>
<div id="i2">Hello CSS</div>
<p id="i3">Hello CSS</p>
<div id="i4">Hello CSS</div>
<p id="i5">Hello CSS</p>
<div id="i6">Hello CSS</div>
</body><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>
<style type="text/css">
/*자손 / 후손 */
/*div > p {color: red;}*/
div p {color: red;} /*후손만*/
/* div + : 근접된 아우 ~ : 아우전체 */
div ~ p {color: green;}
</style>
</head>
<body>
<!--
Dom(Document Object Model) Tree
부모 ... 자식. ... 후손
-->
<p>HELLO CSS1</p>
<div>
<p>Hello CSS2</p>
<span>
<p>Hello CSS3</p>
</span>
<p>Hello CSS4</p>
</div>
<p>Hello CSS5</p>
<p>Hello CSS5</p>
</body><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>
<style type="text/css">
/*pseudo class*/
a:link {color:#ff00ff;} //일반
a:visited {color: #33ff00;} //방문한적있을때
a:hover {color: #ff0080;} //마우스 올릴때
a:active {color: #0501ff;} //클릭할 때
</style>
</head>
<body>
<a href="https://m.naver.com">모바일 네이버</a>
<br><br>
<a href="https://m.nate.com">모바일 네이트</a>
</body><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>
<style type="text/css">
div:first-child {color: red;} 제일 위
div:last-child {color: green;} 제일 아래
div:nth-child(2) {color:blue;} 위에서부터 (*)번째
div:nth-child(2n) {color: red;} 2의 배수
div::first-line {color: #ff0000;} 첫줄에만
div::first-letter {color:#ff0000; font-size: xx-large;} 첫자만 크게
/* :: <= pseudo elements
</style>
</head>
<body>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
</body>background
background color
background-image: url('../images/daum.png');
background-repeat: no-repeat;
background-repeat: repeat-x;font 브라우저에서 지원하는 폰트
Font
-Family: 브라우저에서 지원하는 폰트
-size:
-style
google https://developers.google.com/fonts?
web font
<style type="text/css">
#i1 {
font-family:"궁서체"; 글자체
font-size: 12px; 글자크기
font-style: normal; 서체
font-weight: bold; 폰트 굵기
}
#i2 {
font-family:"굴림체";
font-size: 20px;
}
#i3 {
font-size: 400%;
}
</style>
</head>
<body>
<div id="i1">Hello Font 한글 내용</div>
<div id="i2">Hello Font 한글 내용</div>
<div id="i3">Hello Font 한글 내용</div>
</body>폰트 밀어주기
/*font 등록*/
@font-face {
font-family: myFont1;
src: url('./fonts/abc.def');
}
#i1 { font-family: myFont1;}box model(영억)
width / height
border
width
color
stylemargin/padding
=> table
블럭태그(p, div, span) + csscss로 테이블 만들기
<style type="text/css">
div, span {
border: 2px solid blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="i1">영역1</div>
<div id="i2">영역2</div>
<!--span.은 width height가 안먹음-->
<span>영역3</span>
<span>영역4</span>
</body>
</html><style type="text/css">
<!-- Tag의 속성을 css로 수정할 수 있다 -->
div, span {
border: 1px solid red;
}
div {
display: inline;
}
span {
display: block;
}
</style>inline 속성을 가진 블럭은 width height margin ... 등
작동하지 않음
Programmer