CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요
text-shadow는 글자에 그림자 효과를 주는 속성이다.
- 기본값 :
none - 상속 : Yes
- 애니메이션 : Yes
- 버전 : CSS Level 3
박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다.
문법
text-shadow: offset-x offset-y blur-radius color | none | initial | inherit
offset-x: 그림자의 수평 거리를 정한다. (필수)offset-y: 그림자의 수직 거리를 정한다. (필수)blur-radius: 흐림 정도를 정한다. (선택 : 값을 정하지 않으면 0)color: 색을 정한다. (선택 : 값을 정하지 않으면 브라우저 기본값)none: 글림자 효과를 없앤다.initial: 기본값으로 설정한다.inherit: 부모 요소의 속성값을 상속받는다.
예제 1 - 그림자 수평 거리
offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {
font-family: "Arial Black", sans-serif;
font-size: 36px;
font-weight: bold;
color: #ffffff;
}
.s1 { text-shadow: 2px 2px 2px gray; }
.s2 { text-shadow: 4px 2px 2px gray; }
.s3 { text-shadow: 6px 2px 2px gray; }
</style>
</head>
<body>
<p class="s1">Lorem ipsum dolor sit amet.</p>
<p class="s2">Lorem ipsum dolor sit amet.</p>
<p class="s3">Lorem ipsum dolor sit amet.</p>
</body>
</html>
예제 2 - 그림자 수직 거리
offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {
font-family: "Arial Black", sans-serif;
font-size: 36px;
font-weight: bold;
color: #ffffff;
}
.s1 { text-shadow: 2px 2px 2px gray; }
.s2 { text-shadow: 2px 4px 2px gray; }
.s3 { text-shadow: 2px 6px 2px gray; }
</style>
</head>
<body>
<p class="s1">Lorem ipsum dolor sit amet.</p>
<p class="s2">Lorem ipsum dolor sit amet.</p>
<p class="s3">Lorem ipsum dolor sit amet.</p>
</body>
</html>
예제 3 - 그림자 흐림 정도
blur-radius의 값을 증가시키면 그림자가 흐려진다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {
font-family: "Arial Black", sans-serif;
font-size: 36px;
font-weight: bold;
color: #ffffff;
}
.s1 { text-shadow: 2px 2px 2px gray; }
.s2 { text-shadow: 2px 2px 4px gray; }
.s3 { text-shadow: 2px 2px 6px gray; }
</style>
</head>
<body>
<p class="s1">Lorem ipsum dolor sit amet.</p>
<p class="s2">Lorem ipsum dolor sit amet.</p>
<p class="s3">Lorem ipsum dolor sit amet.</p>
</body>
</html>
예제 4 - 그림자 중첩
속성값을 쉼표로 구분하여 여러 번 쓰면 여러 개의 그림자가 생긴다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {
font-family: "Arial Black", sans-serif;
font-size: 60px;
font-weight: bold;
color: #0D47A1;
}
.s1 {
text-shadow: 4px 4px 0px #1565C0, 8px 8px 0px #42A5F5, 12px 12px 0px #E3F2FD;
}
</style>
</head>
<body>
<p class="s1">Lorem ipsum</p>
</body>
</html>
예제 5
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
margin: 0px;
}
p {
margin: 20px;
padding: 20px 0px;
text-align: center;
text-transform: uppercase;
font-family: "Arial Black", sans-serif;
font-size: 60px;
font-weight: bold;
}
.s1 {
background-color: #666666;
color: #222222;
text-shadow: 2px 2px 3px rgba(255,255,255,0.2);
}
.s2 {
background-color: #E1F5FE;
color: #ffffff;
text-shadow: 4px 4px 0px #bdbdbd;
}
.s3 {
background-color: #F44336;
color: #ffffff;
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -3px 20px rgba(255,255,255,0.4);
}
</style>
</head>
<body>
<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>
</body>
</html>
CSS / placeholder의 색, 글자 모양 등 꾸미기
placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...
버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...
justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / opacity / 요소를 투명하게 만드는 속성
개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...
CSS / list-style-type / 목록 앞의 마커 정하는 속성
목록은 <ul> 또는 <ol> 태그로 만든다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정한다. 속성값은 다음과 같다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는 게 맞지만, <ul>에 decimal을 사용하거나 ...
표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...
전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...
Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...
CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...
CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요 text-shadow는 글자에 그림자 효과를 주는 속성이다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다. 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정한다. (필수) offset-y : 그림자의 수직 거리를 정한다. (필수) blur-radius : 흐림 정도를 정한다. (선택 : ...