FEDev Story

강아지 - 어떤 강아지를 기르세요? 영화 - 최근에 본 영화가 뭐예요? 음악 - 어느 사이트에 음악을 들으세요? 여행 - 제일 좋았던 여행지가 어디세요? 취미 - 앞으로 무엇을 배우고 싶으세요? 음식 - 맛집을 많이 아세요? 버킷리스트 - 당신의 버킷리스트는 무엇인가요? 건강 - 건강하시죠? 아픈적은 없으시죠? 미래 - 미래에 대해 생각해 본적 있으세요? 직업 - 지금 하는 일에 만족하세요? 주말 - 주말에 뭐 하셨어요? 게임 - 게임은 잘 하세요? 쇼핑 - 어디서 주로 쇼핑하세요? 컴퓨터 - 컴퓨터 얼마 주고 샀어요? 오늘업무 - 오늘 할일 많으세요? 주간업무 - 지난 한주 동안 무슨 일 했어요? 퇴근후 - 퇴근후에 약속있으세요? 없으면 밥이나 먹고 갈까? 출근전 - 몇시에 출근하세요? 노후준비 - 미..

안녕하세요. 이번 시간에는 HTML 엔티티에 대해서 알아보겠습니다!혹시 HTML 소스를 보다가 나 를 보신 적이 있나요? 이 문자들은 HTML 파일이 깨져서 나타나는 문자가 아닙니다. 바로 HTML 엔티티입니다.HTML에서 태그를 표현할 때 다음과 같이 하곤 하죠.zero만약 태그 안의 내용물에

HTML 예약 문자나 특수문자를 쓸때 사용하는 엔티티 코드이다.http://entitycode.com/ FeaturedCommonCurrencyMathDirectionMiscAboutCharacterEntity NameEntity NumberDescriptionWhy Is This Featured?©©©CopyrightAlmost Every Website Uses The Copyright Symbol||Vertical BarThe Vertical Bar Symbol Is Used To Separate Menu Items Or Navigation Links···Medium List DotSimilar To The Vertical Bar, The Medium List Dot Is Another Option ..

Git에 대한 기본적인 사용법은 1부에서 알아보았다. 하지만 git은 사용법만 안다고 잘 사용할 수 있는 도구는 아니다. 어떤 식으로 사용하느냐에 따라서 그 효용성이 크게 달라지기 때문이다. 지금부터 git이 관리하는 핵심 대상인 commit을 잘 할 수 있도록 하는 것과, '형상관리'의 best practice라고 볼 수 있는 git-flow의 브랜치 전략을 이해하여 각자의 프로젝트 상황에 최적화 된 브랜칭 모델을 도출할 수 있도록 하는데 중점을 두고 차근차근 살펴보도록 하겠다.Commit 전략이미 1부에서 commit이 무엇인가에 대해 살펴보았다. 까먹었을 수도 있으니 다시 짚고 넘어가자면, 'staged 상태에 있는 변경 내용들을 repository에 저장하는 것'이다. 하지만 이것은 사실 git을..

세상이 복잡해짐에 따라 필요로 하는 시스템도 점점 복잡해졌다. 시스템이 복잡해질수록, 여러 사람이 어떻게 잘 나누어 개발할 것인지 고민하게 되었고, 효율적인 협업과 버전관리에 대한 수많은 solution이 제시되었다. 그 중 세계에서 가장 많이 사용되는 solution이 단연 ‘git’이라는 사실에 의심을 갖는 사람은 없을 것이다. git의 단점에 대해 이야기하는 사람도 있겠지만, 세계에서 가장 많은 사람들이 사용한다는 것만으로도 공신력 있는 유용한 도구라 생각해도 되지 않을까?하지만 아직도 git의 진입장벽을 쉽게 넘지 못하여 git을 유용한 도구가 아닌 장애물로 여기는 사람들이 적지 않다. 이 글에서는 git을 사용해보려 했지만 그 장벽에 부딪혀 포기해버린 사람들을 위해, git이 어렵게 느껴지도록 ..

인라인 편집기를 제작하는 일은 수고롭습니다. input이나 textarea 필드를 이용해 편집될 요소를 변경하는 작업부터 시작합니다. 사용자 경험이 자연스럽게 이어지도록 CSS를 부분적으로 사용해 변경된 요소 스타일을 변경 전의 스타일과 일치시켜야 합니다. 사용자가 편집을 마쳤으면, 다시 변경 전의 콘텐츠 전부를 복사한 후에 요소들을 바꿔주어야 하지요.contentEditable 속성은 이 작업을 엄청 수월하게 해줍니다. 여러분이 할 일은 이 속성값을 true로 설정해 주는 것입니다. 그러면 표준 HTML5 요소들이 편집 가능한 상태가 됩니다. 이 튜토리얼에서는 이 기능을 기반으로 해서 인라인 리치 텍스트 편집기를 제작해 보겠습니다.기본 사항이 속성은 세 가지 적당한 값을 취합니다. 그 세 가지는 tru..

