재삐신생의 권태로운 이야기

움직이는 배너란?쇼핑몰에서 중요한(?)메뉴들이 스크롤에 따라 움직이는 것으로 자주 사용하는데, 이것을 구현하는 방식에 대한 방법론에 대해 포스팅하고자 한다. JS에 window.scroll 이벤트를 받아서 특정 div의 top속성을 변경하는 방법인데이부분은 어차피 큰 차이가 없으므로, 생략한다. 공통된 사항은 position:absolute가 있고, top에 특정값이 들어있따는 점 문제는 html 마크업 부분인데본문의 width:1000px; 움직일배너의 width:200px;로 가정하면, 형태#1가장 많이 쓰이는 형태로 보이는 이것은body에 child node로써 움직일 div가 있는 형태이다.이때는 본문에 사이즈나 여백에 따라 적절한 left값이 필요하다....contents... 형태#2wrapp..

메이저 브라우져에서 HTML5 등 웹2.0과 관련된 기술지원이 이뤄지면서,심히, 그 활용성과 비중이 커진 자바스크립트라이브러리를 잘 활용하는 것도 중요하므로, 좀 적어보겠다. jQuery는 요즘 거의 기본이 되어버린 현실이라, PASS TweenMAX - http://www.greensock.com/gsap-js/플래시 AS 트위너로써, 활약하던, 라이브러리인데, 자바스크립트 버전이 있다.jQuery 기본 애니메이션보다 20배나 빠르단다. Superscrollorama - http://johnpolacek.github.io/superscrollorama/스크롤에 따른, 각종효과를 포함하여, 다이나믹한 사이트를 제작하게 해줌사이트를 확인하는것이 가장빠를것이다.fancybox - http://fancybox..

웹은 눈으로 보는것이다. 라는 관점을 볼때, -> 두껍게 표현 -> 강조문구 - > 두껍게 표현 좀더 high한 표현이 strong이라 할 수 있겠다. 쉽게 말해, strong는 logical(논리적) 요소다. 강조를 의미하지만 는 단순 효과 태그다. 이것은 의미를 가지진 않는다. 약간은 애매모호한 이런것들이, 많은데, 정확히 해둘 필요가 있다. div를 가운데 정렬하는 방법은 css로 margin:0px auto;가 일반적인데 이것은 솔직히 의미는 없다. 아는 사람은 알겠지만..... align속성은 앞으로 없어지게 되므로, 또다시 애매모호함이 찾아왔다. div.alignC{ margin:0px auto; } 같은 class를 만들어야 할 모양이다. 어떤 방식과 의미가 좀 더 나은 방식인지는 모르겠다...

웹을 해본 사람이라면 누구나 퍼블리싱 과정에서 난해함을 겪었을 것이다. 이유인즉, 수많은 브라우져에서 같은 페이지가 다르게 표현되기 때문 그래서 웹표준이라것을 적용하지만, 이마저도 완벽한 해결책은 되지 못하고 있으니.. 브라우져 별 특성을 따르지 않았으면 좋겠다. 라고 생각하지만, 문서모드들까지 여러가지를 복잡하기만 웹ㅠㅠ 이번에 다루게 된 내용은 table의 셀과 img요소의 문제점을 다뤄보도록 하겠습니다.doctype를 html5에 맞게 변경을 하면서, 기존사이트에 생기는 문제점이다.기본 html4.01이나 쿼크모드에서 발생하지 않는 점을 미리 알려드린다. 기본 html의 형식은......

윈7이 보급되어서, 우리는 편하게 웹상에서 "맑은 고딕"체를 사용할 수 있어, 좋았다고 생각했는데 티스토리 템플릿에서 쓰던 돋움 12px 혹은 9pt만한 가독성을 보여주지 못한다. 최근, CSS를 수정 폰트를 변경하였는데, 좀 아쉽다랄까? 물론, 다시 돋움체로 돌아갈 생각은 없지만, 많이 봐오던 거라, 익숙한 탓일지 모르겠지만, 그 가독성 하나 만큼은 일품이란 것은 부정할 수 없다. 위직 에디터가 맑은고딕을 지원하지 않는 이유일지도 모르지.. 나불나불 맛보기 심장이 빠운스빠운스빠운스 두근대 - 맑은고딕 9pt 심장이 빠운스빠운스빠운스 두근대 - 돋움 9pt

