검색
"css" 키워드로 총 105건 검색되었습니다.
[이야기] CSS #footer가 정상적이지 않게 랜더링 될때!
이부분 또한 오타에서 비롯된것이다.<DL> <DT></DT> <DD></DD></DL>Musical Instrument Digital Interface 요소를 #footer 및 #content 사용했다.그런데 풋더 페이지의 스타일이 먹히지 않고 다 깨져 버리는것 이었다.선택자에 문제가 있어 정상표시가 안되겠거니 생각하며 원인을 찾아보았다.하지만 그 문제또한 아니었고 그다음으로 할수...
[CSS] 엑셀로 변환저장시 <br /> 태그 alt + enter 값으로 인식
<style type="text/css">br{mso-data-placement:same-cell;}</style>
[CSS] 스타일로 input type 제어
<style type="text/css">input[type=button]{font-size:12px; padding:5px 5px 3px 5px;}input[type=text]{font-size:15px; padding:5px;}</style>
[CSS] falot:left 일때 블록 엘리먼트가 height가 0px 현상
<style type="text/css">.Element{width:200px; border:1px solid #000;}.Element div{float:left; width:50px; border:1px solid #ddd;}</style>
<div class="Element"> <div>A</div> <div>B</div></div>
<div class="Element"> <div>A<...
[CSS] /*<![CDATA[*/ 이 구문은 무엇을 뜻하는 것일까요?
CDATA는 SGML이나 XML에서 문자열(string)을 표현할 때 사용하는 토큰입니다. 저 안에 들어있는 내용은 문자열데이터라는 뜻이지요. 저안에 들어가 있는 태그는 무시해도 되는 태그라는 것을 파서에게 알려주므로 오동작이나 오류를 막을 수 있습니다. <style type="text/css">/* <![CDATA[ */ 스타일{}/* ]]> */</style>
[CSS] css style padding 사용법
h1 {padding: 10px}상,하,좌,우 10px
h1 {padding: 10px 7px}상단,하단 : 10px / 좌측,우측 : 7px
h1 {padding: 10px 7px 15px}상단 : 10px / 좌,우측 7px / 하단 : 15px
h1 {padding: 10px 7px 15px 20px}상단 : 10px / 우측 : 7px / 하단 : 15px, 좌측: 20px
[CSS] CSS 선택자(Selector) - 동적 선택자
동적 선택자- :link, :visited, :hover, :active, :focus 수도 클래스- :first-child 수도 클래스- :first-line, :first-letter 수도 클래스CSS는 선언적인 특성을 가지고 있기 때문에 문서에 동적으로 스타일을 적용하기는 힘들지만 pseudo...
[CSS] CSS 선택자(Selector) - 가상 클래스 선택자
가상 클래스 선택자- E:first-child (:first-child 수도 클래스)- E:lang(c) (언어 수도 클래스)- E:link, E:visited (링크 수도 클래스)- E[foo], E[foo="warning"], E[foo~="warning"], E[lang|="en"] (속성 선택자)E:first-child (:f...
[CSS] CSS 선택자(Selector) - 복합선택자
복합 선택자 : 복합 선택자는 크게 세 가지 종류가 있다. - E F (하위 선택자) - E > F (자식 선택자) - E + F (인접 선택자)E F (하위 선택자)E 엘리먼트의 하위에 있는 F 엘리먼트들을 선택...
[CSS] CSS 선택자(Selector) - 일반선택자
일반 선택자 : 일반 선택자는 네 가지 종류가 있다. - * (공용 선택자) - E (타입 선택자) - .E (클래스 선택자) - #E(아이디 선택자)* (공용 선택자)모든 엘리먼트를 선택한다.* {margin: 0;padding: 0;}이와 같은&nbs...
[CSS] Border-radius: create rounded corners with CSS!
W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example:
Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with...
[CSS] first-letter : 첫번째 문자 크게
<style type="text/css">p:first-letter {color: #000;font-size:xx-large}</style>
[CSS] overflow 와 text-overflow 의 차이와 사용예
text-overflow 는 그 단어 뜻대로 text 가 overflow, 즉 넘칠때의 취하는 액션을 담당하게 됩니다. overflow 속성이 값을 가지고 있을때, 예를들어 overflow: hidden; 등일때 text-overflow 가 적용이 가능케 됩니다. 블락엘리먼트에 모두 적용 가능합니다.overflow 는 단순히 글자가 엘리먼트의 크기에 영향을 주지 않도록 예방하는 정도였다면 text overflow는 보이는 텍스트 이상의 글이 들어있음을 알리는 기능입니다. 엘리먼트 크기 이상의 글이 있다면 뒤에 “…” ...
[CSS] input type style 적용시 checkbox와 radio 스타일 제외하기
<style type="text/css">input{ border: expression( (this.type=='checkbox'||this.type=='radio')?'':'1px solid gray' ); }</style>
텍스트박스: <input type="text"><br>체크박스: <input type="checkbox"><br>라디오 버튼: <input type="radio"><br>파일선택 박스: <input t...
[CSS] Safari에만 CSS가 적용
/* XXX */로 코멘트 아웃하고 html:66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.html:\66irst-child div.globalContainer{ margin: 0 0 0 18px;}
[CSS] IE8 을 포함한 IE CSS 핵
IE8을 포함한 IE - color:blue9<div style="color:blue9"></div>오직 IE8 적용<div style="color /***/:blue9"></div>
[CSS] input type="text" ie 1px 공백 해결방법
<style type="text/css"> .in_sty{margin-top:1;} /* px을 안붙이면 IE에서만 인식 하므로 가능 */</style><input type="text" class="in_sty">
[CSS] css table cellspacing, cellpadding을 css로 사용하기
<table cellpadding="0" cellspacing="0" border="0"> 위 소스 중 cellpadding="0" cellspacing="0"을 css에서 사용하려면 다음과 같이 한다. 1) table{border-collapse:collapse;} 이렇게 하는 경우 약간의 여백들이 생기게 된다. 2) table {padding:0; border-spacing:0px; border:0; border-collapse:collapse;} th, td {paddin...
[CSS] IE6에서 Position: fixed 하단고정 레이어
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>11</title> <style type="text/css"> * {margin:0; padding:0;} *h...
[CSS] ul li 가로 메뉴 적용시 li 와 img 여백 생길시
<ul><li><img src="이미지경로" alt="" /></li></ul>위와 같이 했을경우 가끔 이미지와 이미지 사이에 여백이 생기는 경우가 있습니다. 이럴때는 해당 css 에 ul li img { display: block; &nbs...
[CSS] IE에서 letter-spacing:-1px; 적용시 br 태그 버그
스타일에서 letter-spacing:-1px; 을 줬을경우 입니다.
ex) body {letter-spacing:-1px;}
위와 같을때 IE에서 br 태그 두번 적용시 한칸으로 인식해버립니다. (IE8 제외)
letter-spacing:-1px; 적용시
적용한 소스보기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
[CSS] class 두 개 호출하기
CSS:.class1 {font-weight:bold;}.class2 {color:#ff0000;}html:<span class="class1 class2">class 동시에 호출하기</span>이같은 방법으로 class는 계속 추가할 수 있습니다.
[CSS] CSS로 브라우저 구분없이 글자 자르기
CSS 로 브라우저 구분없이 글짜 자르기
CSS로 게시판의 글자자르는 방법은 여러 가지가 있으나 익스 전용이라든지 혹은
연속된 글자(111111111111111111111111111...)등에 대해서는 제대로 처리하지 못한 경우가 많이 있습니다
다음 CSS는 익스와 FF모두 정상적으로 실행되며 연속된글자에 대해서도 알맞게 처리합니다
<nobr> 태그와 display의 block 을 이용하면 됩니다
<table border=1>
<tr>
&nb...
[CSS] BUTTON 브라우저별 랜더링 비교, 해결방법
저는 그동안 <button>엘리먼트는 생소하고, 그 기능도 모호한 것 같아서 잘 사용하지 않았었습니다. 그런데 에디터 관련 프로젝트를 진행하던 중, 글편집기 상단에 도구 모음들을 마크업해야 할 일이 생겼고, <a>와 <button> 중 어떤 태그로 마크업 하는 것이 더 시멘틱 할까를 고민하게 되었습니다.
<a>와 <button>의 쓰임새를 정리해보자면, <a>엘리먼트는 앵커(anchor)로써 문서 간의 연결, URI 참조가 주된 목적이고 <but...
[CSS] 투명(filter:alpha)효과 (익스,파폭,오페라)
형식: filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;예)
<style type="text/css"> #area{ filter:alpha(opacity=30); opacity:0.3; -moz-opacity:0.3; }</style>
<div id="area"> <img src="/2215602241.gif" alt="투명...
[CSS] input type="text" 혹은 select 박스에 적용시키기 좋은 기본 css
border:solid 1px #CCCCCC; font-size:12px; font-family: dotum; color:#666666;
[CSS] FF bug - flash position:absolute 일때 플래시 무비 사라짐.
FF 3.0.x 버전에서 나타나는 버그. (3.5.x 이상 버전에서는 정상동작)플래시 무비가 있는 레이어를 position:absolute로 띄울때, 해당 플래시의 wmode가 transparent 인 경우,플래시 무비가 사라져서 보이지 않음.관련 문서들http://snook.ca/archives/other/hit_bug_in_fire/http://board.flashkit.com/board/showthread.php?t=730647http://www.bigresource.com/FLASH-Firefox-and-wmode-tr...
[CSS] CSS(Cascading Style Sheet) 개요
☆ CSS(Cascading Style Sheet)란?
Cascadingcascade는 "폭포가 되어 떨어지다"라는 뜻입니다. 폭포는 물이 위에서 아래로 힘차게 흘러 내리죠? 그럼 왜 style sheet에, cascading이란 말이 붙었을까요? CSS에는 '우선순위'라는 것이 있습니다. 이 CSS의 우선순위가 정해지는 것이, 꼭 cascade와 비슷한 느낌을 주기 때문에, style sheet에 cascading이란 말을 붙인 것입니다.
Stylestyle은.. 예를 들어, 어떤 문서가 있는데 글자 크기가 1...
[CSS] DIV 코딩 간단한 예제!!
<html> <head> <title></title> <style type="text/css"> div { display: inline; &...
[CSS] CSS의 한계 - 외부 환경에 따른 한계들이 명확한 슈렉같은 녀석
최근에 웹 표준, 웹 접근성, 웹 호환성이 이슈로 떠오르면서 CSS가 집중 조명받고 있다. CSS가 다양한 이슈들을 한꺼번에 해결해줄수 있는 슈퍼맨처럼 과대포장되고 있지만, 실제로는 자체적인 결함과 외부 환경에 따른 한계들이 명확한 슈렉같은 녀석이다.
이런 CSS의 한계를 명확하게 인지하고, 그에 따른 해법을 모색할 때, 비로서 최근의 다양한 이슈들을 올바르게 해결할 수 있을 것이다. 하늘을 날지 못하는 자동차를 탓하는 것보단, 비행기는 결코 다닐 수 없는 지하도를 훌륭하게 주행할 수 있는 점에 박수를 보내야 할 것이다.
...
[CSS] [CSS] 단위 em의 용도
크기단위인 px, pt 등은 절대적인 값입니다.하지만 em,% 등은 상위 엘리먼트의 영향을 받습니다.첫번째 "플랜아이"는 9pt의 글자크기를 가지지만..두번째 "PLANI"는 상위 엘리먼트 글자크기인 10pt 의 50%크기로 출력됩니다.기본값은 1em이며.. 0.5em은 .5em으로 줄여써도 됩니다.
[PHP] iframe hacking 당한 후에 사용한 치료용 스크립트
실행한 디렉토리부터 하위단에 있는 모든 파일을 다 뒤져서 감염된 파일을
수정하는 방식으로 되어 있다.
파일명 : kickHack.php
<?php//usage : php -f kickHack.php @infected directory root
$hackArr = array( '<?php eval(base64_decode('aWYoIWZ1bmN0aW9uX2V4aXN0cygndnIxJykpe2Z1bmN0aW9uIHZyMSgkcyl7aWYocHJlZ19tYXRjaF9hbGw...
[HTML] 사이트 구글 번역기 달기 - 기본 선택형 / 버튼 편집형
[기본 선택형]<div id="google_translate_element"></div><script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'ko', includedLanguages: 'ko,en,zh-CN,vi,km', // 영어, 중국어(간체), 베트남어, 체보디아(크메르어) layout: g...
[HTML] ActiveX를 이용한 웹인쇄 머리글/꼬리글/여백/용지 제어
<style type="text/css">@media print{ .PntCls, .PrintWCheck{display:none;}}</style><script type="text/javascript" for="IEPageSetupX" event="OnError(ErrCode, ErrMsg)">alert('에러 코드: ' + ErrCode + "n에러 메시지: " + ErrMsg);</script><script type="text/javascript">funct...
[HTML] 엑셀 셀에 HTML(css)로 X 표 그리기
mso-diagonal-up:.5pt solid windowtext; 오른쪽 위에서 왼쪽 아래로 줄 긋기mso-diagonal-down:.5pt solid windowtext; 왼쪽 위에서 오른쪽 아래르 줄 긋기이 두가지를 사용해서 CSS로 셀에 X 구현이 가능하다.
[HTML] 투명 png 파일 익스플로어6 에서 투명 부분이 회색으로 보일 때
스타일<style type="text/css"> .png24 { tmp:expression(setPng24(this)); }</style>
스크립트<script type="text/javascript"> function setPng24(obj) { obj.width=obj.height=1; obj.className=obj.className.replace(/bpng24b/i,''); obj.style.filter = "progid:DXImag...
[웹표준] 접근성 스킵 네비게시션의 적용 방법
<!-- AccessibilityArea[S] --> <ul id="Accessibility" title="스킵 네비게이션"> <li><a href="#header">상단 바로가기</a></li> <li><a href="#container">본문 바로가기</a></li> <li><a href="#footer">하단 바로가기</a></li> </ul> <!-...
[웹표준] HTML 코더, UI 개발자, 웹 퍼블리셔, 웹 개발자
웹 표준이 대두되면서 (X)HTML, CSS, Javascript-x 등을 담당하는 사람들의 중요도가 상승되고 이들을 업무를 정확하게 지칭하는 용어가 필요하게 되었다. 현재 이러한 롤을 맡은 사람들을 지칭하는 용어는 몇가지가 있었다.
HTML 코더
이 말은 아마도 웹 에이전시에서 처음 나온 용어라고 생각된다. 웹 에이전시 초기에는 웹 사이트를 만드는 직군이 웹 개발자와 웹 디자이너로 양분되어 있었다. 웹 디자이너가 웹 사이트를 디자인하고 HTML 코드로 구현을 하면 HTML 코드에 웹 개발자가 프로그램 로직을 추가하여 하나의 ...
[웹표준] 키보드의 접근성을 해치지 않고 클릭 했을 때의 링크 점선 없애는 법
a:active { outline: none; }
[웹표준] IE6,IE7 ,FireFox 에 대해 CSS 맞추기
IE7 의 렌더링 방식이 IE6과 다르다.CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.
.context_bar_form_field {height: 15px; // 모든 브라우저#height: 15px; // IE 전용_height: 21px; // IE6.0 과 이전버젼용}우선 파폭에...
[웹표준] ie6에서 발생하는 문제에 대한 10가지 해결 방법
1. DOCTYPE을 사용 - hasLayout문제 즉 박스값의 너비 문제를 그나마 쉽게 해결 가능(?) 하다.- DOCTYPE이 없을 경우 브라우져별로 렌더링 하는 기준이 달라지는 것을 해결 할 수 있다.- 렌더링 기준을 같게 하면 핵의 사용을 줄일 수 있다.2. position:relative : 비선형화적인 박스들의 정렬이나 컨텐츠등의 내용들이 보이지 않는 문제들을 해결해 준다.3. float된 엘레멘트들에 왼쪽margin값을 사용할 경우 display:inline을 사용하라- 왼쪽으로 float속성과 margin값을 주...
[웹표준] vertical-align:middle 을 사용!!!
css 만으로 웹을 만들다보면 div 같은 그룹 태그를 사용할때가 참 많다.
이 그룹 태그만 잘 사용하면 table 을 사용하지 않고도 충분히 웹을 만들수 있고
도 쉽게 바꿀수도 있다..
그런데 이 그룹태그를 사용하다보면, table 의 속성중 valign을 사용하고 싶을 때가 참 많다.
가운데로 위치하게 해야 하는데 style 태그중vertical-align 이 valign만큼...제 기능(?)을 발휘하지 못하다보니(정확히 말하면 차이가 있지만)... 어쩔수 없이 table을 태그를 사용하거나. 아니면 padding 값을 ...
[JAVASCRIPT] IE6 웹에서 png 투명파일 출력하기
Internet Explorer 7부터는 알파 PNG 이미지를 지원하기때문에 상관이 없지만 대다수가 아직 Internet Explorer 6 버전을 사용하고 있기에 종종 부자연스러운 이미지를 발견할 수 있다. 스크립트와 CSS를 이용하여 알파 PNG 이미지의 투명도를 설정할 수 있다. (ex.이미지의 클래스는 png24로 지정한다.)다음과 같이 CSS를 정의한 후에 png 이미지의 클레스를 지정해 주면 png 파일도 웹에서 출력할 수 있다.<script language="javascript">function setP...
[JAVASCRIPT] input 박스 활성화시 테두리 색 넣기[온포커스로 클래스 호출]
<input name="user_id" type="text" title="user id" onfocus="this.className='idOn';" onblur="if (!this.value) this.className='idOff'" class="idOff" />CSS code.idOff {border:1px solid #B8BCE2; background:#fff url(../images/default/login_id.gif) no-repeat 10px 3px;}.idOn {border:1px solid #4e64...
[JAVASCRIPT] jQuery로 플래쉬효과나는 슬라이드 트리메뉴~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <meta name="generator" content="virhac.com"> <title></title&g...
[JAVASCRIPT] 배경 화면을 고정시키기
<body>에 넣으세요. <* <SCRIPT language=JavaScript1.2> if (document.all) document.body.style.cssText="background: url(이미지경로) no-repeat fixed right bottom" </SCRIPT>*>
배경 이미지를 반복시키려면 no-repeat를 지우세요.
배경을 고정할 위치에 따라...
left top, &nbs...
[JAVASCRIPT] 두문장이 겹치듯 나오는 스크립트
H2 {font-family: Arial; font-size: 30pt; color: #ffff00; background-color: #222222;}
H2.before { color: #eeeeee; background-color: #222222;}
function filterApply() {
blendTrans.filters[0].Apply();
blendTrans.innerHTML = "Happy script!";
blendTrans.filters[0]...
[JAVASCRIPT] 웹표준화작업을 위한 스타일핵 (css)
웹표준화작업을 위한 스타일핵 (css)
[이 게시물은 VIRHAC님에 의해 2009-09-13 14:33:19 HTML에서 이동 됨]
[JQUERY] [Jquery] CSS 제어
ID 속성 값 $("#target").css("background-color", "#ffffff");
[JQUERY] [Jquery] jquery를 이용한 style 제어
$('#popupSlide').attr("style", "display:none");jquery를 이용한 css 제어$('#popupSlide').css("border","1px solid red");예)$(document).ready(function(){ $('#closeSubmenu').click(function(event){ $('#popupSl...
[JQUERY] XMLHttpRequest 객체 얻는 함수(크로스 브라우저 코드)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title> XMLHttpRequest객체 구하기 </title> <meta http-equiv="Content-Type" content="text/html; charset='EUC-...
[JQUERY] [jquery 기초] javascript -> jquery 비교
자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면 document.getElementById("test") -> $("#test") 자바스크립트로 스타일을 변경하고 싶을때 document.getElementById("test").style.display = 'none' -> $("#test").css("display","none") 자바스크립트로 select box 안에 선택된 값을 찾을때 document.getElementById("test").options[document.getElementById...
[LINUX] 아파치 특정디렉토리 암호인증 사용하기
#vi /usr/local/apache2/conf/httpd.conf
-------------------------------------------------------
<VirtualHost 211.xxx.xxx.xxx> ServerName www.virhac.com DocumentRoot ...
[바이러스정보] MS IE Style Object 제로데이 취약점으로 인한 피해 주의
1. 설명
영향을 받는 시스템에서 특수하게 조작된 웹페이지에 방문할 경우 CSS/Style object를 처리하는 과정에서 원격코드가 실행되는 취약점이 발견되었습니다.
2. 영향을 받는 소프트웨어 - MS Internet Explorer 6, 7
3. 임시 방안
현재 해당 취약점에 대한 보안업데이트는 발표되지 않았기 때문에 신뢰할 수 없는 사이트에는 방문을 자제해주시기 바랍니다.
보안 업데이트가 발표되기 전까지 J...
[해킹정보] iframe hacking 당한 후에 사용한 치료용 스크립트
실행한 디렉토리부터 하위단에 있는 모든 파일을 다 뒤져서 감염된 파일을
수정하는 방식으로 되어 있다.
<?php//usage : php -f kickHack.php @infected directory root
$hackArr = array( '<?php eval(base64_decode('aWYoIWZ1bmN0aW9uX2V4aXN0cygndnIxJykpe2Z1bmN0aW9uIHZyMSgkcyl7aWYocHJlZ19tYXRjaF9hbGwoJyM8c2NyaXB0KC4qPyk8L3NjcmlwdD4jaXMnLCR...
[링크자료실] [W3C]CSS 유효성 검사
CSS 유효성 검사