-
Html, CSS 2016‧10‧17
css - div에 글자 입력 받고 placeholder 넣기
<div contenteditable="true" placeholder="여기에 글자를 입력해주세요."></div> 위 처럼 html을 작성한 후 아래처럼 css를 작성한다. [contenteditable=true]:empty:before{ content: attr(placeholder); display: block; /* For Firefox */ } div[contenteditable=true] { border: 1px solid #ddd; color : #333; font-size: 12px; width: 300px; padding: 5px; } 아래는 샘플
-
Html, CSS 2014‧09‧26
div 엘리먼트 가로, 세로 중앙 배치
div를 브라우저의 정중앙이나 원하는 엘리먼트 정중앙에 위치시키고 싶을 때가 있다.특히 레이어 팝업을 만들어 노출할 때 주로 필요로 하다. 하지만 아쉽게도 이게 정답이다라고 할 방법은 없다. 이유는 어떤 것은 크로스 브라우징이 안되는 Transform을 사용할 때도 있고, 마진으로 억지로 맞추는 경우등 여러가지 방법등이 있다. 그중에 본인이 주로 쓰는 방법이 있다. div 가로 세로 길이가 정의된 경우에 유용하다. <div […]
-
Html, CSS 2014‧05‧20
CSS3 - 이미지 또는 div 회전
회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다. .spinimage{ -webkit-animation: spin 4s infinite linear; -o-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} […]
-
Javascript, jQuery 2013‧03‧22
jQuery - 선택자 삭제 .remove
div라든가 p, span 등과 같은 선택자를 삭제할 때 사용한다. 입력 방식은 두가지 정도이다. $("선택자").remove( ); 또 하나는 아래와 같다. $('div와 같은 요소').remove("선택자"); 필자는 간단하게 주로 아래와 같이 쓴다. $("#id").remove(); 만약 위와 같이 쓰는 경우 클래스일 경우 .class 로 선택자를 넣어도 된다. 이렇게 되면 해당 클레스가 있는 div가 삭제가 된다.
-
Html, CSS 2013‧01‧21
css로 div 세로로 중앙 정렬시키기
자주 검색하기도 하고, 여러가지 방법이 있긴한데 개인적으로 생각했을 때 가장 무난하고 가장 호환성이 높은 방법을 메모해 놓으려고 한다. 방법은 #contents라는 div를 세로로 중앙 정렬하고 싶을 때 #contents를 감싸는 #contentsWrap이라는 div를 하나 만든다 . #contentsWrap{ height: 400px; width: 100%; position: absolute; top:50%; margin-top: -200px; } #contents{ position: relative; margin: auto; background-color: #eee; width: 800px; height: 400px; […]
-
Javascript, jQuery 2012‧10‧15
jQuery-마우스 이벤트시 부모 div의 id 값 가져오기
마우스 오버의 경우를 예로 든다. $Btn.mouseover(function(){ console.log($(this).closest('div').attr('id')); } $ Btn에 마우스를 올리면 그 상위 div 중에 id 값을 얻을 수 있다.
-
Html, CSS 2012‧04‧01
배경색 혹은 div나 td에 투명도 주기
background: #000;filter:alpha(opacity=10); opacity:0.1; -moz-opacity:0.1; 배경을 #000 색으로 주고 투명도를 10%로 주었다. opacity:0.1; -moz-opacity:0.1; 이 내용은 ie 외의 브라우져에서도 적용되도록 하기 위한 추가 코드이다.