HTML5 기능 감지 - 수동

보통은 Modernizr를 많이 애용하는데, 외부의 라이브러리 사용이 원활치 않을때는 직접 HTML5 기능의 감지를 구현해야 할 때가 있을 겁니다. 그때를 대비해서 기록으로 남겨둡니다. Element DOM 객체를 사용한 감지 canvas 기능 감지 canvas 엘리먼트의 context를 가져와서 부정 연산자 두번을 이용한 트릭으로 Boolean값으로 변화시켜서 return function supports_canvas() { return !!document.createElement('canvas').getContext; } canvas 텍스트 기능 감지 canvas 엘리먼트의 '2d' context를 가져와서 fillText라는 함수가 있는지여부를 Boolean으로 return function suppo..
웹개발론/크로스브라우징 2015. 4. 17. 00:50

CSS 가운데(중앙) 정렬

콘텐츠를 가운데 정렬하는 일은 굉장히 빈번한 일입니다. 부모 혹은 자식 요소에 따라 이를 구현하는 방법이 상이하니 염두해 둡시다. 기본적인 내용 정렬 가운데 정렬을 알아보기 앞서, 가장 간단한 정렬방법을 알아봅니다. 내용 가로 정렬 내용을 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다. .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; } 내용이 든 종결 블록 요소에만 적용된다. 인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다. 구조 블록 요소에 text..
웹코딩/CSS 2015. 4. 15. 04:43

float 레이아웃 문제 해결

float를 이용한 레이아웃을 작성할때, 부모 요소가 자식 요소의 크기를 반영하지 못하는 문제가 생깁니다. float가 적용된 요소는 문서의 흐름에서 제외되어 둥둥 떠 다니는 레이어처럼 떠있게 되는데 float 되지 않은 다른 블럭 요소들이 다른 층에 떠 있게 되어서 자식의 높이가 부모에게 전달되지 못하게 되는 것입니다. FLOAT 레이아웃 일단 float 레이아웃의 기본적인 형태를 예로 들어 본다. header nav content 위에서 전체를 감싸는 컨테이너가 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주고 있다. 아래가 원래 의도한 레이아웃으로 부모 컨테이너가 자식 요소들을 제대로 반영하고 있다. header nav content 기본 구조는 아래와 같다. header nav co..
웹코딩/CSS 2013. 12. 13. 19:43

[jQuery] 변경이력

한 동안 jQuery를 잊고 살았더니 많은 변경점들이 생겼다. jQuery가 2.x 와 1.x 의 두 가지 버전으로 나뉘어 개발이 이루어지고 있다. 2.x 버전은 IE 6,7,8 을 더이상 지원하지 않는다. 1.x 버전은 IE 6,7,8을 지원한다. jQuery가 버전업이 되면서 사라지거나 변경된 점이 많다. 특히 1.9 버전대에 이르러서 과거에 만들어진 플러그인들 중에 변경점들로 인해 오작동을 일으킬수 있는 것들이 있는데 구버전의 API들과 호환성을 보장하기 위한 스크립트가 새로 생겼다. https://github.com/jquery/jquery-migrate 에서 자세한 내용을 확인할 수 있다. CDN은 이다.
웹코딩/Javascript 2013. 12. 12. 17:54

favicon 관련 팁

해당 글은 파비콘(Favicon)의 모든 것으로 새로 작성되었습니다. 이 글은 폐기예정입니다. 파비콘(favicon)이라고 불리는 인터넷 주소창의 아이콘들에 대한 간단한 팁이다. 설정 방법은? 크로스브라우징을 염두에 둔 가장 좋은 파비콘 설정방법은 웹서비스 디렉토리의 루트에 favicon.ico 라는 이름으로 파비콘 파일을 위치시키는 것이다. 만약에 루트 디렉토리에 favicon.ico 파일을 위치시키지 않고 서브디렉토리에 위치할 경우에는 아래의 구문처럼 이미지 경로를 알려주어야 한다(head에 작성). 파일의 크기와 종류 16x16 과 32x32 의 크기를 가진 아이콘파일을 준비하도록 한다. 아이콘파일은 여러개의 사이즈에 대응하도록 만들어 지니 하나의 파일에 이를 수용할 수 있다. 만약에 png 등의 ..
기존 작성물 2013. 12. 11. 18:48

Normalize.css - CSS 초기화

해당 글은 Normalize.css - CSS 초기화로 이동되어 새로 작성되었습니다. 이동 해주세요. 웹 브라우저의 기본 속성값들을 초기화 시키는 CSS 코드 모음중에 하나로 가장 유명한 노멀라이즈입니다. 버전에 따라 조금씩 상이하니 유념하세요. 홈페이지 : http://necolas.github.io/normalize.css/ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * HTML5에 새로 추가된 요소들을 블럭으로 지..
기존 작성물 2013. 12. 10. 19:21

케이블과 리피터, 허브

컴퓨터에서 송신된 패킷은 허브나 라우터라는 중계 장치에 의해 중계되어 목적지를 향해 나아간다. 중계 장치가 중계 동작을 할 때에는 데이터 부분을 보지 않고 패킷을 중계하므로, 데이터의 내용이나 TCP 프로토콜 제어 정보의 내용이 패킷을 운반하는 동작에는 영향을 미치지 않는다. LAN 케이블의 특징 LAN 어댑터에서 전기 신호로 형태를 바꾼 패킷은 RJ-45 커넥터를 통해 트위스트 페어 케이블(꼰 선쌍)로 전달된다. 송출한 신호는 그대로의 모습으로 허브에 도착하는 것이 아니라 허브에 도착할 때는 신호가 약해져 파형이 뭉그러지거나 잡음으로 인해 왜곡되기도 한다. 잡음의 원인은 케이블의 주위에서 발생하는 전자파이다. 전자파가 금속 등의 도전체에 닿으면 그 안에 전류가 발생한다는 성질 때문에 케이블의 주위에 전..
네트워크 2013. 12. 5. 10:01