document.execCommand('속성'); HTML5 부터 지원되는 document.execCommand() 함수 입니다.현재 선택영역의 텍스트를 인자로 받은 값을 통해 변환시킵니다.(여기서 선택 영역이란 마우스로 텍스트를 드래그했을 때의 파란 박스 영역을 말합니다.) 123456789101112131415document.execCommand('Italic') // 기울이기document.execCommand('Underline') // 밑줄document.execCommand('StrikeThrough') // 중간줄document.execCommand('Cut') // 자르기document.execCommand('Copy') // 복사하기document.execCommand('Paste') /..

1. $(document).ready()- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨 2. $(window).load()- DOM의 standard 이벤트- html의 로딩이 끝난 후에 시작- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생..

설명현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.문법var node = document.importNode(externalNode, deep); node문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null입니다.externalNode다른 문서에서 가져올 노드입니다.deep불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.Note: DOM4 스펙 (Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)에서 적용되어 있습니다)에서, deep은 선택적 인자입니다. 만약 해당 속성을..

출처 : https://www.zerocho.com/category/HTML/post/59155228a22a5d001827ea5d 안녕하세요. HTML5에 도입된 자바스크립트 API 첫 시간으로 Geolocation을 선정했습니다. 요즘 핸드폰 앱들을 보면 GPS 정보를 요구하는 앱들이 많죠. GPS 정보를 맞아서 자신 주변의 맛집이나 정보들을 찾아줍니다. 이제 웹에서도 GPS 정보를 가져올 수 있습니다. 보통 위치 정보는 핸드폰 GPS, IP주소나, WIFI, 기지국 위치 등을 사용해 찾아냅니다. 웹에서는 살짝 정확성이 떨어질 때도 있지만 GPS를 사용할 수 있다는 것 자체가 행운입니다.HTML 강좌이지만 지난 강좌들과는 다르게 자바스크립트가 들어가기 때문에 자바스크립트를 어느 정도 알고 계셔야 진행할..

웹 애플리케이션 구동 과정 1. URL entered : 사용자가 웹브라우저에서 사이트 주소를 입력한다. 2. DNS Lookup : DNS를 이용하여 사이트 주소에 해당되는 Server IP를 접근한다. 3. Socket Connection :Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결. 4. HTTP Request : Client에서 HTTP Header와 데이터가 서버로 전송 5. Content Download : 해당 요청이 Server에 도달하면 사용자가 원하는 문서를 다시 웹브라우저에 전송한다. 6. Browser Rendering : 브라우저의 렌더링 엔진이 해당 문서를 다음과 같은 순서로 파싱한다. HTML을 DOM(Document Object Model)으로 변..

