댓글(2) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


표헤더 표헤더 표헤더
테이블 테이블 테이블
  테이블  
  테이블  

 

<style type="text/css">

table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
margin:20px;
border:#ccc 1px solid;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:15px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;

background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table th:first-child{
text-align: left;
padding-left:20px;
}
table tr:first-child th:first-child{
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child{
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr{
text-align: center;
padding-left:20px;
}
table tr td:first-child{
text-align: left;
padding-left:20px;
border-left: 0;
}
table tr td {
padding:12px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;

background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td{
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table tr:last-child td{
border-bottom:0;
}
table tr:last-child td:first-child{
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td{
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
}
</style>

 

<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="height: 11px;"> </td>
<td style="height: 11px;"> </td>
<td style="height: 11px;"> </td>
</tr>
</tbody>
</table>

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


 

<style type="text/css">
@charset "UTF-8";
button {
  overflow: hidden;
  position: relative;
  margin: 10px;
  padding: 10px 30px;
  border: 1px solid #F85F5F;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDcwNDI4IiB5MT0iMC42MDA1ODIiIHgyPSItMC4wNzA0MjgiIHkyPSIwLjM5OTQxOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZWFlYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmI5YTlhIi8+PHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiNmODVmNWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYjlkOWQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: linear-gradient(-80deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feeaea), color-stop(25%, #fb9a9a), color-stop(85%, #f85f5f), color-stop(100%, #fb9d9d));
  background-image: -moz-linear-gradient(170deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -moz-linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-image: -webkit-linear-gradient(170deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -webkit-linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-image: linear-gradient(-80deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-repeat: repeat-x;
  font-family: "맑은 고딕";
  font-weight: bold;
  font-size: 13px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
button:active {
  background-color: #FA8181;
  background-image: none;
  -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
}
</style>
 

 

 

<p>
<button type="button"> 버튼스타일 </button>
</p>

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


PREVIEW BUTTON

 

<style type="text/css">

.button_example{
border:1px solid #a8c1d5; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -2px -2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #CEDCE7; background-image: -webkit-gradient(linear, left top, left bottom, from(#CEDCE7), to(#596a72));
 background-image: -webkit-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -moz-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -ms-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -o-linear-gradient(top, #CEDCE7, #596a72);
 background-image: linear-gradient(to bottom, #CEDCE7, #596a72);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CEDCE7, endColorstr=#596a72);
}

.button_example:hover{
 border:1px solid #8aabc5;
 background-color: #acc4d6; background-image: -webkit-gradient(linear, left top, left bottom, from(#acc4d6), to(#434f55));
 background-image: -webkit-linear-gradient(top, #acc4d6, #434f55);
 background-image: -moz-linear-gradient(top, #acc4d6, #434f55);
 background-image: -ms-linear-gradient(top, #acc4d6, #434f55);
 background-image: -o-linear-gradient(top, #acc4d6, #434f55);
 background-image: linear-gradient(to bottom, #acc4d6, #434f55);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#acc4d6, endColorstr=#434f55);
}
</style>

 

PREVIEW BUTTON

 

<p>
 <a class="button_example" href="#">BUTTON Style</a>
</p>

 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


게시판에 글을 쓰거나 홈페이지 작성시 표, 이미지 등을 삽입하는 경우 폭이 좁은 스마트폰 등에서 표나 이미지가 오른쪽 옆으로 삐죽 삐져나오는 경우가 발생합니다. 

웹페이지 자체는 가변형인데 추가적으로 작성되는 글에 삽입되는 내용이 가변형이 아니라서 정해진 크기대로 표현되는 경우입니다. 

 

물론 width 값은 100% 등 % 로 작성하면 되겠지만, 경우에 따라서는 % 를 사용할 수 없는 경우도 있겠죠? 예를 들면 가로가 600px을 넘기면 안되는 표 등... 

 

이런 경우 max-width 라는 css 속성이 준비되어 있었네요. 

아래는 max-width 를 이용해서 div 배경으로 이미지를 넣고 그 안에 다른 div 를 넣어 시화처럼 표현한 예시입니다. 

 

여기에 내용 입력

 

<div style="
   padding-top:60px;
   background-image:url('https://이미지URL/Animated-GIF-Photography14.gif');
   margin:auto;
   width:100%;
   max-width:610px;
   height:340px;
   border-radius:15px 15px 15px 15px;
">

<div style="
   background-color: #fff; 
   background-color: rgba( 255, 255, 255, 0.5 ); 
   margin: 40px ;
   border-radius:8px;
">
<p><span style="color:#000000;">여기에 내용 입력</span></p>
</div>

</div>

 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


 

자전거에 대한 생각

아하 이렇게 배경이 흐릿
글씨는 선명하게 작성 됨.

 

 

<div style="
   background-color: #fff; 
   background-color: rgba( 255, 255, 255, 0.5 ); 
   margin: 40px ; 
   border-radius:8px;
">
<p>...</p>
</div>

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


The ultimate CSS tools for web designers.


CSSmatic 홈페이지로 이동

 

웹페이지에 사용할 수 있는 재미있는 CSS 효과 4가지를 자동으로 생성해 주는 도구를 제공합니다. 

이 사이트에서 몇번의 버튼 클릭만으로 멋진 CSS 효과를 만들 수 있습니다. 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


CSS 로 오목한 모양과 볼록한 모양을 표현하는 방법입니다.

 

<div style="
  border:1px solid #222;
  box-shadow: 0 1px 1px #424440 inset, 0 -1px 0px #777 inset;
  padding: 2px 2px;
">
</div>

Arrow Down

이렇게 보여요

 

<div style="
  border:1px solid #222;
  box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #777 inset;
  padding: 2px 2px;
">
</div>

Arrow Down

이렇게 보여요

 

<div style="
  background:#ffb27d;
  border:1px solid #222;
  box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #555 inset;
  padding: 2px 2px;
">
<p>...</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 1px 1px #999 inset;
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 3px 3px #999 inset;
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 5px 5px #999 inset, 0 -5px 5px #444 inset; 
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 8px 8px #999 inset, 0 -8px 8px #444 inset; 
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 8px 8px #c8ebfa inset, 0 -10px 0px #065d82 inset;
  background: #007aae;
  border-radius: 15px;
  border: 1px solid #0e4d68;
  padding: 3px 3px;
  min-height: 1em;
  width:200px;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

댓글(1) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.

출처 http://www.cssarrowplease.com/

css_arrow.jpg

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


출처 : http://www.colorzilla.com/gradient-editor/
 

Ultimate CSS Gradient Generator

colorzilla.jpg

CSS Gradient  속성값을 간단히 만들 수 있는 웹사이트입니다. 

댓글(1) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


 !important 속성은 무엇일까요?
 

CSS[1] 는 동일한 스타일 속성이 있는 경우 아래쪽에 있는 스타일이 최종 적용됩니다. 

body { color: red; }

body { color: blue; }   Angle Double Left  파랑색이 적용 됨

 

 !important 를 적용하면 아래쪽에 동일한 스타일 속성이 있어도 변경되지 않습니다. 

body { color: red !important; }     Angle Double Left   빨강색이 적용됨 

body { color: blue; } 

!important 는 적용된 부분의 스타일이 중요해서 변경하지 않도록 브라우저에게 알려줍니다. 
또한 함께 작업하는 웹디자이너가 있다면 해당 부분의 스타일이 중요하다는 것을 알려주기도 합니다. 

Footnotes

  1. ^ CSS : Cascading Style Sheets
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


목록
Board Pagination Prev 1 Next
/ 1
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...