프로토콜 스택에 메시지 송신을 의뢰

IP 주소를 조사했으면 IP 주소의 웹 서버에 메시지를 송신하도록 OS의 내부에 있는 프로토콜 스택에 의뢰할 차례다. 데이터 송수신 동작의 개요 OS 내부의 프로토콜 스택에 메시지 송신 동작을 의뢰할 때는 Socket 라이브러리 프로그램 부품을 결정된 순번대로 호출한다. Socket 라이브러리를 이용한 데이터 송수신 동작을 이미지로 나타내보면 아래와 같다. 데이터를 송수신하는 컴퓨터 사이에 데이터의 통로 같은 것이 있고, 이것을 통해 데이터가 흐르면서 상대측에 도착하게 된다. 송수신 동작을 하기 전에 송수신하는 양자 사이를 연결하는 동작이 필요하게 되며 이 데이터의 출입구를 소켓이라고 부르며 이 소켓을 우선적으로 만들어야 한다. 실제로는 서버측에서 소켓을 만들고, 소켓에 클라이언트가 연결되기를 기다리고 ..
네트워크 2013. 12. 3. 17:01

TCP/IP, Socket 라이브러리, 리졸버

HTTP의 메시지를 만들고 웹 서버에 송신할때 이를 OS에 의뢰하여 송신하게 되는데, 이때 URL 안에 쓰여있는 서버의 도메인명에서 IP 주소를 조사해야 한다. OS에 송신을 의뢰할 때는 도메인명이 아니라 IP주소로 메시지를 받을 상대를 지정해야 하기 때문이다. TCP/IP 인터넷이나 사내 LAN은 TCP/IP의 개념에 기초하여 만들어졌다. TCP/IP네트워크는 작은 서브넷을 라우터로 연결하여 전체 네트워크를 완성한다. 서브넷은 우리의 주소 체계로는 '삼성동' 같은 동의 단위로 볼 수 있고, '삼성동 22번지'와 같이 번지에 해당하는 번호를 컴퓨터에 할당한 것이 네트워크 주소이다. 이 동에 해당하는 번호를 네트워크 번호라 하고, 번지에 해당하는 번호를 호스트 번호라 하며, 이 두 주소를 합쳐서 IP 주소..
네트워크 2013. 12. 3. 14:52

HTTP 리퀘스트 메시지가 작성되는 과정

우리가 사용하는 인터넷은 브라우저에 URL 주소를 입력하는 순간부터 시작된다. 이때 브라우저에서 웹 서버에 요청하게 되는 HTTP 리퀘스트 메시지가 생성되는 과정을 좀더 세심히 들여다 보도록 하자. 1. 브라우저에 URL 입력 기본적으로 사용하는 http: 프로토콜 이외에도 ftp:, file:, mailto: 등의 프로토콜 모두 웹 브라우저에서 사용 가능한 프로토콜이다. HTTP 프로토콜로 웹 서버에 액세스하는 경우 http://user:password@www.uzuro.com:80/wordpress/index.html http://사용자명(생략가능):패스워드(생략가능)@웹서버의 도메인명:포트번호(생략가능)/파일의 경로명 FTP 프로토콜로 파일을 다운로드하거나 업로드하는 경우 ftp://user:pas..
네트워크 2013. 12. 2. 21:26

네트워크 개요

웹 브라우저에서 웹 서버까지의 경로를 간단히 시각화 해보면 아래와 같다. 디지털 데이터는 작은 덩어리로 분할하여 '패킷'이라는 그릇에 넣어 운반된다. 패킷에는 수신처 등의 제어 정보가 맨 앞에 기록되어 있으며, 다수의 스위치나 라우터가 연대하여 이 제어 정보를 보면서 이것은 이쪽, 저것은 저쪽이라는 식으로 분할하면서 목적지에 가깝게 패킷을 운반한다. 웹 브라우저 사용자가 PC에서 브라우저에 URL을 입력하면 (ex. www.uzuro.com), 브라우저는 결정된 규칙에 따라 URL의 의미를 조사한 후 그 의미에 따라 리퀘스트 메시지를 만든다. 위의 경우 www.uzuro.com/index.html이라는 파일에 저장된 페이지의 데이터를 요청하는 리퀘스트 메시지를 만들고, 이것을 웹 서버에 보내게 된다. 이..
네트워크 2013. 12. 1. 19:03

윈도우 순정 ISO 판별법

인터넷에 떠돌아다니는 윈도우 iso 파일들을 구했을때, 이 파일들이 마이크로소프트에서 배포하는 원본 그대로인지, 누군가의 손을 타 수정된 버전인지 구별해야 하는 경우가 종종 생깁니다. 윈도우 뿐만 아니라 일반 유틸리티도 배포할때 그 파일의 Hash 값을 적어두곤 하는데, 이 또한 웹상에서 떠돌아다니는 파일들이 순정인지 아닌지 구별하는 판독의 기준이 됩니다. 윈도우 순정 ISO 해시값 알아내기 윈도우 ISO 파일에 대한 정보는 마이크로소프트의 테크넷이나 MSDN에서 찾아볼 수 있다. MSDN : http://msdn.microsoft.com/ko-kr/subscriptions/downloads 테크넷 : http://technet.microsoft.com/ko-kr/subscriptions/download..
윈도우즈/Windows 일반 2013. 11. 29. 11:11