끄적대기

글

라벨이 CSS인 게시물 표시

[CSS] dimmed 왼쪽에 1px 라인이 보일때

- 증상 & ::before { @include absolute-full ; z-index : 5 ; height : 100% ; background-color : rgba ( 0 , 0 , 0 , .5 ); content : '' ; } - 해결 ::before는 삭제 하고 해당 엘리먼트에 filter로 추가 filter : brightness ( 50% ); 원인은 아직도 모르겠음...=ㅁ=);

자세한 내용 보기

[CSS] 모바일 모드 :hover 대응

마우스의 hover가 모바일 모드에서는 터치로 인해 적용되서 남는 현상 https://url.kr/dxjguw See the Pen css hover with media query by ykwan0714 ( @ykwan0714 ) on CodePen .

자세한 내용 보기

[CSS] 말줄임

- 한줄 overflow:hidden;width:100px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal; - 두줄 overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;line-height:14px;max-height:28px; 외우기는 귀찮...

자세한 내용 보기

[CSS] CSS 단위별로 수치 확인

https://codepen.io/netsi1964/full/NyzmeQ

자세한 내용 보기

[jQuery] 디자인 셀렉트 박스 & CSS

<style type="text/css"> .eventWrap div.inNumber{margin-bottom:30px;} .eventWrap div.inNumber:after{content:'';display:block;clear:both;} .eventWrap div.inNumber input{float:left;width:616px;height:73px;line-height:73px;margin-right:20px;padding:0;border:1px solid #cfcfcf;background:#f2f2f2;text-align:center;color:#444343;font-size:24px;} .eventWrap div.inNumber div.selectbox {float:left;position: relative;width: 277px;height:73px;line-height:73px;border: 1px solid #cfcfcf;background:#fbfbfb url('./images/sel_off.gif') no-repeat 219px 50%;;z-index: 1;font-size:24px;} .eventWrap div.inNumber div.selectbox label{position: absolute; top: 1px;left: 30px;width:243px;height:73px;line-height:73px; color: #999;z-index: -1;} .eventWrap div.inNumber div.selectbox select {width: 100%;height:73px;line-height:73px;font-family: inherit;border: 0;opacity: 0;filter:alpha(opacity=0);-webkit-appearance: none;-moz-appearance: none;appearance: none;} .eventWrap ...

자세한 내용 보기

[HTML] input file

1. input file <style type="text/css"> .eventWrap .inputFile{padding:23px 0 14px 227px;} .eventWrap .inputFile:after{content:'';display:block;clear:both;} .eventWrap .inputFile .file_input_textbox{float: left;width:405px;height:55px;line-height:55px;border:1px solid #ababab;border-width:1px 0 1px 1px;background:#f1f1f1;font-size:16px;} .eventWrap .inputFile .file_input_div{position: relative; width: 140px; height: 57px; overflow: hidden;text-align:left;} .eventWrap .inputFile .file_input_button{width: 140px;height:57px; position: absolute; top: 0px; background:url('./images/btn_file_search.gif') no-repeat 0 0; color:#fff;text-indent:-9999px;border:none;} .eventWrap .inputFile .file_input_div .file_input_hidden{width:546px;height:57px; font-size: 23px; position: absolute; right: 0px; top: 0px; opacity: 0;filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacit...

자세한 내용 보기

[CSS] 스킵네비게이션

1. 스킵네비게이션은 <body>다음으로 나오는 것이 가장 적절합니다. 2. 본문으로 가는 기능만 제공하고 다른 건너띄기 컨텐츠에 대한 건너띄기는 제공하지 않도록 합니다. 3. 아래 코드는 일반적으로 사용하는 스킵네비를 약간 수정한 것입니다.(개취) 4. 크롬을 위한 tabindex를 추가 하였습니다. <style type="text/css"> /* Skip Nav */ #skipNav{position:relative;z-index:9999;} #skipNav a{display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:20px; color:#fff; font-weight:bold; background:#2466a6; white-space:nowrap;text-align:center;} #skipNav a:focus, #skipNav a:active{height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;} </style> </head> <body> <div id="skipNav"><a href="#contents">Skip to the menu / 본문가기</a></div> <ul> <li><a href="#">매뉴1</a></li> <li><a href="#">매뉴2</a></li> <li><a href="#">매뉴3</a></li> </ul> <div id=...

자세한 내용 보기

[CSS] inline-block / text-indent : ie Bug

분명히 ir기법으로 많이 써봤던 것 같은데 난 이 버그를 왜 이제야 보게 되었지? 지금까지 수많은 작업을 해왔는데 이렇게 안써봤을리도 없을텐데 말이야... 상황은 간단했다. 버튼 이미지를 가운데 정렬시키고 :hover를 하기 위해서 배경이미지로 넣었는데... CSS는 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ display:inline-block; text-indent:-9999px; background:#url() no-repeat 0 0; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 그런데 ie에서 text-indent 이녀석이 배경이미지 까지 날려버리네...ㅎ 해결 방법으로는 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ display:inline-block; /*text-indent:-9999px;*/ line-height:-9999px; vertical-align:bottom; background:#url() no-repeat 0 0; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 위의 방법이 안될경우에 아래의 방법을 사용 이 방법이 젤로 좋은 듯... font-size:0; line-height:0; text-shadow:none; color:transparent; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 아...찜찜해...별로 좋은 방법도 아닌것 같다. 단순하게 생각하면 그냥 이런 상황을 만들지말자.

자세한 내용 보기

[html] 모바일웹 작업 팁 정리중...

1. 가로/세로 전환시 폰트 고정 -webkit-text-size-adjust:none; viewport에서 maximum-scale가 있어야 하고 값이 1.0일때만 반응. 2. viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> 3. 상단 url바 숨기기 <script type="text/javascript"> window.addEventListener("load",function(){ setTimeout(scrollTo,0,0,1); },false); </script> 4. 전화번호 기능 <a href="tel:000-0000-0000">전화걸기</a> <a href="sms:000-0000-0000">문자보내기</a> <a href="sms:">문자보내기 실행</a> 5. 키보드 호출 <input type="text" /> <input type="search" /> <input type="tel" /> <input type="url" /> <input type="email" /> <input type="time" /> <input type="number" /> <input type="datetime"...

자세한 내용 보기

[CSS] table border

<table>에 <th>나 <td>에 border을 줄때 겹쳐지는 부분을 하나로 합쳐주는 css border-collapse:collapse; <table>에 사용하던 cellspacing="0" 역활을 한다. 스펠링을 자꾸 까먹어서 적어봄.

자세한 내용 보기

[ie] ie6 display:block Bug

list 태그를 사용할 때 a에 배경효과를 주기 위해서 아래와 같은 코드를 많이 사용하지요. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin:0;padding:0;} ul li a{display:block;border:1px solid red;} </style> </head> <body> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 1</a></li> ...

자세한 내용 보기

[CSS] Opacity

{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */ opacity: .5; } -ms- <--이부분이 ie8버전때문에 새로 추가됨. 원문 - CDK http://forum.standardmag.org/viewtopic.php?id=2749

자세한 내용 보기

[CSS] vertical-align

Vertical-align : 텍스트를 수직 정렬 할때 사용합니다. 과거 테이블로 레아아웃을 만들때 사용했던 valign의 CSS버전 이라고 생각하시면 됩니다. 보통 많이 쓰이는 형태는 텍스트와 이미지를 수평으로 맞추거나 컨텐츠를 수직정렬할때 사용하죠 윗첨자나 아래첨자를 하고 싶을때도 사용하기도 하나 <sub>, <sup>태그들이 존재하기 때문에 이부분을 사용하실때는 역시 상황에 맞는 사용을...

자세한 내용 보기

[CSS] CSS RollOver : Background

<ul id="menu_area"> <li><a href="#">이미지</a></li> </ul> <style type="text/css"> #menu_area{margin:10px 0 0 40px;} #menu_area li a{display:block;width:50px;height:19px;background:url('off_img_경로') no-repeat left top;text-indent:-1000px;} #menu_area li a:hover{background:url('on_img_경로') no-repeat left top;} </style>

자세한 내용 보기

[CSS] CSS RollOver

이 방법은 접근성에 맞지 않다는 말이 많다. 그러니 가급적으로는 프로젝트에 사용하지 않는 것이 좋으나 롤오버에 대한 이해나 접근성에 초점을 맞히지 않은 사이트나 급할때 사용하길 바란다. 우리나라의 모든 사이트가 다 양질의 사이트가 되기를 원하나 실정은...너무나 힘들기만 하니...ㅠ_ㅠ); 스크립트를 잘 이용하거나 텍스트기반에 맞는 롤오버효과를 사용하는것이 접근성에 더 효과적이라고 생각된다. <style type="text/css"> a.rollover img {display:inline; } a.rollover img.over { display:none; } //hover시에 보여줄 이미지를 처음에 감춰 둡니다. a.rollover:hover img { display:none; } //hover시에 해당 경로의 모든 이미지를 감춥니다. a.rollover:hover img.over { display:inline; } //hover로 보여줄 이미지는 보여줍니다. </style> <a href="test" class="rollover"> <img src="경로" alt="" /> <img src="" alt="" class="over" /> // 이부분이 이미지가 두번이 중복됨으로 접근성이 떨어집니다.ㅠㅠ </a>

