Web/Frontend
HTML - Emmet 사용법
강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인 공식 문서 https://docs.emmet.io/abbreviations/syntax/ Abbreviations Syntax Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predef docs.emmet.io
Ajax 4 - HTTP 헤더
HTTP 요청 헤더 HTTP 헤더 클라이언트와 서버 사이에 이루어지는 HTTP 요청과 응답은 HTTP 헤더를 사용하여 수행됩니다. HTTP 헤더는 클라이언트와 서버가 서로에게 전달해야 할 다양한 종류의 데이터를 포함할 수 있습니다. 다음 예제는 HTTP 요청 헤더의 예제입니다. Accept: */* Referer: http://codingsam.com/examples/tryit/tryhtml.php?filename=ajax_header_request_01 Accept-Language: ko-KR Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko Host: ..
Ajax 3 - 서버와의 통신(XMLHttpRequest, GET, POST)
XMLHttpRequest 객체 XMLHttpRequest 객체 Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체입니다. Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다. 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다. XMLHttpRequest 객체의 역사 비동기식 통신 방식인 XMLHttp는 처음으로 익스플로러5 버전에서 ActiveXObject라는 객체를 사용하여 구현됩니다. 그 후에 모질라와 사파리에서 XMLHttpRequest라는 이름으로 도입하여 널리 사용되기 시작합니다. 초기의 XMLHttpRequest 객체는 W3C 표준이 아니었기 때문에 웹 브라우저마다 구현상..
Ajax 2 - DOM과 노드
DOM 문서 객체 모델(DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. Ajax에서는 이러한 DOM을 이용하여 웹 페이지의 일부 요소만을 변경할 수 있습니다. 따라서 Ajax를 배우기 전에 DOM에 대한 기본적인 사항을 알아야만 합니다. DOM 요소의 선택 자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다. DOM 요소를 선택하는 방법은 다음과 같습니다. 1. 태그 이름(tag name)을 이용한 선택 2. 아이디(id)를 이용한 선택 3. 클래스(class)를 이용한 선..
Ajax 1 - Ajax 기초
Ajax 개요 Ajax Ajax는 그 자체가 별도의 새로운 언어는 아닙니다. HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줍니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. Ajax(Asynchronous JavaScript and XML) 이 단락에 다른 텍스트를 불러와보죠! 데이터 불러오기! Ajax 기초 Ajax란? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발..
XML 3 - XML 요소, 속성, 네임스페이스
XML 요소 XML 문서 구조 XML 문서는 크게 XML 프롤로그 부분과 XML 요소 부분으로 나눌 수 있습니다. XML 요소 부분은 하나 이상의 XML 요소로 구성됩니다. XML 요소 XML 요소란 XML 문서를 구성하는 하나의 구성 요소로 정의할 수 있습니다. 각각의 XML 요소는 하나 이상의 다른 요소를 포함할 수 있습니다. 또한, 텍스트, 속성, 미디어 객체나 경우에 따라 이들 전부를 포함할 수도 있습니다. Java Cpp PHP ASP 위의 예제에서 , , , 요소는 각각 자신만의 텍스트를 가집니다. 요소와 요소는 다른 요소들을 포함합니다. 또한, 요소는 category라는 속성을 가집니다. XML 요소 문법 XML 요소란 시작 태그부터 종료 태그까지의 모든 것을 가리킵니다. XML 요소는 다음..
XML 2 - XML 문법 및 구성 요소
XML 문법 XML 선언 XML 문서는 맨 첫 줄에 태그를 사용하여 XML 문서임을 명시해야 합니다. 이것을 XML 프롤로그(prolog)라고 하며, 이때 사용되는 태그의 이름은 소문자 xml로만 사용해야 합니다. XML 프롤로그의 문법은 다음과 같습니다. version 속성에는 XML 문서에 사용된 XML의 버전을 명시합니다. encoding 속성에는 XML 문서의 문자셋(character set)을 명시하며, 기본값은 UTF-8로 설정됩니다. standalone 속성은 XML 문서가 외부 DTD(Document Type Definition)와 같은 외부 소스의 데이터에 의존하고 있는 문서인지 아닌지를 XML 파서(parser)에 알려주는 역할을 합니다. 이 속성의 기본값은 no이며, yes로 설정하면..
XML 1 - XML 개요 및 구조
XML XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어입니다. XML이란? XML은 EXtensible Markup Language의 약자이며, 1998년에 W3C 표준 권고안에 포함되었습니다. XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다. 이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어 있습니다. 그러나 XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌습니다. 또한, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있습니다. XML의 특징 XML의 중요한 특징은 다음과 같습니다. 1. XML은..