<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- html 주석은 화살표괄호 + 누낌표 + 마이너스 -->
<!-- css의 style 태그를 사용해서 스타일을 준다. -->
<!-- 내부스타일 css -->
<style>
/* css 주석은 슬래시+별표 */
/* h2 태그는 글자크기를 20xp 적용 */
/* h2 태그는 글자색을 오렌지색 적용 */
h2{
font-size: 20px;
color: orange;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>웹 문서의 디자인과 내용을 분리합니다.</h2>
<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
<p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>
CSS 외부 스타일
inline
<body>
<h1>블루베리</h1>
<!-- 인라인 스타일 : 특정영역 지정해서 스타일 적용 -->
<p style="color: blue;">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
</body>
tag - selector
selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 전체 여백이 20px */
*{
/* 테두리 바깥쪽 여백이 20px */
/* 테두리 안쪽은 padding */
margin: 20px;
}
#container{
color: orange;
}
#container2{
color: blue;
}
#cont{
/* 테두리가 1px 두께, 점선, 회색 */
border: 1px dotted gray;
width: 600px; /*너비*/
/* 테두리 안쪽 여백이 15px */
padding: 15px;
}
.bluetext{
color:brown;
}
p{
font-size: 0.9em;
line-height: 2.0;
}
/* h2 태그이면서 accent 클래스에 적용 */
h2.accent{
background-color: #222;
color: #fff;
/* 배경색 안쪽에 여백이 5px */
padding: 5px;
}
.redtext{
color: red;
}
.boldtext{
font-weight: bold;
}
h3, h4{
color: aqua;
background-color: #222;
}
</style>
</head>
<body>
<!-- id가 웹표준은 한번 사용인데 2번 사용해도 적용됨 -->
<div id="cont">
<h1 id="container2">회사 소개</h1>
<!-- <h2 id="container">사람을 구체적으로 도와주는 책</h2> -->
<!-- <h2>사람을 구체적으로 도와주는 책</h2> -->
<h2 class="accent">사람을 구체적으로 도와주는 책</h2>
<p id="container2">
이지스퍼블리싱의 책에는 <span class="redtext boldtext">사람들에게 구체적으로 도움이 되는
책을 만든다는 출판 가치가 담겨 있습니다.</span>
</p>
<p class="bluetext">
이지스퍼블리싱의 책에는 사람들에게 구체적으로 도움이 되는
책을 만든다는 출판 가치가 담겨 있습니다.
</p>
<!-- <h2 id="container">이지스퍼블리싱의 미션</h2> -->
<h2>이지스퍼블리싱의 미션</h2>
<p class="bluetext">
이지스퍼블리싱의 책에는 사람들에게 구체적으로 도움이 되는
책을 만든다는 출판 가치가 담겨 있습니다.
</p>
<p>
이지스퍼블리싱의 책에는 사람들에게 구체적으로 <span class="bluetext">도움</span>이 되는
책을 만든다는 출판 가치가 담겨 있습니다.
</p>
<h3>정보의 지름길을 만든다.</h3>
<h4>도움이 되는 책을 만든다.</h4>
</div>
</body>
</html>
priority
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 20px;
}
#container{
border: 1px dotted gray;
width: 600px;
padding: 15px;
}
/* h2 태그스타일이 body태그보다 우선순위가 높다 */
h2{
/* !important 가 최우선 적용 */
color: yellow !important;
}
body{
color: blue;
}
</style>
</head>
<body>
<div id="container">
<!-- 인라인 스타일이 h2 태그스타일보다 우선순위가 높다 -->
<h2 style="color: green;">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책</p>
<p>사람에게 구체적으로 도움을 주는 책</p>
<p>사람에게 구체적으로 도움을 주는 책</p>
<!-- 인라인 스타일이 body 태그스타일보다 우선순위가 높다 -->
<p style="color: red; font-style: italic;">사람에게 구체적으로 도움을 주는 책</p>
</div>
</body>
transform
<title>Document</title>
<style>
.box{
/* 테두리 두께: 2px, 실선, 녹색 */
border: 2px solid green;
width: 100px;
/* 텍스트 정렬: 가운데 */
text-align: center;
}
/* hover 이벤트는 마우스 올렸을때 처리 */
.box:hover{
/* transfor 의 rotate속성값으로 15도 기운다. */
/* transform: rotate(15deg); */
/* moz 접두사는 모질라,파이어폭스 적용 */
/* -moz-transform: rotate(15deg); */
/* o 접두사는 오페라 적용 */
/* -o-transform: rotate(15deg); */
/* ms 접두사는 익스플로러 적용 */
/* -ms-transform: rotate(15deg); */
/* webkit 접두사는 사파리, 크롬 적용 */
-webkit-transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>
