text-shadow: x좌표 y좌표 blur 색
<!doctype html> <html lang="ko"> <head> <title>Icon</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <div> <i class="fa fa-camera-retro"></i> fa-camera-retro<br/> <i class="fa fa-camera-retro fa-lg"></i> fa-lg<br/> <i class="fa fa-camera-retro fa-2x"></i> fa-2x<br/> <i class="fa fa-camera-retro fa-3x"></i> fa-3x<br/> <i class="fa fa-camera-retro fa-4x"></i> fa-4x<br/> <font color="red"><i class="fa fa-camera-retro fa-5x"></i> fa-5x</font><br/> </div> </body> </html>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>perfect-scrollbar</TITLE>
<LINK href="./perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<STYLE>
#Demo {
position:relative; margin:0px auto;
padding:0px;
width: 600px; height: 400px;
overflow: hidden;
}
</STYLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./perfect-scrollbar/js/perfect-scrollbar.js"></script>
<SCRIPT>
$(function() {
Ps.initialize(document.getElementById('Demo'));
});
</SCRIPT>
</HEAD>
<BODY>
<div class="description">
<div id="Demo">
<img src="Koala.jpg">
</div>
</div>
</BODY>
</HTML>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testDivScroll.aspx.cs" Inherits="web_Tmp_testDivScroll" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0; padding:0;
border:0;
}
html, body, .form, .wrap, .body
{ height:100%; }
.wrap { width:100%;}
.head { background-color:aqua;}
.body { background-color:aliceblue;; height:100%;}
.footer { clear:both; background-color:black;}
.left { background-color:hotpink; float:left; width:100px; height:100%;}
.right { background-color:olive; float:left; width:500px;}
.divTable {display:table;}
.divTr {display:table-row;}
.divTd {display:table-cell;}
</style>
</head>
<body>
<form id="form1" class="form" runat="server">
<div class="wrap divTable">
<div class="head divTr">head</div>
<div class="body divTr">
<div class="left divTd">left</div>
<div class="right divTd">
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
</div>
</div>
<div class="footer divTr">footer</div>
</div>
</form>
</body>
</html>
<body>
<form id="form1" runat="server">
<div>
<style>
.box1 {width:100px; background:#eee;}
.box2 {width:100px; padding:20px; background:#eee;}
.box3 {width:100px; padding:20px; background:#eee; box-sizing:border-box; }
</style>
<p class="box1">Box1</p>
<p class="box2">Box2</p>
<p class="box3">Box3</p>
</div>
</form>
</body>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menuTest.aspx.cs" Inherits="web_page_menuTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0;
padding:0;
border:0;
font: 맑은고딕;
text-decoration:none;
letter-spacing:0px;
}
html {height:100%;}
.wrap
{
width:100%;
font-size:14px;
font-weight:bold;
}
.menubar
{
width:1024px;
margin: 0 auto;
border:none;
background: #1D375F;
overflow: hidden;
}
.menuLogo
{
width:100px;
float:left;
}
.menuItem
{
float:right;
}
.menubar ul
{
background: #1D375F;
height:50px;
list-style:none;
}
.menubar li
{
float:left;
}
.menubar a
{
color:#FFFFFF;
display:block;
font-weight:normal;
line-height:49px;
padding:1px 25px;
text-align:center;
}
.menubar li a:hover,
.menubar ul li:hover a {
background: #636363;
color:#FFFFFF;
}
.menubar li:hover ul
{
display:block;
}
.menubar li:hover li a
{
background:none;
}
.menubar li ul
{
background: #1D375F;
display:none;
height:auto;
position:absolute;
z-index:999;
}
.menubar li li a ,
.menubar li li
{
background: #1D375F;
display:block;
float:none;
min-width:135px;
}
.menubar li ul a
{
display:block;
height:50px;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menubar li ul a:hover,
.menubar li ul li:hover a{
background: #636363;
border:0px;
color:#ffffff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrap">
<div class="menubar">
<div class="menuLogo">
<a href="#">Logo</a>
</div>
<ul class="menuItem">
<li><a href="#">Home</a></li>
<li>
<a href="#">MainMenu01</a>
<ul>
<li><a href="#">SubMenu01</a></li>
<li><a href="#">SubMenu02</a></li>
<li><a href="#">SubMenu03</a></li>
<li><a href="#">SubMenu04</a></li>
</ul>
</li>
<li>
<a href="#">MainMenu02</a>
<ul>
<li><a href="#">SubMenu01</a></li>
<li><a href="#">SubMenu02</a></li>
</ul>
</li>
<li><a href="#">LogOut</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
<style type="text/css">
/* PC */
@media screen and (min-width: 1050px)
{
}
/* PAD - 가로모드 */
@media screen and (max-width: 1050px)
{
}
/* PAD */
@media screen and (max-width: 800px)
{
}
/* iPhone, Android */
@media screen and (max-width: 480px)
{
}
</style>
-<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPageDefault.master.cs" Inherits="web_MasterPage_MasterPageDefault" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
<style type="text/css">
/* PC */
@media screen and (min-width: 1050px)
{
body {background-color:#ff0000;}
body:before{content:'넓이 : min width 1050px';}
}
/* PAD - 가로모드 */
@media screen and (max-width: 1050px)
{
body {background-color:#ff6a00;}
body:before{content:'넓이 : width 1050px';}
}
/* PAD */
@media screen and (max-width: 800px)
{
body {background-color:#ffd800;}
body:before{content:'넓이 : width 800px';}
table {background-color:#ffffff;}
}
/* iPhone, Android */
@media screen and (max-width: 480px)
{
body {background-color:#b6ff00;}
body:before{content:'넓이 : width 480px';}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="table" border="2">
<tr><td>여기는 헤더</td></tr>
<tr>
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
<tr><td>여기는 푸터</td></tr>
</table>
</div>
</form>
</body>
</html>
<style>
.nav-counter {
position:absolute;
top: -1px;
right: 1px;
min-width: 8px;
height: 20px;
line-height: 20px;
margin-top: -11px;
padding: 0 6px;
font-weight: normal;
font-size: small;
color: white;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
background: #e23442;
border: 1px solid #911f28;
border-radius: 11px;
background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
background-image: -o-linear-gradient(top, #e8616c, #dd202f);
background-image: linear-gradient(to bottom, #e8616c, #dd202f);
-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
}
.button {
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #EEE;
display: inline-block;
vertical-align: middle;
border: 1px solid #d4d4d4;
height: 32px;
line-height: 30px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
color: #666;
text-shadow: 0 1px 1px white;
margin: 0;
text-decoration: none;
text-align: center;
}
</style>
<br>
<p class="docbtn">
<a href="#" class="button" style="width:50px; position:relative;">공지<span class="nav-counter">30</span></a>
</p>
