[ text-shadow ] ie10부터 사용
text-shadow: 글자그림자
text-shadow: 글자그림자
text-shadow: 글자그림자
[ box-shadow ]
box=shadow: 박스 그림자
box=shadow: 박스 그림자
[ overflow-x / overflow-y ] ie 9부터 사용 가능/overflow 방향 지정 가능
overflow-x
overflow-x/y는 한방향으로 지정하는 것. 5G RF중계기는 실외 기지국의 5G 전파를 받아 빌딩, 터널, 지하공간 등 전파가 닿기 어려운 실내로 증폭시켜 전파 도달 범위를 넓히는 장비다. 유선망 없이 신호를 중계하기 때문에 유선망이 국내보다 열악한 유럽에서 높은 관심을 보이는 기술이다.
overflow-y
overflow-y overflow-y overflow-y overflow-y overflow-y
[ overflow-x / overflow-y ] ie 11 부터 지원
화면에서 요소의 크기 변경
[ word-wrap ]
normal은 줄바꿈이 가능한 위치에서만 줄바꿈을 하고, 줄바꿈이 가능한 위치가 없는 경우에는 줄바꿈을 하지 않고 표현 된다.(영어는 띄어쓰기가 안되어 있어서 줄바꿈이 안됨)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
break-word은 줄바꿈이 가능한 위치가 없는 경우 필요에 따라 단어의 중간에서 줄바꿈을 한다.(영어 줄바꿈 할 때 유용)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
[ text-overflow ]
text-overflow는 텍스트가 요소(내가 지정한)안에서 표현되는 것을 말한다.
text-overflow는 텍스트가 요소(내가 지정한)안을 넘어가는 글자를 말줄임 표로 표현 한다.
[ font-size ]
기본 설정 단위입니다.
px 설정 단위입니다.
em 설정 단위입니다.
rem 설정 단위입니다.
vw 설정 단위입니다.
코드 보기 [더보기]클릭
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0227_css3_text태그</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/*[ text-shadow ] ie10부터 사용*/
.text-shadow-1{text-shadow: 2px 2px 5px red;} /* x, y, 블러효과, 색상 */
.text-shadow-2{text-shadow:-2px -2px 3px yellow;}
.text-shadow-3{text-shadow: 2px 2px 3px blue, 4px 4px 4px orange;}
/*[ box-shadow ]*/
.box-shadow-1{ width: 300px; height: 50px;
background-color: yellow; margin-bottom: 30;
}
.box-shadow-1:hover{box-shadow: 2px 2px 3px gray } /*마우스 오버하면 그림자 생김*/
.box-shadow-2{ box-shadow: 2px 2px 3px gray; width: 300px; height: 50px;
background-color: yellow; margin-bottom: 30;
box-shadow: -2px 2px 3px gray
}
/* [ overflow-x / overflow-y ] */
.overflow-x{ width:200px; height: 50px; border: 1px solid #000; margin:20px;
white-space: nowrap;/*norap:감싸지 않는다.: 글이 가로로 쭉 나오게 해줌*/
overflow-x:scroll /*가로방향으로 스크롤 생김*/
}
.overflow-y{ width:200px; height: 100px; border: 1px solid #000; margin:20px;
overflow-y:auto/*가로방향으로 스크롤 생김*/
}
.resize{ width: 200px; height: 50px; border: 1px solid #000; margin: 10px;
overflow: auto;
resize:both /*사용자가 가로/세로 변경 다 할 수 있음*/
}
/* [ word-wrap ] */
.word-wrap-1{ width: 300px; border: 1px solid #000; margin:20px;
word-wrap:normal
}
.word-wrap-2{ width: 300px; border: 1px solid #000; margin:20px;
word-wrap:break-word
}
/*[ text-overflow ] */
.clip{ width: 150px; border: 1px solid #000; margin: 20px;
white-space: nowrap;
overflow:hidden; /*지정된 영역 없어가는거 숨기도록 지정*/
text-overflow: clip; /*기본값*/
}
.ellipsis{ width: 150px; border: 1px solid #000; margin: 20px;
white-space: nowrap;
overflow:hidden; /*지정된 영역 없어가는거 숨기도록 지정*/
text-overflow: ellipsis; /*숨겨진 글자 말줄임표로 표현함*/
}
.px{font-size: 12px }
.em{font-size: 0.9em } /* 20 X 0.9=18px가 표현됨::나의 부모에게서 주어진 폰트를 상속받음*/
html{font-size: 20px } /* html태그에 폰트 지정 */
.rem{font-size: 1.5rem } /* 최상위 태그(html)에 주어진 20 X 1.5 = 지정된 */
.vw{font-size: 2.5vw} /*view pot라는 뜻, 화면의 사이즈에 따라서 폰트가 변화됨*/
</style>
</head>
<body>
<h3> [ text-shadow ] ie10부터 사용 </h3>
<div class="text-shadow-1">text-shadow: 글자그림자</div>
<div class="text-shadow-2">text-shadow: 글자그림자</div>
<div class="text-shadow-3">text-shadow: 글자그림자</div>
<h3> [ box-shadow ] </h3>
<div class="box-shadow-1">box=shadow: 박스 그림자</div>
<div class="box-shadow-2">box=shadow: 박스 그림자</div>
<h3> [ overflow-x / overflow-y ] ie 9부터 사용 가능/overflow 방향 지정 가능 </h3>
<h4>overflow-x</h4>
<div class="overflow-x">overflow-x/y는 한방향으로 지정하는 것. 5G RF중계기는 실외 기지국의 5G 전파를 받아 빌딩, 터널, 지하공간 등 전파가 닿기 어려운 실내로 증폭시켜 전파 도달 범위를 넓히는 장비다. 유선망 없이 신호를 중계하기 때문에 유선망이 국내보다 열악한 유럽에서 높은 관심을 보이는 기술이다. </div>
<h4>overflow-y</h4>
<div class="overflow-y">overflow-y overflow-y overflow-y overflow-y overflow-y </div>
<h3> [ overflow-x / overflow-y ] ie 11 부터 지원 </h3>
<div class="resize">
화면에서 요소의 크기 변경
</div>
<h3> [ word-wrap ] </h3>
<div class="word-wrap-1">
normal은 줄바꿈이 가능한 위치에서만 줄바꿈을 하고, 줄바꿈이 가능한 위치가 없는 경우에는 줄바꿈을 하지 않고 표현 된다.(영어는 띄어쓰기가 안되어 있어서 줄바꿈이 안됨)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="word-wrap-2">
break-word은 줄바꿈이 가능한 위치가 없는 경우 필요에 따라 단어의 중간에서 줄바꿈을 한다.(영어 줄바꿈 할 때 유용)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<h3> [ text-overflow ] </h3>
<div class="clip">text-overflow는 텍스트가 요소(내가 지정한)안에서 표현되는 것을 말한다.</div>
<div class="ellipsis">text-overflow는 텍스트가 요소(내가 지정한)안을 넘어가는 글자를 말줄임 표로 표현 한다.</div>
<h3> [ font-size ] </h3>
<div class="reset">기본 설정 단위입니다.</div>
<div class="px">px 설정 단위입니다.</div>
<div class="em">em 설정 단위입니다.</div>
<div class="rem">rem 설정 단위입니다.</div>
<div class="vw">vw 설정 단위입니다.</div>
</body>
</html>
