웹코딩 검색 결과

해당 글 125건

HTML 기초(개요, 역사, 요소)

웹(Web) 웹(Web)은 전 세계에 흩어져 있는 정보 자원을 연결하는 네트워크(World Wide Web)을 말합니다. 이 네트워크는 컴퓨터와 인터넷을 이용하여 접속할 수 있고 거미줄(web)처럼 복잡하게 얽혀져 있습니다. 사람들이 웹을 통해 정보자원에 접근하여 이용할 수 있는 것은 다음과 같은 메커니즘을 갖고 있기 때문인데 이것을 웹의 3대 요소라고 부릅니다. URI : 정보자원의 위치를 표시하기 위한 표기법 HTTP : 위치 표시가 있는 정보자원에 접근하기 위한 통신 규약 HTML : 정보자원과 정보자원 사이를 오가기 위한 하이퍼텍스트 HTML이란? HTML(HyperText Markup Language)은 World Wide Web(www)을 위한 마크업 언어이며, 제목이나 문단, 표, 꼬리글 및..
웹코딩/HTML 2015. 4. 17. 03:16

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

[HTML5] 9장 추가된 DOM과 자바스크립트

MIME 타입이나 프로토콜에 웹 애플리케이션 연결 HTML5부터 window.navigator 객체에 추가된 registerProtocolHandler() 메서드와 registerContentHandler() 메서드를 사용하면 임의의 프로토콜이나 MIME 타입에 대해 웹 애플리케이션을 연결할 수 있다. 예를 들어 'fax'라는 프로토콜을 팩스 웹 서비스에 연결해두면 이후 사용자가 'fax:'로 시작하는 URL에 접근할 때 팩스 웹 서비스가 처리를 대신하게 된다. //첫 번째 인수에는 웹 애플리케이션에 연결하고 싶은 URL 스키마를 지정 window.navigator.registerProtocolHandler(scheme, url, title) //MIME 타입 지정시에 대,소문자 구별하지 않아도 된다 w..
웹코딩/HTML 2013. 2. 12. 00:00

[HTML5] 8장 그밖의 추가된 속성

HTML5에서는 기존의 태그들에 유용한 속성들을 추가시키거나 삭제시켰는데 그 중에 몇가지를 살펴봅니다. IFRAME 요소는 콘텐츠 삽입에 많이 이용되는데, 새로운 속성 추가로 인해 보안성을 높였다. sandbox 속성 새로 추가된 sandbox 속성을 iframe에 지정하면 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다. 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능해져도) 통신할 수 없음 플러그인 실행금지 자바스크립트 사용금지 폼 요소에 의한 페이지 호출금지 위의 제한이 너무 엄격하여 iframe 안의 페이지가 동작하지 않을때는 sandbox 속성에 다음과 같은 값을 지정하여 샌드박스 제한을 완화..
웹코딩/HTML 2013. 2. 11. 00:00

[HTML5] 7장 추가된 글로벌 속성

