1. css 문법과 적용 방법
- CSS는 각각의 스타일 속성에 다양한 값을 입력한다.
* CSS 적용방법
1) 외부 스타일 시트
2) 내부 스타일 시트
3) 인라인 시트
<!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 누르고 tap-->
<link rel="stylesheet" href="index01.css">
<!--내부 스타일 시트-->
<style>
p {color: blue;}
</style>
</head>
<body>
<p>외부 스타일 시트</p>
<p>외부 스타일 시트</p>
<p style="color: aqua;">외부 스타일 시트</p>
</body>
</html>
2. CSS사용 되는 단위
- CSS3에서 사용하는 크기 단위는 %, em, cm, mm, inch, px이다.
% - 부모영역 지정된 크기에 대한 퍼센트
em – 부모영역에 지정된 크기에 대한 배수단위
px – 고정크기
vh – 보여지는 화면크기에 대한 비율
- 파일을 지정할때 위치를 가르키는 URL단위
ex) background-image: url('desert.jpg')
3. 1) 선택자
- HTML 문서 안의 모든 태그를 선택할 때는 전체 선택자를 사용한다.
<!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>
<style>
* { } /* 디자인 시작 전에 전역으로 적용할 속성 margin and padding에 적용 */
b { color: red; }
#a1 {color:aqua;} /* 아이디 */
.b1 {color:blue;} /* 클래스 */
.box p {color: yellow;} /* 모든 자식 */
.box > p {color: purple;} /* 직계 자식 */
.box2 li,
.box2 p {color: green;}
.forms input[type=text] {background-color: aqua;}
</style>
</head>
<body>
<p>선택자</p>
<b>선택자</b>
<p id = "a1">아이디 선택자 #</p>
<p class = "b1">클래스 선택자 .</p>
<p class = "b1">클래스 선택자 .</p>
<div class = "box">
<p>하위 선택자 꺽쇠</p>
<p>하위 선택자 꺽쇠</p>
<form>
<p>하위 선택자 공백</p>
</form>
</div>
<div class = "box2">
<ul>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ul>
<div>
<p>내용...</p>
</div>
<form class = "forms">
<input type = "text">
<input type = "submit">
</form>
</div>
</body>
</html>
2) 가상 선택자
<!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>
<style>
/* 마우스 닿을 때 */
.list > ul > li > a:hover {background-color: aqua;}
/* input에 포커스 될 때 */
.inner input:focus {background-color: aqua;}
/* 눌렀을 때 */
.title p:active {background-color: aqua;}
</style>
</head>
<body>
<div class = "list">
<ul>
<li><a href = "#"> 목록</a></li>
<li><a href = "#"> 목록</a></li>
<li><a href = "#"> 목록</a></li>
</ul>
</div>
<div class = "inner">
<input type = "text">
<input type = "text">
</div>
<div class = "title">
<p>active</p>
</div>
</body>
</html>
4. 웹폰트
- 구글 웹폰트에서 원하는 폰트 찾아서 복사해서 붙여넣기
<!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>
</head>
<body>
<!-- 웹폰트 링크(맨 위에 복사) -->
<!--
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
-->
<!-- 웹폰트 import(css 창에 있는 글 복사), url은 두번째 창에 있는 글 복사 -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
body, html {
font-family: 'Nanum Brush Script', cursive;
font-size: 15px;
font-weight: 500;
}
</style>
웹폰트
</body>
</html>
5. 문단
<!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>
<style>
p {
border: 1px solid #777;
height: 100px;
width: 300px;
}
.tx1 {overflow: hidden;} /* 글이 넘치면 숨긴다 */
.tx2 {overflow: scroll;} /* 무조건 스크롤 생성 */
.tx3 {overflow: auto;} /* 내용이 넘칠 때만 스크롤 생성 */
.tx4 {overflow: visible;} /* 기본값 */
</style>
</head>
<body>
<p class = "tx1">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다. 물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
그림이라는 말을 쓰니 그 옛날 "한니발 장군"의 일화가 생각납니다.
한니발 장군은 나폴레옹보다 거의 2천년 가까이 앞선 BC 217년에 알프스 산맥을 넘어 로마로 진군했던 '카르타고'의 명장(名將)입니다. 그가 이탈리아 남부 칸나에 평원에서 로마군을 박살낸 ‘칸나에 전투’는 세계 모든 육사(陸士) 교과서에서 다뤄질 정도입니다 . 한니발 장군 부대는 프랑스를 점령하고 알프스산맥을 넘어 세계 최강의 로마를 점령했습니다.
한니발 장군이 젊었을 때 이야기입니다.
한니발 장군의 외형은 불행히도 애꾸눈이었습니다.
그래서 항상 콤플렉스를 지니고 있었습니다.
어느날 화가에게 자기 초상화를 그려달라고 했습니다. 그 화가는 사실 그대로 애꾸눈인 한니발 얼굴 모습으로 그렸습니다. 그러자 한니발은 애꾸눈인 자화상을 보면서 화를 내면서 그 화가를 꾸짖었습니다. 이번에는 다른 화가에게 부탁했습니다. 이번 화가는 앞의 화가처럼 그리면 혼날 것이 뻔하기에 정상적인 눈을 가진 초상화를 그렸습니다. 한니발은 이번에도 화를 냈습니다. 자기의 모습이 아니라는 것입니다.
또 다른 화가에게 맡겼습니다.
세 번째 화가는 한니발 장군을 비스듬히 앉히고 옆에서 애꾸눈이 안 보이는 정상적인 눈만 보이도록 비스듬히 앉히고 다른 각도에서 초상화를 그렸습니다. 나중에 완성된 그림을 보고 이 화가의 지혜를 칭찬하였다고 합니다.
그렇습니다. 고정관념을 버리면서 새로운 창의적인 생각으로 삶의 지혜를 갖고 인생을 살아가야 합니다.
바야흐로 한해를 설계하고 소망을 갖는 1월입니다.
올 한해, 자기가 목표한 것에 도달하기 위해 어느 조직의 경영이든, 개인적인 생활이든 , 자신과의 약속을 지키는 것이 중요하리라 생각합니다. 그리고 올 한해 따뜻한 마음을 가지고 서로 나누고 베푸는 한해가 되었으면 합니다.
우리가 잘 아는 영어의 커뮤니케이션(communication)이라는 말이 있습니다.
굳이 우리말로 옮기면 소통, 연락, 전달 등의 뜻이 되는 이 말은 어원(語源)이 라틴어 커뮤니카레에서 비롯됐습니다. 라틴어 커뮤니카레는 '나누다' 라는 뜻입니다. 즉 커뮤니케이션(communication)은 서로 나누는 것입니다.
2004년------- 서로 사랑을 나누고, 미소를 나누고, 정보를 나누고, 정을 나누고......
그래야 우리의 삶이 " 천국의 계단"으로 하나씩 오르는 것이 아닐까요??????.
요즈음 인기있는 책이 있습니다. </p>
<p class = "tx2">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다. 물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
그림이라는 말을 쓰니 그 옛날 "한니발 장군"의 일화가 생각납니다.
한니발 장군은 나폴레옹보다 거의 2천년 가까이 앞선 BC 217년에 알프스 산맥을 넘어 로마로 진군했던 '카르타고'의 명장(名將)입니다. 그가 이탈리아 남부 칸나에 평원에서 로마군을 박살낸 ‘칸나에 전투’는 세계 모든 육사(陸士) 교과서에서 다뤄질 정도입니다 . 한니발 장군 부대는 프랑스를 점령하고 알프스산맥을 넘어 세계 최강의 로마를 점령했습니다.
한니발 장군이 젊었을 때 이야기입니다.
한니발 장군의 외형은 불행히도 애꾸눈이었습니다.
그래서 항상 콤플렉스를 지니고 있었습니다.
어느날 화가에게 자기 초상화를 그려달라고 했습니다. 그 화가는 사실 그대로 애꾸눈인 한니발 얼굴 모습으로 그렸습니다. 그러자 한니발은 애꾸눈인 자화상을 보면서 화를 내면서 그 화가를 꾸짖었습니다. 이번에는 다른 화가에게 부탁했습니다. 이번 화가는 앞의 화가처럼 그리면 혼날 것이 뻔하기에 정상적인 눈을 가진 초상화를 그렸습니다. 한니발은 이번에도 화를 냈습니다. 자기의 모습이 아니라는 것입니다.
또 다른 화가에게 맡겼습니다.
세 번째 화가는 한니발 장군을 비스듬히 앉히고 옆에서 애꾸눈이 안 보이는 정상적인 눈만 보이도록 비스듬히 앉히고 다른 각도에서 초상화를 그렸습니다. 나중에 완성된 그림을 보고 이 화가의 지혜를 칭찬하였다고 합니다.
그렇습니다. 고정관념을 버리면서 새로운 창의적인 생각으로 삶의 지혜를 갖고 인생을 살아가야 합니다.
바야흐로 한해를 설계하고 소망을 갖는 1월입니다.
올 한해, 자기가 목표한 것에 도달하기 위해 어느 조직의 경영이든, 개인적인 생활이든 , 자신과의 약속을 지키는 것이 중요하리라 생각합니다. 그리고 올 한해 따뜻한 마음을 가지고 서로 나누고 베푸는 한해가 되었으면 합니다.
우리가 잘 아는 영어의 커뮤니케이션(communication)이라는 말이 있습니다.
굳이 우리말로 옮기면 소통, 연락, 전달 등의 뜻이 되는 이 말은 어원(語源)이 라틴어 커뮤니카레에서 비롯됐습니다. 라틴어 커뮤니카레는 '나누다' 라는 뜻입니다. 즉 커뮤니케이션(communication)은 서로 나누는 것입니다.
2004년------- 서로 사랑을 나누고, 미소를 나누고, 정보를 나누고, 정을 나누고......
그래야 우리의 삶이 " 천국의 계단"으로 하나씩 오르는 것이 아닐까요??????.
요즈음 인기있는 책이 있습니다. </p>
<p class = "tx3">
2004년 새해가 밝았습니다.
</p>
<p class = "tx4">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다. 물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
그림이라는 말을 쓰니 그 옛날 "한니발 장군"의 일화가 생각납니다.
한니발 장군은 나폴레옹보다 거의 2천년 가까이 앞선 BC 217년에 알프스 산맥을 넘어 로마로 진군했던 '카르타고'의 명장(名將)입니다. 그가 이탈리아 남부 칸나에 평원에서 로마군을 박살낸 ‘칸나에 전투’는 세계 모든 육사(陸士) 교과서에서 다뤄질 정도입니다 . 한니발 장군 부대는 프랑스를 점령하고 알프스산맥을 넘어 세계 최강의 로마를 점령했습니다.
한니발 장군이 젊었을 때 이야기입니다.
한니발 장군의 외형은 불행히도 애꾸눈이었습니다.
그래서 항상 콤플렉스를 지니고 있었습니다.
어느날 화가에게 자기 초상화를 그려달라고 했습니다. 그 화가는 사실 그대로 애꾸눈인 한니발 얼굴 모습으로 그렸습니다. 그러자 한니발은 애꾸눈인 자화상을 보면서 화를 내면서 그 화가를 꾸짖었습니다. 이번에는 다른 화가에게 부탁했습니다. 이번 화가는 앞의 화가처럼 그리면 혼날 것이 뻔하기에 정상적인 눈을 가진 초상화를 그렸습니다. 한니발은 이번에도 화를 냈습니다. 자기의 모습이 아니라는 것입니다.
또 다른 화가에게 맡겼습니다.
세 번째 화가는 한니발 장군을 비스듬히 앉히고 옆에서 애꾸눈이 안 보이는 정상적인 눈만 보이도록 비스듬히 앉히고 다른 각도에서 초상화를 그렸습니다. 나중에 완성된 그림을 보고 이 화가의 지혜를 칭찬하였다고 합니다.
그렇습니다. 고정관념을 버리면서 새로운 창의적인 생각으로 삶의 지혜를 갖고 인생을 살아가야 합니다.
바야흐로 한해를 설계하고 소망을 갖는 1월입니다.
올 한해, 자기가 목표한 것에 도달하기 위해 어느 조직의 경영이든, 개인적인 생활이든 , 자신과의 약속을 지키는 것이 중요하리라 생각합니다. 그리고 올 한해 따뜻한 마음을 가지고 서로 나누고 베푸는 한해가 되었으면 합니다.
우리가 잘 아는 영어의 커뮤니케이션(communication)이라는 말이 있습니다.
굳이 우리말로 옮기면 소통, 연락, 전달 등의 뜻이 되는 이 말은 어원(語源)이 라틴어 커뮤니카레에서 비롯됐습니다. 라틴어 커뮤니카레는 '나누다' 라는 뜻입니다. 즉 커뮤니케이션(communication)은 서로 나누는 것입니다.
2004년------- 서로 사랑을 나누고, 미소를 나누고, 정보를 나누고, 정을 나누고......
그래야 우리의 삶이 " 천국의 계단"으로 하나씩 오르는 것이 아닐까요??????.
요즈음 인기있는 책이 있습니다. </p>
</body>
</html>
6. display 및 예제
<!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>
<style>
.list .inner {display: inline;} /* 인라인 요소로 변경 */
.list2 span {display: block;} /* 블럭 요소로 변경 */
.list3 a {
display: inline-block; /* 인라인으로 배치, 블럭의 성질을 가지게 함 */
height: 100px;
line-height: 100px;
width: 100px;
text-align: center;
}
.box {display: none;} /* 숨기기 */
</style>
</head>
<body>
<div class = "list">
<div class = "inner">블럭</div>
<div class = "inner">블럭</div>
<div class = "inner">블럭</div>
</div>
<div class = "list2">
<span>인라인</span>
<span>인라인</span>
<span>인라인</span>
</div>
<div class = "list3">
<a href="#">인라인</a>
<a href="#">인라인</a>
<a href="#">인라인</a>
</div>
<div class = "box">
<p>디스플레이 none</p>
</div>
</body>
</html><!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>
<style>
* {list-style: none; padding: 0; margin: 0;}
.nav {text-align: center;}
.nav li {display: inline;}
.nav li a {
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
text-align: center;
text-decoration: none; /* 밑줄 제거 */
}
</style>
</head>
<body>
<ul class = "nav">
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
</ul>
<style>
#header {
background-color: #000;
color: #fff;
text-align: center;
}
.wrap ul li {display: inline;}
.wrap ul li a {
display:inline-block;
height: 100px;
line-height: 100px;
width: 100px;
color: #fff;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
.wrap ul li a:hover {
background-color: #777;
}
</style>
<header id = "header">
<h3>목록 만들기</h3>
<nav class = "wrap">
<ul>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
</ul>
</nav>
</header>
</body>
</html>
7. background
<!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>
<style>
p {
border: 1px solid #777;
width: 300px;
height: 300px;
}
.tx1 {
background-color: aqua;
background-image: url('img/bgimg.png');
background-repeat: no-repeat; /* repeat; */
background-size: 300px;
background-position: -30px -30px; /* 왼, 위 */
}
</style>
</head>
<body>
<p class = "tx1">
우리집 강아지는 장군이인데, 참 속을 많이 썪인다. <br>
정신차리자<br>
정신차리자<br>
정신차리자<br>
</p>
</body>
</html><!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>
<style>
header {height: 300px; background-color: aqua;}
article {
height: 500px;
background-image: url('img/back.jpg');
background-attachment: fixed; /*scroll; */
background-size: contain; /* 백그라운드가 잘리지 않도록 하고, 나머지는 비움 */
background-size: cover; /* 빈 공간 없이 채워줌, 나머지는 비움 */
}
section {height: 100vh; background-color: pink;}
footer {height: 300px; background-color: yellow;}
</style>
</head>
<body>
<header>
헤더...
</header>
<article>
글영역...
</article>
<section>
본문...
</section>
<footer>
푸터...
</footer>
</body>
</html>