자세한 내용 보기

[CSS] 세로중앙정렬

Table은 자체로 valign속성으로 세로중앙정렬을 가능하게 하지만 현제 레이아웃 기법으로 많이 쓰이는 div는 세로로 중앙정렬 시키기가 참으로 난감하다. 1. 스크립트로 세로 중앙 정렬 시킨다. <script type="text/javascript"> objs = document.getElementsByTagName('DIV'); for (var i = 0 ; i < objs.length ; i++ ) { if (objs[i].className == "vAlign") objs[i].style.marginTop = Math.floor(parseInt(objs[i].parentNode.offsetHeight - objs[i].offsetHeight) / 2)+"px"; } } window.onload = vAlign; </script> <style type="text/css"> div.box{height:300px;} </style> <div class="box"> <div class="vAlign">세로중앙정렬</div> </div> 스크립트가 알아서 계산해주기 때문에 편하다~>ㅁ<~ 2. CSS를 활용한다. <style type="text/css"> div.box{height:100px;position:relative;} ul.vertical{position:absolute;top:50%;margin-top:-20px;} ul.vertical li{height:30px;} </style> <div class="box"> <ul class="vertical"> <li>세로중앙정렬</li> ...

자세한 내용 보기

[CSS] 브라우저 별 CSS Hack 정리

