본문으로 바로가기

WEBDIR

현재위치 :: HOME BLOG CATEGORY SEARCH ARCHIVE TAGS MEDIA LOCATION GUESTBOOK

네비게이션

  • 홈으로
  • 블로그소개
  • 카테고리
  • 태그
  • 방명록
관리자
  • 블로그 이미지
    흉내쟁이

    개발자모드 ON, 부스터 디자인

    링크추가
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃

자바스크립트 구성요소

자바스크립트는 아래와 같은 3가지 구성요소들로 이루어져 있다. 자바스크립트 BOM 자바스크립트 BOM(Browser Object Model)은 브라우저와 관련된 객체로 구성되며, 브라우저를 프로그래밍적으로 제어할 수 있는 수단이 된다. Window Navigator Location History Document Screen BOM은 전역객체인 Window 객체의 프로퍼티와 메소드들을 이용해 제어하기에 Window 객체의 사용법을 배우는 것과 같다. 자바스크립트 DOM 자바스크립트DOM(Document Object Model)은 웹문서를 조작할때 지켜야할 규칙(인터페이스)을 브라우저 제조사의 자신들만의 기술로 기능을 구현한 것이다. 웹표준은 W3C DOM 인터페이스를 따르며, 구형 IE7,8의 경우는 지원..

웹코딩/Javascript 9년 전

문서의 로드시점 - onload, DOMContentLoaded