유명함수는 재귀를 만드는 데 편리하다. 다음은 깊이를 가진 배열을 펴 주는 flatten 함수다. 재귀, 유명 함수, 괄호없는 즉시 실행 등의 기법이 사용되었다. function flatten(arr) { return function f(arr, new_arr) { // (1) arr.forEach(function(v) { Array.isArray(v) ? f(v, new_arr) : new_arr.push(v); // (3) }); return new_arr; }(arr, []); // (2) } flatten([1, [2], [3, 4]]); // [1, 2, 3, 4] flatten([1, [2], [[3], 4]]); // [1, 2, 3, 4] flatten([1, [[2], [[3], [[4]..

HTML 요소는 속성(attribute)을 갖고 있으며, 자바스크립트로 이 속성을 액세스할 수 있다. /** * Accessing attributes */ el.setAttribute( "tabindex", "-1" ); if ( el.hasAttribute( "tabindex" ) ) {} el.getAttribute( "tabindex" ); el.removeAttribute( "tabindex" ); 요소의 속성은 HTML에서 정의되지만, 프로퍼티(property)는 DOM에서 정의된다. 이것이 약간의 차이를 만든다. 예를 들어, 속성과 프로퍼티(el.value)의 초기값이 같은 input 요소가 있다고 가정해보자. 사용자 또는 스크립트가 값을 변경하면 프로퍼티(property)는 영향을 받지만, ..

el.classList 스타일이 필요할 때 el.classList를 사용한다. www.jsfiddle.net/1m33vjcv/4/embed/ 위 예제에서 toggle 메서도는 두번째 인수로 전달되는 부울 값에 따라 지정된 클래스를 추가하거나 제거한다. 명시적 스타일 el.style 속성을 사용해 요소에 동적인 스타일 정보를 읽거나 설정할 수 있다. 또는 cssText를 사용해 스타일을 한번에 지정할 수 있다. www.jsfiddle.net/9n6Lp7b5/1/embed/ window.getComputedStyle window.getComputedStyle는 상속된(계산된) 스타일을 반환한다. /** * Getting computed styles */ var el = document.querySelecto..

동적으로 DOM 트리에 새로운 요소 삽입하기 - el.innerHTML로 HTML 생성 /** * Insert elements into DOM #2 */ var target = document.getElementById( "target" ); target.innerHTML = ""; - 노드 생성후 추가 var target = document.getElementById("target"), div = document.createElement("div"); target.appendChild(div); 문제점 el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다. 최적화 유사한 요소를..

DOM 탐색 방법 ID로 요소 검색 (document.getElementById) 태그 이름으로 검색 (document.getElementByTagName) CSS 선택자로 요소 검색 (document.querySelector) Lorem ipsum 선택자는 하나 이상의 타입(태그) 선택자와 클래스 선택자, ID 선택자, 속성 선택자 또는 의사 클래스 선택자로 매우 다양한 조합이 가능하기 때문에 자바스크립트에서 HTML 요소를 바인딩하는 것은 쉽지 않다. 따라서 data-* 속성 선택자를 사용할 것을 추천한다. Lorem ipsum 이 방법은 HTML 구조에서 자유로우며 CSS 클래스 독립적이기 때문에 안전하게 CSS를 리팩토링할 수 있다. 또한 문서마다 고유한 값을 가지는 ID에 한정되지도 않는다. q..

스크린의 크기는 모니터의 크기와 브라우저 뷰포트의 크기가 있다. 이를 알아내는 방법은 아래와 같다. (실행) window.inner*은 뷰포트의 크기를 나타내고, screen.*은 스크린의 크기, 즉, 모니터의 해상도를 나타낸다.

그럼 문서의 스크롤 값을 변경하는 것은 어떻게 하는 것일까? window.scrollTo(x, y)를 이용하면 된다. (실행) 아래 코드는 버튼을 클릭하면 문서의 스크롤을 아래로 1000px 이동시킨다. Coding

요소의 위치를 생각할 때는 사실 조금 더 복잡해진다. 문서가 브라우저의 크기보다 큰 경우는 스크롤이 만들어지는데 스크롤에 따라서 위치의 값이 달라지기 때문이다. 이를 이해하기 위해서는 우선 viewport에 대한 이해가 선행되어야 한다.viewport의 좌표위의 그림처럼 뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미한다. 이에 따라서 문서의 좌표가 있고 뷰포트의 좌표가 있다. 위에서 살펴본 getBoundingClientRect는 viewport의 좌표를 사용한다. 아래 예제를 실행해보면 1초에 한번씩 getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 출력된다. (실행) Coding 이를 통해서 알 수 있는 것은 getBoundingClientRe..

우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. (실행) Coding 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect이다. 이를 콘솔에서 실행한 결과는 아래와 같다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 된다는 것을 알 수 있다. getBoundingClientRect의 width 값을 IE는 제공하지 않는다.만약 엘리먼트가 중첩되어 있다면 어떻게 될까? 위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBou..

텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.appendData() - 텍스트 노드의 끝에 파라미터로 전달된 데이타를 추가한다.deleteData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택해 삭제한다.insertData() - 텍스트 노드에서 첫번째 파라미터의 위치에 두번째 파라미터에 전달된 데이타를 삽입한다.replaceData() - 텍스트 노드에서 첫번째 파라미터에서 두번째 파라미터까지 텍스트를 선택해서 세번째 파라미터에 전달된 데이타로 교체한다.substringData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택..

텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 값을 가져오는 두개의 API를 알아본다.nodeValuedata html css JavaScript

소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world 실행결과: Hello world TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"} Hello world 주요기능값텍스트 노드의 값을 가져오는 APIdatanodeValue조작appendData()deleteData()insertData()replaceData()subStringData()생성docuemnt.createTextNode()

소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 주요 API노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.createElement()createTextNode()문서 정보 APItitleURLreferrerlastModified

innerHTMLinnerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTMLouterHTML은 선택한 엘리먼트를 포함해서 처리된다. innerText, outerTextinnerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. insertAdjacentHTML()좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다. target.insertAdjacentHTML('beforebegin', '...'); beforebegin은 target 노드의 앞에 두번째 인자인 H1 노드 객체를 삽입한다..

출처 : 생활코딩 (https://opentutorials.org/course/1375/6701) 노드 추가노드의 추가와 관련된 API들은 아래와 같다.appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.document.createElement(tagname) 엘리먼트 노드를 추가한다.document.createTextNode(data) 텍스트 노드를 추가..

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.)nodeType노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log(name, Node[name]); } 실행결과: ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESS..

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.Node.childNodes 자식노드들을 유사배열에 담아서 리턴한다.Node.firstChild 첫번째 자식노드Node.lastChild 마지막 자식노드Node.nextSibling 다음 형제 노드Node.previousSibling 이전 형제 노드아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM

소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주로 사용하는 노드 객체는 다음과 같다. 문서 노드(Document) - 전체 문서를 가리키는 Document 객체 요소 노드(Element) - HTML 요소를 가리키는 객체 텍스트 노드(CharacterData) - 텍스트를 가리키는 객체 주요기능 Node 객체의 주요한 임무는 아래와 같다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.parentNode - 이 노드의 부모 노..

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.Element.getAttribute(name)Element.setAttribute(name, value)Element.hasAttribute(name);Element.removeAttribute(name); opentutorials 속성과 프로퍼티모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. Hello world setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속..