HTML5에서 새로 추가된 속성들 중에 애플리케이션 제작에 편리한 몇가지 기능을 구현해 놓았습니다. CONTENTEDITABLE 이 속성을 가지고 있는 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다. 박스 텍스트 수정 브라우저에서 수정해 보세요 활용 이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다. 브라우저에서 수정해 보세요 DOM속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집 가능한지 확인할 수 있다. 또 자바스크립트 사용해서 document.designMode='on' 이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다. 마지막으로 사용자가 선택한(활..
웹코딩/HTML 2013. 2. 10. 00:00

[HTML5] 6-2장 멀티미디어 태그

HTML5에서 추가된 멀티미디어 요소인 video와 audio, 그리고 대체요소(fallback)로 사용될 embed에 대해서 알아봅니다. 현재에도 웹에서 동영상을 시청하는데 지장이 없다고 생각할 수 있습니다만 그 안을 유심히 들여다보면 각종 플러그인과 ActiveX라는 불편함과 보안위협에 노출되어 있습니다. 그런 이유로 브라우저 자체에서 동영상을 재생하게끔 멀티미디어 태그가 필요하게 된 것이죠. VIDEO 관련 사양을 알아보기에 앞서 그 이해를 높여봅시다. 비디오 파일 포멧 종류와 이해 'AVI 파일'이나 'MP4 파일'이 비디오 파일이라고 생각하겠지만 실제로 'AVI'나 'MP4'는 비디오 컨테이너 포맷이다. ZIP 파일이 종류에 상관없이 파일을 담을 수 있는 것과 마찬가지로 비디오 컨테이너 포맷은 ..
웹코딩/HTML 2013. 2. 9. 23:30

[HTML5] 6-1장 새로운 태그

새로운 태그가 생겼지만 해당 태그들은 구조만 이룰뿐, 기능은 제공되지 않기에 자바스크립트나 스타일시트로 구현은 따로 적용해야 합니다. 간단한 기능들은 브라우저 자체에서 제공했으면 하는 바램이 생기네요. 의미를 부여받은 특별한 텍스트 조금 더 디테일하고 많이 사용될 일종의 템플릿과도 같은 의미있는 요소가 많이 추가되었다. dialog 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 에 말하는 사람 에 내용을 작성한다. 나 아!, 이런 오늘 작업한 걸 저장하지 않고 종료했네~ 수정 이런, stupid! figure 이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며..
웹코딩/HTML 2013. 2. 9. 00:00

[HTML5] 5장 문서 구조

HTML5에서는 눈에는 보이지 않지만 문서의 구조를 나누는 요소들이 존재합니다. 이를 활용하여 마치 책의 목차와 같은 순서를 만들 수 있어 한 눈에 구조를 파악할 수 있게 됩니다. 섹션화 콘텐츠(sectioning contents) 해당하는 요소 : , , , 헤더와 푸터 범위내에서 콘텐츠를 그룹화하는 모든 섹션형 태그, 모든 섹션형 콘텐츠는 헤더와 아웃라인을 가지게 된다. 구조를 나누는 의미 요소 섹션 제목 섹션에는 각각 하나의 제목을 지정할 수 있으며 섹션 내부에 제목이 2개 이상이 있을 경우, 암묵적으로 해당 섹션이 나누어 지거나 하위 섹션을 만든다. HTML5에서 크게 바뀐것 중 하나가 섹션이 다르면 같은 수준의 제목을 사용할 수 있다는 것이다. hgroup hgroup 요소는 HTML5 사양에서..
웹코딩/HTML 2013. 2. 8. 00:00

[HTML5] 4-2장 HTML5 기본 템플릿

HTML5의 템플릿은 이전에 비해 매우 간소화 되었습니다. 기존의 방식이 에 의존하여 콘텐츠를 구조화 시켰다면 HTML5에서는 구조화를 위한 요소들이 등장하여 좀 더 시멘틱한 웹이 가능해졌습니다. WebDir navigation 메뉴1 메뉴2 콘텐츠 제목 콘텐츠 내용 트위터 트위터내용 &copy unclepapa / unclepapa@mail.com http-equiv="X-UA-Compatible"에 대한 설명은 아래 링크로 대신합니다. [HTML/XHTML] - X-UA-Compatible 위 메타 태그를 간단히 설명하자면 IE에서만 해석되며 IE=edge는 최신 버전으로 렌더링하라는 것입니다. name="viewport"는 스마트폰과 같은 다양한 플랫폼에서 보여지게 될 화면의 크기를 조정하는 태그입..
웹코딩/HTML 2013. 2. 7. 01:00

[HTML5] 4-1장 구조를 위한 태그

HTML5에서는 구조를 위한 태그가 새로 생겼습니다. 기존에는 를 이용해서 내용적으로 구분하였지만, 사실 이는 기계가 이해할 수 있는 구조가 아니였지요. 아래에서 소개하는 구조 태그들을 사용하는 웹 문서들이 늘어난다면 다양한 애플리케이션이 등장할 수 있을겁니다. SECTION 요소는 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 다른 영역을 구분짓거나 하나의 글을 부분으로 나누기도 한다. 주로 제목과(h) 함께 사용한다. 스타일링이나 스크립트를 위해서 감싸는 요소가 필요하다면 문서 구조상 특별한 의미가 없는 를 사용해야 한다. 항상 section은 연관된 콘텐츠를 위해 사용하도록 하자. 오늘의 할일 아침에 할일 밥먹고 운동하기 점심에 할..
웹코딩/HTML 2013. 2. 7. 00:00

[HTML5] 3장 HTML5 소개 및 특징

HTML5는 최신의 마크업 언어이며, 새로운 기능과 기존 기능에 대한 개선사항, 그리고 스크립팅 기반 API를 포함하고 있습니다. HTML5 특징 하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다). 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다. text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공한다. 새로운 웹 폼 속성들을 이용하여 폼 검증과 디자인이 간소화 되었다. 오류를 쉽게 처리할 수 있게끔 몇 가지 기본 원칙을 바탕으로 설계돼 있다. 플러그인 없이도 비디오와 오디오를 비롯한 ..
웹코딩/HTML 2013. 2. 6. 00:00