DOM(Docuemnt Object Model)은 document 내의 노드(Node) 탐색을 위해 몇 가지 편의 기능을 제공합니다. 오늘은 그중에서 다른 노드에 대 참조를 사용하는 부분에 대해 알아보려고 합니다. 여기서 중요한 점은 참조를 기반한 DOM의 탐색은 element 뿐만 아니라 text와 comment를 포함한다는 사실입니다. 오해하기 쉬운 DOM 노드 탐색의 사실과 불편하지 않게 노드 탐색을 할 수 있는 방법에 대해 알아보겠습니다. 불편한 DOM의 노드 탐색 결과 오해까지는 아니지만 처음 DOM의 노드 탐색을 사용하는 경우에 이상하게 여길 수 있는 부분이 있습니다. 바로 참조값을 이용한 접근인데요. 참조를 사용한 대표적으로는 parentNode, firstChild, lastChild, n..
왜 CSS(Cascading Style Sheets)의 버전은 Level 3가 끝일까요? 인터넷 검색을 해도 책을 통해 공부를 하려 해도 CSS3라는 단어는 잘 보이는데 CSS4라는 단어는 찾기가 어렵습니다. 이전에 간단하게 CSS의 정의에 대해 이야기를 한 적이 있는데요. 이번에는 CSS 버전에 대한 이야기를 해보려고 합니다. 앞으로도 CSS4는 존재하지 않는다. 사실 CSS3도 엄밀히 따지면 CSS 2.1에서 확장된 개념으로 CSS 2.1 이후에 공개(published) 된 것들을 이야기합니다. 정확히는 표준 사양을 정의하는 집단(CSSWG)에서 CSS 2.1을 수립하는 과정 중 단일로 정의하는 버전 체계는 좋지 않다는 것을 인지했습니다. CSS 2.1에 버전 3에 해당하는 모듈들을 일부 포함하게 되..
이번에는 HTML5를 기준으로 간단하게 회원가입 양식 템플릿을 만들어보겠습니다. 이전에 부트스트랩을 사용해서 회원가입 화면을 만든 적이 있는데요. 부트스트랩을 사용하지 않고 순수하게 HTML5만 사용해서 화면을 만들어 보는 것도 좋을 것 같아 이 글을 작성하게 되었습니다. 일반적으로 회원가입 양식에는 , , , , , 등 여러 가지 태그를 이용합니다. 하지만 이 글은 기본편으로 처음 회원가입 화면 개발하는 분이 쉽게 개발을 해볼 수 있도록 간단하게 , 만 사용해보았습니다. 시작하기 HTML5라는 단어를 써서 말은 거창해 보이지만 HTM5라고 해서 HTML과 다른 부분은 거의 없습니다. ". html" 파일의 선언 부만 위와 같은 구문을 명시하면 됩니다. HTML과 HTML5의 자세한 면면을 살펴보면 선언..
HTML(Hyper Text Markup Language)를 배울 때 가장 먼저 배우는 태그 중 하나가 바로 태그입니다. 태그는 anchor를 의미하는 태그로 한글로는 닻을 말합니다. 웹에서 태그 쉽게 쓰고 사용되지만, 가진 의미는 결코 가볍지 않은데요. 이번 글에서는 태그가 가지는 역할과 기능에 대해서 알아보도록 하겠습니다. 태그와 href 그리고 닻(anchor) HTML에서 태그가 가진 역할을 설명하기 위해 배와 닻(Anchor)의 그림을 만들어 보았습니다. 사람들은 본인의 상황에 따라 필요하거나 도움이 되는 정보를 찾기 위해 WWW(World Wide Web)라는 무수히 많은 서버가 연결된 네트워크를 돌아다닙니다. 이때 바다 위(네트워크)를 떠다니는 배(사용자)가 정박할 수 있도록 좌표(주소 혹은..
이번에는 HTML의 element 중에서 form에 대해 알아보려고 합니다. form은 화면을 개발할 때 div만큼 많이 사용하는 요소 중에 하나입니다. 바로 데이터를 전송하는 데에 있어서 form이 가진 역할이 있기 때문인데요. form이 가진 의미(Semantic)를 생각해본다면 당연한 이야기입니다. 그러면 본격적으로 form을 이해하고 사용하는 방법에 대해 알아보도록 하겠습니다. HTML의 일반 요소와 Form의 차이 Name: E-mail: Message: HTML의 form은 무엇일까요? 위에서 제시한 코드를 보았을 때 HTML에서 사용되는 기존 요소들과 form의 차이점은 없습니다. 오히려 사용법이 다르지 않기 때문에 차이를 알 수가 없습니다. HTML의 일반 요소와 form의 가장 큰 차이점..
CSS(Cascading Style Sheets)는 워드 프로세서에서 사용하는 스타일 기능을 웹으로 가져온 것입니다. CSS를 사용하면 DOM(Document Object Model)에 스타일(Style)을 적용할 수 있습니다. 정확히는 CSS를 사용하면 HTML 문서에 디자인을 적용할 수 있습니다. CSS는 HTML과 같이 사용되며, HTML에 정의된 태그(Tag)가 보여주는 디자인을 재정의해서 HTML의 시각적 요소를 담당하는 언어입니다. 예를 들어 주제롤 표현하는 이라는 태그를 보여주는 방법은 브라우저(Chrome, Safari, Firefox)가 정의하지만, CSS를 사용하면 이 표현되는 시각적인 정의를 바꿀 수 있습니다. CSS는 태그의 특성을 원하는 대로 변경이 가능합니다. h1 { margi..
반응형으로 웹 화면을 개발하다 보면 모바일에서만 hover 스타일이 적용되지 않게 해야 하는 경우가 발생합니다. 모바일 기기에서 특정 이나 를 터치(클릭)를 했는데 해당 요소를 누르고 있는 것처럼 hover 스타일이 적용되어 있기 때문입니다. hover 스타일이 적용되는 이유 :hover 스타일이 해제되지 않고 지속적으로 적용되는 이슈는 모바일 화면이 아닌 모바일 기기 화면에서 발생하는 문제입니다. 모바일 기기에서만 이런 현상이 일어나는 이유는 모바일 기기가 상호작용 하는 방식 때문입니다. 마우스 커서와 같은 포인터가 DOM의 element 요소 위에 위치하면 적용되는 스타일이 바로 의사(Pseudo) 클래스인 :hover인데, 모바일 기기는 터치(Touch)가 포인터의 역할을 합니다. 즉 모바일 기기 ..
이미지 스프라이트의 정의 스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미합니다. 이미지 스프라이트(Image Sprite)를 사용하면 생기는 장점은 크게 2가지를 이야기할 수 있습니다. 1. 요청을 단 한번 만한다. 브라우저는 화면을 그릴 때 필요한 모든 자원(이미지, CSS, JS 등)을 서버에 요청하고 가져와 사용합니다. 서버에 요청하고 가져오는 작업은 일괄적으로 한 번에 이루어지지 않습니다. 서버에 자원을 요청하는 구문이 사용된 횟수만큼 서버에 자원을 요청합니다. // 서로 다른 아이콘 이미지 3개를 선언하고 사용하는 코드 예를 들어 위와 같은 예제는 서버..
이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을 만들어보겠습니다. 시작하기 회원가입 화면은 프로젝트를 시작하면 필수적으로 개발하는 화면 중에 하나 입니다. 가장 기본적인 화면이지만 입력 값의 유효성 검사부터 데이터를 서버로 전송하는 일까지 처리하기 때문에 많은 기능을 요구하는 화면 입니다. 이 글에서는 HTML의 기초적인 부분을 다루며, 서버와 통신하는 부분까지는 이야기 하지 않습니다. 화면을 개발하는 도구로는 HTML, CSS 만을 사용하며, CSS의 경우 Boostrap의 스타일을 활용합니다. Boostrap은 twitter에서 만든 UI 라..
오늘은 아직은 초안(Working Draft)이지만 알아두면 좋은 가상 클래스(pseudo-class)인 :where()와 :is()에 대해서 알아볼까 합니다. :where(), :is()는 CSS Selectors Level 4에 포함된 가상 클래스입니다. :where() 반복 선택을 줄이자 article h2, article h3, article p { color: blue; } CSS Selector를 사용해 article 요소의 h2, h3, p 문자 색을 바꾸는 예제 코드입니다. 이 예제는 article 요소 선택자를 중복으로 선언해서 사용해야 하는 불편함이 있습니다. article :where(h2, h3, p) { color: blue; } 앞서 작성한 예제 코드를 :where()를 사용해서..
CSS의 애니메이션을 사용해서 HTML의 blink 태그처럼 깜빡이는 효과를 만드는 방법을 알아보겠습니다. HTML의 blink 태그는 더 이상 지원을 하지 않는 방법이니 혹시라도 사용하고 계시거나 사용할 예정이라면 CSS의 애니메이션을 사용하시는 게 더 좋은 방법입니다. 커서처럼 깜빡이는 효과 만들기 - Blink Effect @keyframes blink-effect { 50% { opacity: 0; } } .blink { animation: blink-effect 1s step-end infinite; /* animation-name: blink-effect; animation-duration: 1s; animation-iteration-count:infinite; animation-timing-..