M9 개발블로그

DOM은 JavaScript가 HTML 같은 웹 문서에 접근하여 조작할 수 있게 해주는 프로그래밍 인터페이스이다. 웹 브라우저가 HTML 코드를 해석할 때, HTML의 요소들을 각각 객체로 만들고, 객체 간에 부모관계를 구성하는 트리구조로 만들어 메모리에 저장한다. 이렇게 브라우저가 HTML 요소들을 객체 형태로 만들어 저장함으로써, 자바스크립트가 HTML에 접근할 수 있게 된다.

html의 요소를 화면에 어떻게 보이게 할지를 정해주는 속성인 display에 대해 정리해보겠다. inline과 block 속성을 정리하기 앞서 inline과 block 레벨의 차이점을 정리해보겠다. 1 2 3 div{ width:70px; height:70px; background:red; margin-bottom:20px; } span{ background:black; width:20px; height:20px; } 위의 html, css코드의 결과는 아래의 사진이다. div가 block 레벨이고, span이 inline 레벨이다. 그런데 이 코드를 작성하며 알 수 있는 사실은 block레벨 첫째, 위에서 아래로 열을 기준으로 블록처럼 쌓인다. 둘째, 태그 안에 텍스트를 작성하지 않아도 화면에 표현할..

html의 element의 위치를 이동시키고자 할 때 position의 값이 어떻게 설정되어있냐에 따라 이동 위치가 달라진다. static Position의 기본 설정 값은 'static'으로 설정되어 있다. #container{ background:blue; } div{ width:70px; height:70px; background:yellow; margin-bottom:20px; } #item{ background:red; left:20px; top:20px; } 위의 css코드에서 빨간색 박스(id="item")의 위치를 top:20px , left:20px로 설정했다. 하지만 박스가 이동하지 않고 자신의 위치를 지키고 있다. 그 이유는 position이 기본적으로 static의 값으로 설정되어있..

이번에는 padding의 변화에 따라 box의 크기가 변하지 않게 하는 방법을 정리해보겠다. padding값을 변경하면 box의 크기도 함께 커지는 모습을 종종 보았다. 드디어 그 이유를 알았다. html 코드 box-content box-border css코드 div{ width:200px; height:300px; border:3px solid gray; } 결과 padding 0일 때 padding:40px 일떄 현재 위 코드에서 padding 값을 변경하게 되면 박스의 크기가 커지게 된다. 이를 막기 위해서는 box-sizing을 활용해야 한다. box-sizing 속성 box-sizing:border-box를 이용하면 box의 크기는 유지할 수 있다. box-sizing:border-box 적용..

어떤 일을 시작하기 전, 뼈대의 구조를 제대로 완성시켜야 일을 수월하게 진행시킬 수 있다. 웹도 마찬가지로 먼저 브라우저를 어떻게 구성할지 html 구조를 설계해놓으면 css 작업할 때 일이 수월해진다. 그래서 대표적으로 html 구조를 만들 때 사용되는 태그들이 어떤 것들이 있는지 살펴보겠다. 1. header 태그 웹 브라우저의 상단 또는 머리글 역할 부분을 표현할 때 사용한다. 주로 nav태그가 header태그에 포함되어 사용된다. 네이버에서 현재 보여지는 부분이 header로 설정되어 있는 부분이다. nav 태그도 포함되어 있는 모습을 볼 수 있다. 2. nav 태그 nav태그는 navigator의 뜻으로 주로 메뉴 부분을 담을 때 사용한다. 즉, 어느 메뉴로 이동할 것인지 내비게이션 하는 역할들..