contextmenu="return false" 우클릭 방지
ondragstart="return false" 드래그 방지
onselectstart="return false" 선택 방지
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
| [HTML] <input> 태그의 type 속성 (0) | 2017.11.27 |
|---|---|
| [HTML] <span> 태그 (0) | 2017.11.27 |
| [HTML] <p>와 <br> 태그 (0) | 2017.11.27 |
| [HTML] <div> 태그 (0) | 2017.11.27 |
| [HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기 (0) | 2017.11.27 |
위 아래 자간 설정은
line-height: 10px;
좌 우 자간 설정은
letter-spacing: 10px;
소숫점 단위까지 설정이 가능하며 눈에 뛰는 단위는 0.1 단위까지다.
| [CSS] 구글 웹폰트 사용하기 (0) | 2017.11.27 |
|---|---|
| [CSS] width에 padding과 margin을 포함시키기 (0) | 2017.11.27 |
| [CSS] @font-face 사용하기 (0) | 2017.11.27 |
| [CSS] 슬라이드하기 (0) | 2017.11.27 |
| [CSS] 위에서 아래로 그라데이션 주기 (0) | 2017.11.27 |
@font-face{
font-family: "font_name";
src: local("?"), url("/font/font_name.woff") format("woff");
}
font-family는 html, body 같은 곳에서 사용될 폰트명을 지정해주는 것이다.
src의 경우는 local() 일 경우 local에서 현재 사용중인 폰트가 있는지 체크해주는 역할, 없을 경우
url로 넘어가 서버에 올라가 있는 폰트를 가져온다. format은 폰트의 글꼴 형식을 설정해주는 곳이다.
만약 다른 서버의 폰트를 사용하고 싶다면
url("http://font_server/font/fint_name.woff") 이런 형식으로 사용하면 되지만
서버에서 외부에서 자원을 사용하게 설정을 안하면 오류가 난다.
Host 설정 부분에
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
을 추가해주면 오류를 해결할수 있다.
| [CSS] 구글 웹폰트 사용하기 (0) | 2017.11.27 |
|---|---|
| [CSS] width에 padding과 margin을 포함시키기 (0) | 2017.11.27 |
| [CSS] 자간 설정 (0) | 2017.11.27 |
| [CSS] 슬라이드하기 (0) | 2017.11.27 |
| [CSS] 위에서 아래로 그라데이션 주기 (0) | 2017.11.27 |
이미지가 3개 기준
HTML
<div id="main_slide">
<div class="wrap">
<div id="slider">
<div>
<img src="">
<img src="">
<img src="">
</div>
</div>
</div>
</div>
CSS
@keyframes slidy {
0% { left: 0px; }
20% { left: 0px; }
30% { left: -100%; }
50% { left: -100%; }
60% { left: -200%; }
80% { left: -200%; }
100% { left: 0px; }
}
#main_slide {width: 100%;}
#main_slide > div.wrap > div#slider {overflow: hidden; position: relative;}
div#slider > div > img {width: 33.333333333333333333333333%; float: left;}
div#slider > div {
position: relative;
width: 300%;
margin: 0;
top:0;
left: 0;
text-align: left;
font-size: 0;
-webkit-animation: 20s slidy ease-in-out infinite;
animation: 20s slidy ease-in-out infinite;
}
| [CSS] 구글 웹폰트 사용하기 (0) | 2017.11.27 |
|---|---|
| [CSS] width에 padding과 margin을 포함시키기 (0) | 2017.11.27 |
| [CSS] 자간 설정 (0) | 2017.11.27 |
| [CSS] @font-face 사용하기 (0) | 2017.11.27 |
| [CSS] 위에서 아래로 그라데이션 주기 (0) | 2017.11.27 |
테이블 작업을 했을때 상단은 위아래로 스크롤 할 때는 고정시키고 좌우로만 움직이게 하고 싶을 때가 있다.
HTML
//상단에 고정시킬 div
<div id="scroll_div_1">
<table>
....
</table>
</div>
//내용
<div id="scroll_div_2" onScroll="syncScroll()">
<table>
Contents
</table>
</div>
JS
function syncScroll(){
var oFrame1, oFrame2;
oFrame1 = document.getElementById('scroll_div_1');
oFrame2 = document.getElementById('scroll_div_2');
oFrame1.scrollLeft = oFrame2.scrollLeft;
}
| [HTML] <input> 태그의 type 속성 (0) | 2017.11.27 |
|---|---|
| [HTML] <span> 태그 (0) | 2017.11.27 |
| [HTML] <p>와 <br> 태그 (0) | 2017.11.27 |
| [HTML] <div> 태그 (0) | 2017.11.27 |
| [HTML] 오른쪽 클릭, 드래그, 선택 방지 (1) | 2017.11.27 |
.nav{
height: 100px;
/* Old browsers */
background: #3a9dce !important;
/* FF3.6-15 */
background: -moz-linear-gradient(top, #3a9dce 3%, #246585 100%) !important;
/* Chrome10-25,Safari5.1-6 */
background: -webkit-linear-gradient(top, #3a9dce 3%,#246585 100%) !important;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: linear-gradient(to bottom, #3a9dce 3%,#246585 100%) !important;
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9dce', endColorstr='#246585',GradientType=0 ) !important;
}
| [CSS] 구글 웹폰트 사용하기 (0) | 2017.11.27 |
|---|---|
| [CSS] width에 padding과 margin을 포함시키기 (0) | 2017.11.27 |
| [CSS] 자간 설정 (0) | 2017.11.27 |
| [CSS] @font-face 사용하기 (0) | 2017.11.27 |
| [CSS] 슬라이드하기 (0) | 2017.11.27 |