문자효과
; 그림자, 줄바꿈, 글꼴지정
1. text-shadow
2. word-wrap
3. font-face
<style type="text/css">
*{margin:0; padding: 0}
li{list-style-type: none}
body{}
h1{
font-size: 30px; color:#FFEBCD ;
text-shadow: /* x y 퍼짐정도 색상 */
5px 10px 10px #F55e;
}
h2{
font-size: 30px; color:#FFEBCD ;
text-shadow:
5px 10px 10px #F55e;
}
</style>
</head>
<body>
<h1>상상이 현실로 되기 위해서는 반드시 번데기 시절이 필요하다</h1>
<h2>let's do it together!</h2>
</body>
<style type="text/css">
*{margin: 0; padding: 0}
div{width: 11em; padding: 10px; background-color: #1CE4E6;}
#wrap{word-wrap:break-word;} /* word-wrap: 박스안에 줄바꿈 처리된다*/
</style>
</head>
<body>
<div>
이 문장은 매우 긴 단어를 포함하고 있습니다.
askdjfajdksjkdj;sakfjklajfkl;jasd;f
문장을 길게 입력하여 width 값을 적용해본다
</div>
<div id="wrap">
이 문장은 매우 긴 단어를 포함하고 있습니다.
askdjfajdksjkdj;sakfjklajfkl;jasd;f
문장을 길게 입력하여 width 값을 적용해본다
</div>
</body>
<!--
font-face(글꼴)
. 기본글꼴이 아닌 경우, 글꼴 파일없이는 화면에 적용할 수 없다.
. 웹 폰트
format 확장자
-------------------------------
"truetype" .ttf
"opentype" .ttf, otf
"svg" .svg
"woff" .woff
"embedded-opentype" .eot
-->
<html>
<head>
<meta charset="UTF-8">
<title>Webfont</title>
<style type="text/css">
@font-face{
font-family: "NBrush";
src:url("NanumBrush.ttf") format("truetype");
}
@font-face{
font-family: "NPen";
src:url("NanumPen.ttf") format("truetype");
}
h1{
text-align: center;
font: bold 5em "NBrush";
}
h2{
text-align: center;
font: bold 2.3em "NPen";
color: skyblue;
}
</style>
</head>
<body>
<h1>혼자 할 수 있는 일은 많지 않다.<br>그래서 관계가 중요하다</h1>
<h2>하루가 즐거우려면 이발을 해라! 일주일을 행복하게 살려면 차를 사라!<br>
한달을 행복하게 살려면 승마를 배우라! 1년을 행복하려면 결혼을 해라!<br>
평생 행복하려면 정직해라!</h2>
</body>
<meta charset="UTF-8">
<title>색상투명도</title>
<style type="text/css">
body {
margin: 20px;
background: url("");
}
code{
font-family: Helvetica, sans-serif;
font-weight: bold;
}
div{
margin: 5px;
padding: 15px;
border: 10px solid #ffffff;
background-color: #00cc99;
}
#sample1{opacity: 0.0}
#sample2{opacity: 0.1}
#sample3{opacity: 0.2}
#sample4{opacity: 0.3}
#sample5{opacity: 0.4}
#sample6{opacity: 0.5}
#sample7{opacity: 0.6}
#sample8{opacity: 0.7}
#sample9{opacity: 0.8}
#sample10{opacity: 0.9}
#sample11{opacity: 1.0}
</style>
</head>
<body>
<h2>색상의 불투명도를 대입해서 결과학습</h2>
<hr>
<div id="sample1">sample1<code>#sample1{opacity: 0.0}</code></div>
<div id="sample2">sample2<code>#sample2{opacity: 0.1}</code></div>
<div id="sample3">sample3<code>#sample3{opacity: 0.2}</code></div>
<div id="sample4">sample4<code>#sample4{opacity: 0.3}</code></div>
<div id="sample5">sample5<code>#sample5{opacity: 0.4}</code></div>
<div id="sample6">sample6<code>#sample6{opacity: 0.5}</code></div>
<div id="sample7">sample7<code>#sample7{opacity: 0.6}</code></div>
<div id="sample8">sample8<code>#sample8{opacity: 0.7}</code></div>
<div id="sample9">sample9<code>#sample9{opacity: 0.8}</code></div>
<div id="sample10">sample10<code>#sample10{opacity: 0.9}</code></div>
<div id="sample11">sample11<code>#sample11{opacity: 1.0}</code></div>
</body>
<title>색상투명도</title>
<style type="text/css">
body{
background-image: url("img/elsa.png");
background-repeat: no-repeat;
}
.rgba span{
color: yellow;
font-size: 50px;
font-weight: bolder;
border: #fff 1px solid; /* border-color, border-width, border-style */
padding: 10px;
/* background: rgba(255,255,255,0.3); */
background: hsl(33, 100%, 50%); /* 색상, 채도, 명도 */
position: relative;
left: 200px;
top: 485px;
display: block;
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<p class="rgba"><span>COLOR</span></p>
</body>
<title>Text 단위</title>
<style type="text/css">
*{font-size:14px;}
#a{font-size: 200%;}
#b{font-size: 2em;}
#c{font-size: smaller;}
</style>
<p id="a">글자의 크기 지정</p>
<p id="b">글자의 크기 지정</p>
<p id="c">글자의 크기 지정</p>
<p id="d">글자의 크기 지정</p>
<p id="e">글자의 크기 지정</p>
<p id="f">글자의 크기 지정</p>
</body>
<title>text2 속성</title>
<style type="text/css">
*{font-size: 30px}
#a{font-family: Arial}
#b{font-family: "Times New Roman"}
#c{font-family: serif}
#d{font-family: 궁서체}
#e{font-family: 굴림체}
</style>
</head>
<body>
<p id="a">폰트 속성입니다.</p>
<p id="b">폰트 속성입니다.</p>
<p id="c">폰트 속성입니다.</p>
<p id="d">폰트 속성입니다.</p>
<p id="e">폰트 속성입니다.</p>
</body>
<!--
텍스트관련 속성들
. text-family: 글자체
. letter-spacing: 글자 사이의 간격
. word-spacing: 단어사이의 간격
. line-height: 줄 간격
. text-align: 텍스트의 수평정렬
. vertical-align: 텍스트의 수직정렬 (top, middle, bottom)
. text-indent : 들여쓰기
. text-decoration : 텍스트 장식지정
. text-transform: 대소문자 변환지정
-->
<html>
<head>
<meta charset="UTF-8">
<title>글자간격</title>
<style type="text/css">
#a{line-height: normal;}
#b{line-height: 50px;}
#c{line-height: 200%;}
</style>
</head>
<body style="font-size: 12px">
<p id="a">line-height는 라인의 줄 간격을 지정하는 속성이다.<br>
속성값으로는 normal, 길이단위, 퍼센트가 사용된다.</p>
<p id="b">line-height는 라인의 줄 간격을 지정하는 속성이다.<br>
속성값으로는 normal, 길이단위, 퍼센트가 사용된다.</p>
<p id="c">line-height는 라인의 줄 간격을 지정하는 속성이다.<br>
속성값으로는 normal, 길이단위, 퍼센트가 사용된다.</p>
</body>
<title>들여쓰기</title>
<style type="text/css">
#a{text-indent: 10%;}
#b{text-indent: 30%;}
#c{text-indent: -10%; text-shadow: 2px 2px 3px yellow}
</style>
</head>
<body style="font-size: 15px">
<p id="a">단락 들여쓰기 및 내여쓰기</p>
<p id="b">단락 들여쓰기 및 내여쓰기</p>
<p id="c">단락 들여쓰기 및 내여쓰기</p>
</body>
<title>글자장식</title>
<style type="text/css">
#a{text-decoration:overline;}
#b{text-decoration:underline;}
#c{text-decoration: line-through;}
</style>
</head>
<body style="color: #0100ff; font-size: 15px; font-size: oblique; font-weight: bolder;">
<p id="a">글자장식 overline</p>
<p id="b">글자장식 underline</p>
<p id="c">글자장식 line-through</p>
<p>글자장식 overline</p>
<p>글자장식 overline</p>
<p>글자장식 overline</p>
</body>
<title>대소문자변환</title>
<style type="text/css">
p{text-transform: uppercase;}
p{text-transform: capitalize;}
p{text-transform: lowercase;}
</style>
</head>
<body>
<p>life is venture or nothing</p>
</body>