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

ul li를 한줄로 만들기위해 float:left를 자주 사용했는데 이제 웹환경이 많이 좋아졌으니inline-block를 막 사용할 수 있다. 물론 약간의 hack*zoom:1;*display: inline; 따위는 적용 float:left인 li요소를 가진 부모 ul을 inline-block해도 가운데 정렬효과를 얻을 수 있으며그냥 li요소에 inline-block를 해도 가운데 정렬효과를 얻을 수 있다. item1 item1 그냥 두가지 방법이 있다

웹사이트 개발시모바일은 염두 안 할 수가 없다!! 그런데 viewport라는걸 지정하지 않으면!! 모바일 브라우져는 확대/축소는 있지만 브라우져 윈도우 width값이 없기에 레이아웃을 깨지는 현상을 볼 수 있다. 필자는 width값이 980px로 고정되는 기이한 현상을 경험했는데 이는 모바일 브라우져의 default value viewport가 980px이란다. 적어도 모바일 크롬은 말이다. viewport를 지정하면 모든 문제는 해결된다. 이런식으로 지정을 할 텐데모바일용 웹이 아닌 상태로 모바일에서 잘보이게 하려면device-width말고, 직접 컨테이너 최대사이즈를 잘 지정하는것을 권장한다!! 980 width issue는 이것으로 해결!

childs요소가 float속성이 있으면parent요소의 (물론table-cell) vertical-align이 적용 childs요소가 일반 inline요소이면 요소의 vertical-align이 적용 vertical-align은 default로 상속 안됨 뭐, 둘다 vertical-align을 먹이는 경우가 많으니까, 중요한 issue는 아님! w3스쿨보다는 MDN이 더 정확함. refer : https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

http://responsinator.com/ http://responsive.is/ http://troy.labs.daum.net/

.style0{mso-number-format:General;text-align:general;vertical-align:middle;white-space:nowrap;mso-rotate:0;mso-background-source:auto;mso-pattern:auto;color:black;font-size:11.0pt;font-weight:400;font-style:normal;text-decoration:none;font-family:"맑은 고딕", monospace;mso-font-charset:129;border:none;mso-protection:locked visible;mso-style-name:표준;mso-style-id:0;}.number{mso-number-format:"@";}.mon..

바햐흐로 2014년이 코앞이다. 웹페이지를 마크업하다보면 많은 착오가 생기기 마련 대부분 크로스 브라우징이 문제일 터 그래서 한번 포스팅을 시작한다. 레이아웃 구성 방법론에 대해 생각해본다. 1. table 코딩 고전의 전형적인 사이트를 표방하는 이방식은 table wrapper와 table container와 align속성으로 레이아웃을 구성하는데 엄밀히, 표를 표시하는 html요소 개념이라 w3c의 웹표준에는 어긋나는 잘못된 웹의 형태이다. ::장점:: 브라우져 호환성이 좋다. 정형화된 틀로 나이지긋한 분들은 오히려 선호하는 경우도 있다. 세로정렬(vertical align)이 매우 편하다/이것이 핵심일지도 모른다. ::단점:: 레이아웃이 틀에 박혀버린다. 예를 들어 마크업을 수정하지 않으면, 절대로..

메소드 디폴트 매개변수 혹은 함수 변수 기본값 혹은 method default parameter쓸 수 있는 표현이 많아서 제목이 헷갈리지만, 내용은 같다.대부분은 언어는 함수를 작성할때, 매개변수에 대한 기능이 존재한다.예를 들어int function METHOD(param1='기본값1',param2='기본값2'){return 1234;} 식으로 지정하면 METHOD(); 로 호출시, 매개변수는 기본값으로 적용되서 실행되는 식이다. 하지만, 멍청한 자바스크립트는 그런기능이 존재 하지 않는다.그래서 따로 체크 혹은 기본값 지정을 해야한다. function plus(num){return num+=1;}이와 같은 메소드가 있다면,plus(); 로 호출을 시도하면 num은 undefined이므로 정상작동이 안 ..

움직이는 배너란?쇼핑몰에서 중요한(?)메뉴들이 스크롤에 따라 움직이는 것으로 자주 사용하는데, 이것을 구현하는 방식에 대한 방법론에 대해 포스팅하고자 한다. 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를 만들어야 할 모양이다. 어떤 방식과 의미가 좀 더 나은 방식인지는 모르겠다...