본문 바로가기
IT/HTML

[32일차] 4장 CSS3로 웹 페이지 꾸미기

by GWLEE 2022. 8. 3.

ex4-02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일을 가진 웹 페이지</title>
<style>
	/* CSS 스타일 시트 작성 css 주석 */
	body { background-color : #abb7e8; }
	h3 { color : #3f496e; }
	hr { border : 5px solid #092595; }
	span { color : blue; font-size : 20px; } /* span 태그 스타일 선언 */
</style>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>

 

ex4-03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;style&gt; 태그로 스타일 만들기</title>
<style>
body {
	background-color : linen;
	color : blueviolet;
	margin-left : 100px;
	margin-right : 100px;
 }
h3 {
	text-align : center;
	color : darkred;
}
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서
책읽기를 좋아합니다. 김치 찌개와 막국수 무척
좋아합니다.</p>
</body>
</html>

 

ex4-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;style&gt; 속성에 스타일 시트 만들기</title>
<style>
p { color : red; font-size : 15px; } /* 모든 p 태그에 적용 */
</style>
</head>
<body>
<h3>손 홍 민</h3>
<hr>
<p>오페라를 좋아하고</p>
<p>엘비스 프레슬리를 좋아하고</p>
<p style="color:blue">김치부침개를 좋아하고</p>
<p style="color:magenta; font-size:30px">축구를 좋아합니다.</p>
</body>
</html>

 

ex4-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;link&gt; 태그로 스타일 파일 불러오기</title>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>

fig4-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
h3, li { /* 태그 타입 셀렉터 */
	color : brown; /* h3, li Brown 으로 해라*/
}
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
	<div>2학기 <strong>학습 내용</strong></div>
		<ul>
			<li>HTML5</li>
			<li><strong>CSS</strong></li>
			<li>JAVASCRIPT</li>
		</ul>
	<div>60점 이하는 F!</div>
</div>
</body>
</html>

ex4-07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부모 스타일 상속</title></head>
<body>
<h3>부모 스타일 상속</h3>
<hr>
<p style="color:green">자식 태그는 부모의 스타일을
	<em style="font-size:25px">상속</em>받는다.</p>
</body>
</html>

fig4-07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
#list { /* id 셀렉터 */
	background : 	#7bea97;
}
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
	<div>2학기 <strong>학습 내용</strong></div>
	<ul id="list">
		<li>HTML5</li>
		<li><strong>CSS</strong></li>
		<li>JAVASCRIPT</li>
	</ul>
	<div>60점 이하는 F!</div>
</div>
</body>
</html>

 

ex4-08.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 합치기 및 오버라이딩</title>
<link type="text/css" rel="stylesheet" href="external.css">
<style>
p { color : blue; font-size : 12px; }
</style>
</head>
<body>
<h3>p 태그에 스타일 중첩</h3>
<hr>
<p>Hello, students!</p>
<p style="font-size:25px">안녕하세요 교수님!</p>
</body>
</html>

ex4-09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;link&gt; 태그로 스타일 파일 불러오기</title>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>

ex4-10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 색 활용</title>
<style>
div {
	margin-left : 30px;
	margin-right : 30px;
	margin-bottom : 10px;
	color : white;
}
</style>
</head>
<body>
<h3>CSS3 색 활용</h3>
<hr>
<div style="background-color:deepskyblue">
	deepskyblue(#00BFFF)</div>
<div style="background-color:brown">
	brown(#A52A2A)</div>
<div style="background-color:fuchsia">
	fuchsia(#FF00FF)</div>
<div style="background-color:darkorange">
	darkorange(#FF8C00)</div>
<div style="background-color:#008B8B">
	darkcyan(#008B8B)</div>
<div style="background-color:#6B8E23">
	olivedrab (#6B8E23)</div>
</body>
</html>

ex4-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 꾸미기</title>
<style>
h3 {
text-align : right; /* 오른쪽 정렬 */
}
span {
text-decoration : line-through; /* 중간 줄 */
}
strong {
text-decoration : overline; /* 윗줄 */
}
.p1 {
text-indent : 3em; /* 3 글자 들여쓰기 */
text-align : justify; /* 양쪽 정렬 */
}
.p2 {
text-indent : 1em; /* 1 글자 들여쓰기 */
text-align : center; /* 중앙 정렬 */
}
</style>
</head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p class="p1">HTML의 태그만으로 기존의
워드 프로세서와 같이 들여쓰기, 정렬, 공백,
간격 등과 세밀한 <span>텍스트 제어</span>를
할 수 없다. </p>
<p class="p2">그러나,
<strong>스타일 시트</strong>는 이를
 가능하게 한다. 들여쓰기, 정렬에 대해서
 알아본다</p>
<p><a href="http://www.naver.com"
 style="text-decoration : none">
 밑줄이 없는 네이버 링크</a>
</body>
</html>

ex4-12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폰트</title>
<style>
body {
	font-family: "Times New Roman", Serif;
	font-size: large;
}
h3 {
	font: italic bold 40px consolas, sans-serif;
}
</style>
</head>
<body>
<h3>Consolas font</h3>
<hr>
<p style="font-weight:900">font-weight 900</p>
<p style="font-weight:100">font-weight 100</p>
<p style="font-style:italic">Italic Style</p>
<p style="font-style:oblique">Oblique Style</p>
<p>현재 크기의
	<span style="font-size:1.5em">1.5배</span>
	크기로
</p>
</body>
</html>

ex4-13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style>
body { background : ghostwhite; }
span { background : deepskyblue; }
div.box {
	background : yellow;
	border-style : solid;
 	border-color : peru;

	margin : 40px;
	border-width : 30px;
	padding : 20px;
}
</style>
</head>
<body>
	<div class="box">
		<span>DIVDIVDIV</span>
	</div>
</body>
</html>

ex4-14.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style>
div.inner {
	background : yellow;
	padding : 20px;
	border : 5px dotted red;
	margin : 30px;
}
</style></head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div class="inner">
		<img src="media/mio.png" alt="고양이눈">
</div>
</body>
</html>

ex4-15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 soild</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</html>

ex4-16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>둥근 모서리 테두리</title>
<style>
p {
    background : #90D000;
    padding : 20px;
    width : 300px;
}
#round1 { border-radius : 50px; }
#round2 { border-radius : 0px 20px 40px 60px; }
#round3 { border-radius : 0px 20px 40px; }
#round4 { border-radius : 0px 20px; }
#round5 { border-radius : 50px;
			border-style : dotted; }
</style>
</head>
<body>
<h3>둥근 모서리 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
<p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
<p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
<p id="round5">반지름 50의 둥근 점선 모서리</p>
</body>
</html>

 

ex4-18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경 꾸미기</title>
<style>
div {
    background-color : skyblue;
    background-size : 100px 100px;
    background-image : url("media/spongebob.png");
   	background-repeat : repeat-y;
    background-position : center center;
}
div {
	width : 500px;
	height : 500px;
	color : blueviolet;
	font-size : 16px;
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div>SpongeBob is an over-optimistic
 sponge that annoys other characters. </div>
</body>
</html>

 

ex4-19.html

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>텍스트 그림자</title>
<style>
div {
	font : normal 24px verdana;
}
.dropText {
	text-shadow : 3px 3px;
}
.redText {
	text-shadow : 3px 3px red;
}
.blurText {
	text-shadow : 3px 3px 5px skyBlue;
}
.glowEffect {
	text-shadow : 0px 0px 3px red;
}
.wordArtEffect {
	color : white;
	text-shadow : 0px 0px 3px darkBlue;
}
.threeDEffect {
	color : white;
	text-shadow : 2px 2px 4px black;
}
.multiEffect {  /* 3개의 효과 동시 적용 */
	color : yellow;
	text-shadow : 2px 2px 2px black,
		       0 0 25px yellow,
		       0 0 5px darkblue;
}
</style></head>
<body>
<h3>텍스트 그림자 만들기</h3>
<hr>
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">WordArt Effect</div>
<div class="threeDEffect">3D Effect</div>
<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>

 

ex4-20.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div에 박스 그림자 만들기</title>
<style>
.redBox {
	box-shadow : 10px 10px red;
}
.blurBox {
	box-shadow : 10px 10px 5px skyBlue;
}
.multiEffect {
	box-shadow : 2px 2px 2px black,
		       	0 0 25px blue,
			   	0 0 5px darkblue;
}
div {
	width : 150px;
	height : 70px;
    padding : 10px;
    border : 10px solid lightgray;
    background-image : url("media/spongebob.png");
    background-size : 150px 100px;
    background-repeat : no-repeat;
}
</style>
</head>
<body>
<h3>박스 그림자 만들기</h3>
<hr>
<div class="redBox">뚱이와 함께</div><br>
<div class="blurBox">뚱이와 함께</div><br>
<div class="multiEffect">뚱이와 함께</div>
</body>
</html>

ex4-21.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 커서</title>
</head>
<body>
<h3>마우스 커서</h3>
아래에 마우스를 올려 보세요. 커서가 변합니다.
<hr>
<p style="cursor: crosshair">십자 모양 커서</p>
<p style="cursor: help">도움말 모양 커서</p>
<p style="cursor: pointer">포인터 모양 커서</p>
<p style="cursor: progress">프로그램 실행 중 모양 커서</p>
<p style="cursor: n-resize">상하 크기 조절 모양 커서</p>
</body>
</html>

fig4-06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
.gogo { /* class 셀렉터 */
	color : red;
}
body.main { /* class 셀렉터 */
  /*같은 클래스 이름의 style을 정할때 */
	 background : #7b97ea;
}
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
	<div>2학기 <strong>학습 내용</strong></div>
	<ul>
		<li>HTML5</li>
		<li><strong>CSS</strong></li>
		<li>JAVASCRIPT</li>
	</ul>
	<div class="warning hello gogo">60점 이하는 F!</div>
<!-- 클래스 이름 여러개 지정 가능  -->
</div>
</body>
</html>

fig4-08.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
div > div > strong { /* 자식 셀렉터 */
background : #ceea7b;
}

ul strong { /* 자손 셀렉터 */
color : #7beab3 ;
}
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div>60점 이하는 F!</div>
</div>
</body>
</html>

fig4-15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style>
span {
 	display : block;
  	width : 150px;
	height : 50px;
	background-color: deepskyblue;
}
div {
	display : inline-block;
	background-color: ghostwhite;
}

div#color {
	background: yellow;
	border-style: solid;
	border-color: Peru;
}
div.box {
	width : 150px;
	height : 50px;
	padding : 20px;
	border-width: 30px;
	margin : 40px;
}
</style>
</head>
<body>
<div>
	<div class="box" id="color">
		<span>DIVDIVDIV</span>
	</div>
</div>
</body>
</html>

external.css

p{
  background: #e9edfc;
}

body{
  background: #7b97ea;
}

mystyle.css

body {
	background-color : #496dee;
	color : white;
	margin-left : 100px;
	margin-right : 100px;
 }
h3 {
	text-align : center;
	color : darkred;
}

 

'IT > HTML' 카테고리의 다른 글

[33일차] 5장 CSS3 고급 활용  (0) 2022.08.04
[33일차] HTML  (0) 2022.08.04
[32일차] 3강 HTML5 문서 구조화와 웹 폼  (0) 2022.08.03
[32일차] 2강 HTML5 기본 문서 만들기  (0) 2022.08.03
[32일차] HTML  (0) 2022.08.03

관련글

댓글

티스토리툴바