window ,document offset (프로퍼티와 메소드)

Window 객체의 위치 프로퍼티와 메소드 window객체는 BOM(Browser Object Model)객체의 최상위 객체로서 웹페이지가 열려 있을때의 window창과 관련된 위치 및 크기와 관련된 프로퍼티와 메소드를 알아보자. 프로퍼티 / 메소드 내 용 innerWidth, innerHeight 메뉴바, 툴바, 스크롤바의 크기를 제외한 window의 넓이와 높이 outerWidth, outerHeight 메뉴바, 툴바, 스크롤바의 크기를 포함한 window의 넓이와 높이 pageXOffset, pageYOffset 윈도우창에서 스크롤이 있는 페이지라면 스크롤된 x, y 좌표값 screenLeft, screenTop window창이 screen(0,0)인 좌표에서 떨어진 브라우저의 상단 모서리인 x, ..
JavaScript/위치 프로퍼티와 메서드 2016. 9. 30. 17:09

jQuery position, offset(위치 프로퍼티와 메소드)

jQuery 에서 제공하는 엘리먼트의 위치, 크기와 관련된 프로퍼티와 메소드 jQuery에서 제공되는 프로퍼티와 메소드는 다른 객체의 위치 프로퍼티와 메소드와 거의 비슷하지만 [ 자바스크립트 DOM 프로퍼티/메소드 > jQuery 프로퍼티/메소드] 인 부등호의 관계를 보면 알 수 있듯이 자바스크립트 DOM 프로퍼티/메소드를 필히 알아야 할 필요성이 있다. jQuery 프로퍼티/메소드 내 용 offsetParent() - offsetLeft, offsetTop 의 기준이 될 부모 엘리먼트 (동적 위치인 경우는 동적위치가 적용된 상위(부모) 엘리먼트) offset().left, offset().top - Documet를 기준으로 한 엘리먼트의 위치 값 position().left, positon().top ..
JavaScript/위치 프로퍼티와 메서드 2016. 9. 30. 16:59

메타(meta)태그 정리

meta 태그 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다. 메타태그의 속성 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다. http-equiv="항목명" 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다. content="정보값" meta 정보의 내용을 지정합니다. name="정보 이름" ..
Dev Environment/개발 기타 자료 2016. 9. 30. 13:48

자바스크립트 디버깅(Debugging) - alert, console

Deburgging - console, alert이 글에서는 자바스크립트의 디버깅 방법에 대해 정리합니다.먼저 디버깅의 개념에 대해 알아봅니다.컴퓨터 분야에서 디버깅이란 컴퓨터 프로그램이나 하드웨어 장치에서 잘못된 부분, 즉 버그를 찾아서 수정하거나 또는 에러를 피해나가는 처리과정입니다.프로그램이나 하드웨어 장치의 결함을 제거하기 위해서는 문제가 되는 부분을 분리시킨 후 수정해야 합니다. 프로그램이 디버깅되었다거나 프로그램의 결함을 해결하였다는 것은 더 이상의 잘못된 부분이 없다는 것을 의미합니다.다시말해, 프로그램의 버그를 고치는 일이라고 할 수 있습니다. 버그는 프로그램의 오동작을 말하는데 긴 프로그램이라도 기본적으론 의심되는 코드부분에 브레이크 포인트를 걸고 조금씩 실행해 보면서 여러 가지 값들이 ..
Dev Environment/개발 환경 2016. 9. 30. 13:26

반응형 유튜브 동영상 삽입하기 - Responsive YouTube Video

