복합 선택자와 키 선택자 CSS를 사용할 때 #nav와 같은 단일 선택자를 사용할 수도 있지만, #nav > *와 같은 복합 선택자를 사용할 수도 있다. 이러한 복합 선택자를 읽는 순서는 사람과 브라우저가 다르다. 사람의 경우 왼쪽에서 오른쪽으로 선택자를 읽지만 브라우저는 오른쪽에서 왼쪽으로 읽는다. 이는 복합 선택자의 왼쪽에서 오른쪽으로 탐색을 하는 방식이 오른쪽에서 왼쪽으로 탐색을 하는 방식보다 빠르기 때문이다. 왜 그런지는 이 글에서 자세히 설명되어있다. 해당 글을 요약하자면, 왼쪽에서 오른쪽으로 탐색을 하는 방식을 사용할 경우 DOM 트리의 상위 레벨에서 하위레벨로 탐색을 진행한다(Top-down 방식). 즉, DOM 요소와 매치되는 선택자들을 찾는데 집중한다. 반면 선택자의 오른쪽에서 왼쪽으로 ..

CSS Sprites가 참 좋긴한데 디자이너가 따로 없는 이 상황에서 이미지 파일을 만들고 px값을 구하는 일련의 작업들이 꽤나 손이 가는게 현실이다. 그런게 이 모든걸 한방에 해결해 줄 프로그램이 있었다. 이미지들만 넣어주면 자동으로 생성되고 코드도 볼 수 있다. 진짜 최고다. 자세한 설명은 http://bezzera.tistory.com/289 이 곳을 참고 http://nuli.navercorp.com/sharing/fe/nmet N-MET은 마크업 개발 업무 중 비효율적이고 반복적인 부분을 툴로서 빠르게 처리할 수 있도록 하기 위해 만들어진 도구로서 마크업 개발자의 업무 효율을 높이고 유지보수 비용을 절감하는 데 도움을 줍니다. N-MET은 CSS Formatter, HTM..

※ 실무 2년차 수준의 답변임을 감안해주세요 :D Last Update : 2015.06.01 CSS 관련질문: 1. "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요. reset css는 브라우저가 가지고 있는 기본 css를 재설정하는 것이다. 예를 들자면, html, body { margin:0; padding:0; } ul { margin:0; padding:0; list-style:none; } 과 같다. 나의 경우에는 default.css 라는 파일을 규정해놓고 퍼블리싱을 시작한다. 어떤 특정 내용을 긁어다 쓰기보다는 사이트 구성에 필요한 기본적인 내용을 가지고 쓰는것이 중요하다. 2. Floats가 어떻게 동작하는지 설명해주세요. float 는 left, right, none 속..

출처 : https://github.com/Songhun/Front-end-Developer-Interview-Questions/blob/master/Korean/README_KR.md 일반적인 질문: Twitter,Facebook 등의 SNS를 사용하시나요? * 사용한다면, 누구를 팔로우 하고 있나요? GitHub을 사용하시나요? * 사용한다면, 어떤 프로젝트를 Watch 혹은 Fork하시나요? 자주 보는 Blog가 있습니까? 버전 관리 시스템은 어떤 것들을 사용해보셨습니까? 선호하는 개발 환경은 무엇입니까? (운영체제, 에디터, 브라우저, 도구 등등) 당신이 웹 페이지를 만들 때의 과정을 설명 해주실 수 있을까요? 점진적 향상법(progressive enhancement)과 우아한 성능저하법(grac..

적는 순서도 중요!!-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8filter: alpha(opacity=50); // IE7opacity:0.5; // all browsers [참고] http://www.quirksmode.org/css/opacity.html

http://www.jqueryscript.net/slider/Creating-3D-Perspective-Carousel-with-jQuery-CSS3-CSSSlider.html

// iframe height auto resize var height = window.innerHeight; $('iframe').css('height', height); $(window).resize(function(){ var height = window.innerHeight; $('iframe').css('height', height); });