최근 쉽게 워드프레스라는 말을 자주 듣는다. 해외 블로그툴 정도로만 알고 있었는데, 국내의 XE보다 높게 평가받으며, 사이트제작 플랫폼으로써, 훌륭한 평가를 받고 있는모양이다. 서울시 홈페이지가 이걸로 제작이 되었다고 한다. 그러다 문득 오픈소스 VS 자체제작 진보 VS 보수 리눅스(래드햇) VS 윈도우(MS) 안드로이드 VS iOS 등등의 생각이 들었다. 대세를 점치자면 오픈소스에 손을 들어주고 싶다. 해외사정은 어떤지 모르겠지만 여기저기 글들을 찾다보니, 국내실정으로썬 자체제작은 대기업밖에 못하는 실정이라는 결론에 도달하였다. SW개발이라고 보면, 비용은 거의 인건비일 뿐이지만 그런 R&D사업에 투자할 투자자도 없을 뿐더러, 개발자도 없다. 물론 순수히, 개인적인 의견이다. 훌륭한개발자는 대기업에서 ..

하나 단순 셀렉트 문에서 마우스로 클릭시 벌어지고 다시 닫혀버리는 현상 이 현상은 IE8에서만 발생하였고,DTD를 변경해도 onclick이벤트나 onchange이벤트를 다른 방법으로 사용해보고 하였으나, 여전히 발생하였다. 그러던중 CSS에서 해답을 찾게 되었다. 문제의 CSS는select:hover, select:active {background-color: #ffd;} 로써, 마우스 선택시에 배경색을 변경해주는것인데, IE8에서 Bug가 발생함을 확인하였다. IE7도 발생할지 모른다.(구하지 못해 확인 못함) IE9이상이나 기타 다른 브라우저에선 문제없음;

보통 어떤 레이아웃 디자인을 보고 HTML 마크업을 작성할때, 하드코딩을 하다보면 레이아웃이 깨지는 현상이 있고, 이유를 정확히 모르겠을때에 overflow:auto 혹은 overflow:hidden 으로 해결이 되는 경우가 종종 있다. 오늘 알게 된 것도 이것으로 발생하는 현상인데 필자로선 매우 신기하다. HTML과 CSS는 여전히 명확하지 못하다. NO CLEAR div(height지정) > div(no height,overflow:auto) > 안에 height를 초과하는 요소가 들어가면 absolue처럼 독립적으로 작동하는 것이다. 대충 예제코드를 만들어서 적용시켜보겠다. 블라블라블라레이아웃 안깨뜨리고, 높이를 무시하고 커질수 있다 하하하 하하하 하하하 하하하 하하하 하하하 하하하 하하하 하하하 ..

HTML최적화 고찰을 해본다. 고찰은 아니고 그냥 생각 찌끌 div코딩이라 불리는 표준코딩 이나흔한 table코딩이나 대형 포털사이트를 보나 어디를 보나 흔한 외국사이트보다 코딩이 더럽다. 어째서일까? 인터넷이란 건 변화가 빠른곳이라 레이아웃도 빠르게 변하고 그외는 정말 매일매일 바뀐다.그것들을 다 맞춰야하기 때문이겠지? 디자인이 바뀌면 아무리 구조가 잘 잡혀있어도 코드를 수정해야 할 것이고, 일단 보여주기 식의 코드를 막 작성하면 더러운 코딩이 되겠지.라고 생각을 해본다. 이상하게 외국사이트는 꽤나 코딩이 깔끔한 편이다.뭐가 문제일까? 비즈니스적 요구조건만 충족시키면 되는 그런 코딩이 아닌 느낌인데..순수 최적화된 HTML코드라는 느낌물론 모든 사이트가 그런건 아니지! "완성"이란것이 존재하지 않고 미..

어떤 코드든 굉장히 단순하지만, 긴~ 코드들을 줄여서 쓰기위해 Class등을 활용한다더가 해서 나름의 프레임웤같은 걸 응용해서, 쉽게 코딩을 한다 치자. 그것을 뜯어보는 사람은 오히려 단순한 Query문도 복잡하게 돌아가는 형태에 머리가 지끈지끈 그렇다고, low한 수준을 모두 따딱거리자니, 시간낭비 인력낭비 적당한 대안이라면, 이미 공용화된 프레임웤을 사용하는 것이라 하겠다. 결론이 나왔으나, 대안이 되지 못하는 슬픈 현실..