DOM(Docuemnt Object Model)은 document 내의 노드(Node) 탐색을 위해 몇 가지 편의 기능을 제공합니다. 오늘은 그중에서 다른 노드에 대 참조를 사용하는 부분에 대해 알아보려고 합니다. 여기서 중요한 점은 참조를 기반한 DOM의 탐색은 element 뿐만 아니라 text와 comment를 포함한다는 사실입니다. 오해하기 쉬운 DOM 노드 탐색의 사실과 불편하지 않게 노드 탐색을 할 수 있는 방법에 대해 알아보겠습니다. 불편한 DOM의 노드 탐색 결과 오해까지는 아니지만 처음 DOM의 노드 탐색을 사용하는 경우에 이상하게 여길 수 있는 부분이 있습니다. 바로 참조값을 이용한 접근인데요. 참조를 사용한 대표적으로는 parentNode, firstChild, lastChild, n..
이번에는 HTML5를 기준으로 간단하게 회원가입 양식 템플릿을 만들어보겠습니다. 이전에 부트스트랩을 사용해서 회원가입 화면을 만든 적이 있는데요. 부트스트랩을 사용하지 않고 순수하게 HTML5만 사용해서 화면을 만들어 보는 것도 좋을 것 같아 이 글을 작성하게 되었습니다. 일반적으로 회원가입 양식에는 , , , , , 등 여러 가지 태그를 이용합니다. 하지만 이 글은 기본편으로 처음 회원가입 화면 개발하는 분이 쉽게 개발을 해볼 수 있도록 간단하게 , 만 사용해보았습니다. 시작하기 HTML5라는 단어를 써서 말은 거창해 보이지만 HTM5라고 해서 HTML과 다른 부분은 거의 없습니다. ". html" 파일의 선언 부만 위와 같은 구문을 명시하면 됩니다. HTML과 HTML5의 자세한 면면을 살펴보면 선언..
이번에는 HTML의 element 중에서 form에 대해 알아보려고 합니다. form은 화면을 개발할 때 div만큼 많이 사용하는 요소 중에 하나입니다. 바로 데이터를 전송하는 데에 있어서 form이 가진 역할이 있기 때문인데요. form이 가진 의미(Semantic)를 생각해본다면 당연한 이야기입니다. 그러면 본격적으로 form을 이해하고 사용하는 방법에 대해 알아보도록 하겠습니다. HTML의 일반 요소와 Form의 차이 Name: E-mail: Message: HTML의 form은 무엇일까요? 위에서 제시한 코드를 보았을 때 HTML에서 사용되는 기존 요소들과 form의 차이점은 없습니다. 오히려 사용법이 다르지 않기 때문에 차이를 알 수가 없습니다. HTML의 일반 요소와 form의 가장 큰 차이점..
이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을 만들어보겠습니다. 시작하기 회원가입 화면은 프로젝트를 시작하면 필수적으로 개발하는 화면 중에 하나 입니다. 가장 기본적인 화면이지만 입력 값의 유효성 검사부터 데이터를 서버로 전송하는 일까지 처리하기 때문에 많은 기능을 요구하는 화면 입니다. 이 글에서는 HTML의 기초적인 부분을 다루며, 서버와 통신하는 부분까지는 이야기 하지 않습니다. 화면을 개발하는 도구로는 HTML, CSS 만을 사용하며, CSS의 경우 Boostrap의 스타일을 활용합니다. Boostrap은 twitter에서 만든 UI 라..
시작하기 이 글은 이전에 작성한 IT 개발자 국비지원 어떤가요?이라는 글을 쓰다가 웹 개발자가 되는 방법에 대해서도 작성해놓으면 좋을 것 같다고 생각해 작성하게 된 글입니다. 간혹 들리는 학원에서 가르쳐주는 웹 개발자 과정은 제가 처음 프로그래밍을 배울 때와 기술 수준이 거의 똑같아서 당황스럽습니다. 여전히 SVN을 가르쳐주고 그마저도 커밋과 체크아웃만 사용하다는 이야기에는 헛웃음이 나왔습니다. 그걸 가르쳐주는 사람에게 따져서 물어보고 싶을 정도로요. 혹시 지금 그런 학원에서 프로그래밍을 배우고 계신다면 다른 학원을 다시 알아보시는 게 좋을 수 있습니다. 이런저런 이유로 간단하게라도 웹 개발자가 실무 개발에서 어떤 기술들을 필요로 하는지 조금이라도 알고 계시면 학원이든 어디에서든 웹 개발을 배우는데 도움..
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.