웹문서를 만드는 경우, 문서가 로드되었을때를 기점으로 문서를 초기화하고, 각종 설정을 부여하는 것은 빈번한 일입니다. 이 시점에 접근하기 위해 사용되는 이벤트들에 대하여 알아봅니다. 일반적으로, 스크립트를 문서의 마지막() 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다. onload 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다). window.onload = function() { //실행될 코드 } 문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 ..

웹코딩/Javascript 9년 전

스크립트 모듈화 - Require.js #1

자바스크립트(JS)는 자체적으로 파일간의 모듈화를 지원하지 않기때문에 이를 유지 보수하는 일에서 전역변수를 오염시키고 서로간의 간섭을 신경써야 합니다. 모듈패턴을 이용하여 최소한의 간섭을 유지하고, 동적으로 스크립트를 로딩하여 필요한 것만 다운받게 만들며 최적화를 꾀할 수 있지만, 파일이 커지고 코드가 길어질 수록 이를 체계적으로 관리할 수 있는 도구가 절실해집니다. 이를 보완해주는 라이브러리중에 하나인 Require.js에 대하여 알아봅니다. Require.js 소개 Require.js는 AMD(Asynchronous Module Definition - 비동기 모듈 정의)를 바탕으로 제작된 JS 모듈 로더(loader) 파일이다. 이는 JS 코드를 모듈화하고 모듈간의 의존성 문제를 해결하여 코드를 파악..

웹코딩/Javascript 9년 전

자바스크립트 삽입방식과 위치

자바스크립트 삽입방식 자바스크립트를 실행하는 방법은 문서안에 type="text/javascript" 부분은 HTML5에서는 생략할 수 있다. 문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다. 전자의 경우는 간단한 스크립트의 경우이거나 해당 문서에만 적용되는 코드들, 초기화등에 자주 사용된다. 후자의 경우는 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 링크해 사용되곤 한다. 이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식이다. 자바스크립트 삽입 위치 브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료이 완료될때까지 브라우저 렌더링을 멈추게 된다. 즉, 자바스크립트의 삽입 위치..

웹코딩/Javascript 9년 전

ECMAScript 6 특징 정리 링크들

2015년 6월에 공개된 새로운 자바스크립트(JS) 표준 ECMAScript 6은 새로운 기능이 많이 추가되었으며, 2009년 이후의 첫번째 업데이트입니다. 아직 주요 브라우저들의 자바스크립트 엔진에서 이를 완벽히 지원하진 않지만 향상된 기능을 경험해볼 순 있습니다. 관련사항들 링크 ECMAScript 6 버전의 특징을 정리해둔 git.io/es6features를 한글로 번역해둔 ECMAScript 6 Features 링크를 통해 내용을 살펴보도록 하자. 그 밖의 스펙의 명세나 호환성, 이를 지원하지 않는 브라우저에서 대체할 수 있는 폴리필들은 아래의 링크를 참고하자. SPEC Standard ECMA-262 6th Edition INFO ECMAScript 6 호환성 POLYFILL BABEL

웹코딩/Javascript 9년 전

자바스크립트 (ECMAScript) 버전

그 동안 자바스크립트(JS)를 사용하면서도 현재 사용하는 브라우저가 몇 버전의 JS를 지원하는지, 새로이 어떠한 기능들이 추가되었는지도 깜깜히 지내왔습니다. jQuery에 너무 익숙해져 jQuery에서 지원하는 기능들에 발목이 메인 형상이지요. 저와 비슷한 분들이 있을꺼라 생각되어 관련정보를 취합해 보았습니다. JavaScript와 ECMAScript, JScript 우리가 흔히 자바스크립트라고 부르는 언어는 Ecma 인터내셔널이라 불리는 표준화 기구에서 제정한 ECMA-262 스크립트이다. 자바스크립트는 넷스케이프에서 제작하였고 이를 Ecma 표준으로 등록하는 과정에서 이미 등록되어 있는 JAVA와 유사한 명칭으로 인해 ECMA-262라는 이름을 가지게 되었으며 이를 표준화한 것이 ECMAScript이..

웹코딩/Javascript 9년 전

다시 공부하는 자바스크립트

처음 자바스크립트(JS)를 접했던 것은 2000년도 초반이였다. 지금과는 달리 JS에 대한 인식이 좋지 못했고, 관련 지식을 찾아보기가 어려웠던 시기였다. 타 프로그래밍 언어에 비해 느슨한 문법과 미지원되는 기능들이 비교대상이 되어 저수준의 언어로 치부되었고, 그런 인식에서 출발한 관련 서적들도 형편없었다라고 돌이켜 본다. 무엇보다도 웹표준이라는 개념이 없었던 시기라 브라우저마다 제각기 다른 지원사항들로 골머리를 앓다보면 자연스레 멀어질 수 밖에 없었다. JS에 다시 관심을 가지게 만든 것은 jQuery의 등장으로 DOM 조작의 편의성과 크로스브라우징의 부담감을 덜면서 였다. 게다가 구글의 V8엔진이 탑재된 브라우저들의 등장으로 대폭적으로 개선된 환경을 접하면서 쏟아지는 jQuery 플러그인들과 각종 라..

웹코딩/Javascript 9년 전

CSS 이벤트 제어(pointer-events ) 속성

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있다. 아래의 표를 참고하자. 숨김 속성과 값 공간점유 이벤트 탭(Tab) 접근 opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collapse 테이블안에서만 비점유 비활성 불가능 display:..

웹코딩/CSS 9년 전

Windows 10 가상 데스크톱

윈도우 10의 새 기능중에 하나인 가상 데스크톱은 바탕화면을 동시에 여러개 사용할 수 있게 만든 기능입니다. 작업별로 화면을 전환하며 사용할 수 있어 여러 대의 모니터를 보유한 효과를 얻을 수 있습니다. 가상 데스크톱 생성 작업표시줄에 아래와 같이 새로 생긴 작업보기 아이콘이 가상 데스크톱 화면을 불러온다. 현재 바탕화면에서 실행중인 프로그램들이 표기되며 하단에 데스크톱의 갯수와 새로운 가상 데스크톱을 생성할 수 있는 메뉴를 확인할 수 있다. 가상 데스크톱 이동 가상 데스크톱간의 이동은 가상 데스크톱 화면에서 원하는 데스크톱을 선택해서 이동할 수도 있고, 단축키 Ctrl + Window() + ←, → 를 활용해 이동할 수도 있다. 또한, 각각의 데스크톱에서 사용중인 프로그램을 다른 데스크톱으로 옮길 수..

윈도우즈/Windows 10 9년 전

Windows 10 다이렉트X 12 (DirectX)

윈도우10에는 새로운 다이렉트X(DX) 12가 탑재되었습니다. 지난 11버전 이후로 6년여만의 변화이며, 그동안 GPU(그래픽카드)의 발전을 감안한다면 은근히 기대감을 감출수 없는 부분입니다. 무엇보다도 게임을 좋아하는 분이라면 새로운 DX의 등장으로 개선될 성능의 향상과 낮아질 전력 소비량에 반가울 것입니다. 다이렉트X는 게임 및 멀티미디어를 손실없이 최대한의 성능을 이끌어내기 위해 사용되는 라이브러리(API, 플랫폼)이다. 개발자들이 DX 라이브러리를 사용해 제품을 만들게 되며, 이로 제작된 것은 좋은 성능 평가를 받고있다. 다이렉트X 12 등장 과거 윈도우 7과 함께 DX11이 공개되었으며, 이후로 마이너한 업데이트가 계속적으로 이루어지고 있었다. 이후로 6년만의 새버전으로 DX12가 등장했다. 그..

윈도우즈/Windows 10 9년 전

인터넷 익스플로우 구버전 지원 종료(IE8,IE9,IE10)

MS(마이크로소프트)는 지난 1월 13일부로 IE(인터넷 익스플로우) 구버전에 대한 정기 보안 업데이트를 지원 종료하였습니다. 이후 발생할 수 있는 보안 취약점에 대해 브라우저를 업데이트(IE11, Edge)하거나 크롬이나 파이어폭스같은 다른 브라우저 사용을 권고합니다. IE 지원 종료 브라우저를 사용하고 있다면? 지원 종료된 브라우저는 더 이상 보안 업데이트, 비보안 업데이트, 무료나 유료 지원 옵션 또는 온라인 기술 콘텐츠 업데이트에서 제외된다. 즉, 해당 브라우저들을 지속적으로 이용하다 보안 취약점을 이용한 해킹 및 자료유출등에 문제점이 발견되어도 MS사로 부터 어떠한 지원도 받을 수 없게 된다. 요즘같이 랜섬웨어의 전파가 활발한 시기에 국내처럼 ActiveX로 무엇이 설치되는지도 가늠할 수 없고 ..

웹개발론/웹표준, 접근성 9년 전

Windows 10 탐색기 설정

윈도우10에서도 탐색기를 통한 폴더 및 파일 접근은 여전히 불편합니다. 새로 추가된 부분도 중복되는 요소들이 많아 기본 설정의 탐색기는 복잡해 보이기에 이를 재설정하는 방법을 소개합니다. 탐색기 확장 윈도우 탐색기를 크롬 브라우저와 유사한 북마크, 탭 기능을 추가하는 Clover가 윈도우 10에서도 여전히 작동한다. 이를 통해 파일간 이동 및 복사를 여러개의 탐색기를 실행하고 찾아 해메는 수고를 덜 수 있으며, 자주 여닫는 폴더를 탭 고정할 수도 있다. 탐색기 바로가기 윈도우 탐색기를 실행하면 보여지는 첫 화면이 바로가기 페이지로 설정되어 있다. 또한, 고정된 바로가기 이외에도 최근에 사용된 파일 및 폴더가 표시되어 좌,우측 패널 모두에 표시된다. 이것을 변경하려면 탐색기 상단의 파일 > 폴더 및 검색 ..

윈도우즈/Windows 10 9년 전

Windows 10 바로가기 및 브라우저 설정

윈도우 10 설치 후에 도움이 될만한 기본 설정을 모았습니다. 설정 부분까지 도달하는데는 복잡한 메뉴나열보다는 검색을 이용하도록 합시다. 바탕화면에 아이콘 추가 바탕화면에 기본 아이콘(컴퓨터, 휴지통, 문서, 제어판, IE11)이 없을 경우, 이를 접근하기 쉽게 바탕화면에 아이콘을 추가해보자. 바탕 으로 검색하여 바탕 화면의 일반 아이콘 표시/숨기기 선택 원하는 아이콘을 선택하고 적용 internet 으로 검색, 검색 결과중 Internet Explorer 에 마우스 우클릭한 후 파일위치 열기 선택 이동된 위치에서 Internet Explorer 의 바로가기를 바탕화면에 복사 기타 자주 사용하는 프로그램들을 검색하여 실행파일을 바로가기로 만들어 바탕화면에 복사 윈도우 8이상 부터는 시작메뉴에 우클릭으로 ..

윈도우즈/Windows 10 9년 전

Windows 10 다운그레이드(이전 윈도우로 돌아가기)

윈도우 10을 사용하다가 하드웨어 및 프로그램의 호환성 문제, 혹은 특정한 부분이 마음에 들지 않아 다시 이전의 윈도우로 돌아가고 싶을 경우가 있습니다. 이와 관련된 내용을 서술합니다. 다운그레이드 조건 윈도우를 업그레이드 한 사용자는 28일이내에는 다운그레이드가 가능하다. 즉, 클린 설치를 통해 윈도우를 사용하는 사용자의 경우와 업그레이드 후 28일이 지난 사용자는 다운그레이드 할 수 없다. c:\ 에 Windows.old 및 Windows.~BT 폴더의 모든 항목을 유지해야 한다. 이를 제거하였거나 디스크정리를 통해서 기존 Windows 정보가 제거된 경우에는 다운그레이드 할 수 없다. 업그레이드 후 추가한 모든 사용자 계정을 제거해야 한다. 윈도우 7 또는 윈도우 8.1에 로그인하는데 사용한 암호를..

윈도우즈/Windows 10 9년 전

Windows 10 업그레이드 및 설치 오류 해결방안

윈도우 10의 업그레이드가 모종의 이유로 실패한다면 눈 앞이 캄캄해집니다. 이전 자료에 대한 걱정부터 이전 윈도우를 그냥 쓸껄하는 자책까지... 마이크로소프트에 대한 원망은 뒤로하고도 말이죠. 관련해서 오류해결책에 대한 정보를 모아보았습니다. 오류코드 확인하기 윈도우는 오류 발생시 오류코드를 알려준다. 아래는 필자가 윈도우 10 업그레이드 실패를 경험하면서 발생한 오류 코드에 대한 예시이다. 업그레이드중 아래와 같이 이전 윈도우로 복구가 되어버렸다. 오류코드 800706FB를 알리나 이에 대한 검색결과는 존재하지 않았다. 필자는 HDD 공간을 약 30Gb이상으로 여유공간을 만들고 다시 업그레이드를 진행하였더니 오류없이 윈도우 10 업그레이드에 성공하였다. 윈도우 10에서 요구하는 공간은 3Gb 정도의 여..

윈도우즈/Windows 10 9년 전
  • 이전
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ···
  • 30
  • 다음

사이드바

ABOUT

WEBDIR for Developer

NOTICE

  • 스킨 변경 및 배포
  • 리부트!! WEBDIR 개편 소식
  • 오픈!! WEBDIR 블로그 소개
  • 전체 보기
MORE+

CATEGORY

  • 전체보기 (438)
    • 윈도우즈 (68)
      • Windows 일반 (49)
      • Windows 10 (11)
      • WSL (8)
    • 리눅스 (135)
      • Linux 일반 (63)
      • CentOS (26)
      • Ubuntu (46)
    • 네트워크 (8)
    • 웹코딩 (125)
      • HTML (43)
      • CSS (41)
      • Javascript (14)
      • PHP (5)
      • MySQL (0)
      • App,Plugin (22)
    • 웹개발론 (31)
      • 웹표준, 접근성 (6)
      • 크로스브라우징 (24)
      • 반응형웹디자인 (1)
    • 프레임워크 (6)
      • 보일러플레이트 (6)
      • 부트스트랩 (0)
    • 그누보드 (4)
      • GNU 자습서 (2)
      • GNU 팁 (2)
    • 워드프레스 (13)
      • WP 팁&테크 (9)
      • WP 플러그인 (3)
      • WP 변경이력 (1)
    • 티스토리 (10)
      • 블로그가이드 (0)
      • 스킨가이드 (8)
      • 스킨배포 (2)
    • 개발도구 (33)
      • XAMPP (6)
      • 서브라임텍스트 (15)
      • 에디터 (2)
      • 크롬, 개발자도구 (6)
      • Git (1)
      • Hyper-V (0)
      • Docker (0)
      • 가상머신 (1)
    • 기존 작성물 (5)

RECENTLY

  • 최근 글
  • 최근 댓글

최근 글

최근댓글

TAG

  • Command
  • sublimetext
  • app
  • Plugin
  • Utility
  • html5
  • CentOS
  • polyfill
  • jQuery
  • HTML
  • Linux
  • CSS
  • Editor
  • Windows
  • property
  • JavaScript
  • ubuntu
  • Wordpress
  • server
  • element
MORE+

LINK

  • 그렇고 그런 이야기
  • Life is an egg.
  • Codrops
  • Front-end Developer Ishaiin.

VISITOR

현재 실시간 방문자
오늘
어제
전체
  • 홈으로
  • 방명록
  • 로그인
  • 로그아웃
  • 맨위로
SKIN BY COPYCATZ COPYRIGHT WEBDIR, ALL RIGHT RESERVED.
WEBDIR
블로그 이미지 흉내쟁이 님의 블로그
MENU
  • 홈으로
  • 블로그소개
  • 카테고리
  • 태그
  • 방명록
CATEGORY
  • 전체보기 (438)
    • 윈도우즈 (68)
      • Windows 일반 (49)
      • Windows 10 (11)
      • WSL (8)
    • 리눅스 (135)
      • Linux 일반 (63)
      • CentOS (26)
      • Ubuntu (46)
    • 네트워크 (8)
    • 웹코딩 (125)
      • HTML (43)
      • CSS (41)
      • Javascript (14)
      • PHP (5)
      • MySQL (0)
      • App,Plugin (22)
    • 웹개발론 (31)
      • 웹표준, 접근성 (6)
      • 크로스브라우징 (24)
      • 반응형웹디자인 (1)
    • 프레임워크 (6)
      • 보일러플레이트 (6)
      • 부트스트랩 (0)
    • 그누보드 (4)
      • GNU 자습서 (2)
      • GNU 팁 (2)
    • 워드프레스 (13)
      • WP 팁&테크 (9)
      • WP 플러그인 (3)
      • WP 변경이력 (1)
    • 티스토리 (10)
      • 블로그가이드 (0)
      • 스킨가이드 (8)
      • 스킨배포 (2)
    • 개발도구 (33)
      • XAMPP (6)
      • 서브라임텍스트 (15)
      • 에디터 (2)
      • 크롬, 개발자도구 (6)
      • Git (1)
      • Hyper-V (0)
      • Docker (0)
      • 가상머신 (1)
    • 기존 작성물 (5)
VISITOR 오늘 / 전체
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃
  • 취소

검색

  • Command
  • sublimetext
  • app
  • Plugin
  • Utility
  • html5
  • CentOS
  • polyfill

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.