Responsive YouTube Video & Object유튜브와 같은 미디어는 고정된 높이와 너비를 제어하여 추가하기 때문에 브라우저 크기나 장치의 폭에 따라 크기를 조정할 필요가 있을 경우 문제가 될 수 있습니다.다시 말해, 반응형 웹에서 일반적인 유튜브 소스코드를 추가할 시에 모바일,태블릿,스크트톱에서 원치않는 사항에 직면하게 될 것입니다.이렇듯 반응형 웹에서 유튜브 동영상과 같은 미디어를 다루는 방법에 대해 간단히 알아봅니다. 일반적인 마크업 구조유튜브 동영상을 삽입시에 다음과 같은 마크업을 할 수 있습니다. html 위와 같이 유튜브 소스를 아이프레임으로 삽입시에 아이프레임을 감싸주는 부모 컨테이너와 같은 요소가 필요합니다. CSS 구성 css .video-container { position..
StyleSheet/CSS 2016. 9. 30. 08:20

반응형 말줄임(text ellipsis) 효과

RWD ellipsis(반응형 말줄임 참고 자료) 공지사항과 같은 리스트 타입에서 말줄임 효과를 구현해 봅니다. RWD 공지사항 말줄임 효과 만들어보기 html Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nihil! 2014-08-30 Lorem ipsum dolr adipisicing elit. Neque nihil! 2014-09-03 css .article-list { width: 70%;} .article-list li {} .article-list li a {position: relative;display:block;line-height: 27px;padding-right: 80px; color: #333;} .article..
StyleSheet/CSS 2016. 9. 30. 08:09

반응형 탭 스타일 CSS

RWD Tab Style 반응형 탭 스타일에 대해 알아봅니다. 반응형 탭 CSS Ref 마크업 및 CSS 는 다음과 같습니다. html Why choose Samsung Printers? content 1 Why choose Samsung Supplies? content 2222 Why choose Samsung Solutions? content 333 Why choose Samsung Services? content 444 css * { margin:0; padding:0 } .b2b-tabswrap .b2b-tabs {width:100%; height:auto; position:relative; } .b2b-tabswrap .b2b-tabs li {float:left;display:block;widt..
StyleSheet/CSS 2016. 9. 30. 08:09

반응형 웹 디자인(RWD) 기초 다지기

Responsive Web Design 웹 디자이너는 760픽셀 폭의 노트북 화면에서부터 데스크톱 모니터에 이르기까지, 다양한 크기의 디스플레이를 지원하는 문제로 항상 이슈가 생겼습니다. 게다가 스마트폰과 태블릿의 등장으로, 고려해야 하는 디스플레이 크기는 더 다양해졌습니다. 그래서 어떤 회사는 모바일 브라우저와 별도의 웹 사이트를 구축하기도 합니다. 하지만 두 가지 종류의 사이트와 웹 서버 프로그램을 동시에 개발하여, 단말 종류에 따라 다른 사이트가 전송되도록 할 시간, 돈, 인력등이 충분하지 않다면 모바일 전용 웹 사이트를 구축하기는 아마 어려울 것입니다. 다행히도, 하나의 웹 사이트로 다양한 크기의 디스플레이를 지원할 또 다른 방법이 있는데, 이 디자인(설계) 기법의 이름은 '반응적 웹 디자인'으로..
StyleSheet/CSS 2016. 9. 30. 08:06

Responsive Web Design - 반응형 웹 적용하기

Responsive Web 반응형 웹 디자인은 모바일 혹은 데스트탑의 모든 기기와 크고 작은 모든 스크린 사이즈에서 적절하게 작동하는 웹사이트를 만드는 것입니다. 반응형 웹 디자인은 모든 사람에게 직관적이고 만족스런 경험을 제공하는 것에 초점을 두며, 데스크탑 유저와 폰 유저 모두에게 같은 이익을 제공하게 하는 것입니다. 반응형 웹 디자인 responsive web design 용어는 Ethan Marcotte가 만들어냈습니다. Food Sense는 아름다운 웹사이트이며, 모든 다른 뷰포트 사이즈에 반응합니다. 크건 작건 뷰포트에 웹사이트가 조절되어 자연스런 사용자 경험을 만듭니다. 이 Food Sense 웹을 참고해 보시기 바랍니다. Responsive vs. Adaptive vs. Mobile Res..
StyleSheet/CSS 2016. 9. 30. 08:05

jQuery(), $() 의 정체

jQuery 실체 알아보기jQuery 생성자 함수는 어떻게 생성하는지에 대해 알아봅니다. javascript var $p = $('p'); $p.css('border', '1px solid red').children('a').css('text-decoration', 'none') (function (global, $) { var num = 10; var $body = $('body'); global.data = { num : num, $body: $body }; })(window, window.jQuery); function moving() { console.log(this) } moving(); document.body.onclick = moving; function car(arg) { this.nam..
Web Tech/jQuery 2016. 9. 29. 13:34

HTML5의 구조적인 요소들 #2 - <section>,<article>

문서의 구조를 형성하는 블럭 요소 HTML5의 구조적인 마크업 요소를 위한 div, section, article 에 대해 알아봅니다. div, section, article 요소 소개 : 이미 너무나도 잘 알고 있고 가장 많이 이용하는 통상적인 컨텐츠 그릇입니다. 이 이상 어떠한 의미론적인 뜻도 내포하고 있지 않으며, 단지 컨텐츠의 흐름만 형성하는 요소일 뿐입니다. : 통상적인 문서 또는 어플리케이션의 섹션(구획)을 형성하는 요소로, 대부분 항상 heading 요소들과(가끔은 heading 요소들을 로 감싸기도 한다), 그리고 때때로 요소와도 함께 사용되기도 합니다. 홈페이지의 뉴스 부분처럼 페이지의 주요 부분인, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 29. 13:33

HTML5 Elements #1 - <nav>, <aside>, <figure>

HTML5의 구조적인 요소들 #1 HTML5 엘리먼트 중에서 와 에 대해 알아봅니다. 그리고 과 이것의 자식 요소인 도 함께 살펴 본 후, 와 비교하여 보도록 합니다. nav, aside, figure 소개 : 다른 페이지로의 이동(일반적으로 ‘사이트 네비게이션’이라 한다.) 또는 같은 페이지에서 섹션으로 이동(흔히, 긴 글에 사용되는 ‘컨텐츠 내용 목록’을 일컫는다.)을 위한 네비게이션 링크 목록을 담는 섹션입니다. 이것은 주요한 네비게이션 구역이지, 단지 링크만 포함하는 의미없는 그룹을 말하는 것이 아닙니다. 그리고 대개 “skip navigation” 링크를 사용하고 있을 것입니다. : 주위의 내용과 분리는 되지만 아주 약간의 관련성이 있는 컨텐츠를 구성하는 페이지의 섹션을 말합니다. 인쇄본에서는 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 29. 13:33