- Netscape 4 제외시키기 Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다. <link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /> 이나 <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" /> 라고 지정할 경우 Netscape 4은 읽어 들이지 못한다. 부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다. p { /*/*/ color:white; /* */ } - Mac IE 4.5, Netscape 4 제외시키기 @import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다. Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다. @import url("/css/style.css") - Mac IE 5 제외시키기 CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다. p { /* \\*/ color:white; /* */ } - Win IE 4~5 제...

자세한 내용 보기

[ie]Conditional Comment

이런식으로 IE 버전별로 적용을 시킬 수 있음. XSL 에서는 <xsl:comment><![CDATA[[if lte IE 6]> <style type="text/css">.ie{ margin-top:30px;margin-bottom:-30px; }</style> <![endif]]]></xsl:comment> IE 선택적 적용(Conditional Comments) 부분, ie에서만 동작기하길 원하는 js나 ie의 css 버그 처리 때문에 사용하는 경우 많음 gt = selects greater than 보다큰 : if gt IE 6 -> 현재버전 > 6 lt = selects less than 보다 작은 : if lt IE 6 -> 현재버전 < 6 gte = selects greater than or equal to 같거나 큰 : if gte IE 6 -> 현재버전 >= 6 lte = selects less than or equal to 같거나 작은 : if lte IE 6 -> 현재버전 <= 6 To select exclusivly for any non IE - use " IE & !IE " for a downlevel-revealed within a downlevel-hidden CC  html ...

자세한 내용 보기