초짜코딩의 잡동사니

브라우저는 어떻게 동작하는가? 브라우저는 사용자가 요청하여 받아온 HTML파일을 파싱하여 DOM 트리를 그리고, CSS 파일을 파싱하여 이를 결합한 후 렌더링을 하는 작업을 우리의 화면에 그려주게 된다. 브라우저가 DOM을 구현한다고 생각하면 조금이나마 DOM을 이해하는데 쉽다. HTML이란? HTML(HyperText Markup Language)은 웹 페이지를 위한 언어로, 특정 영역이 어떤 성질을 갖는지 미리 정해진 규칙에 따라 구조화된 요소들로 이루어진 마크업 언어이다. 마크업 언어는 태그()를 이용하여 데이터 구조를 명명하는 언어이므로, 태그 안에 담기는 요소들에 따라 영역의 성질이 달라지게 되고 각 영역들이 모여 구조화된 문서를 만든다. HTML은 인간이 이해하고 구분할 수 있는 언어로 만들어..

서식 서식(Formatting) HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공합니다. 강조 효과 HTML 문서에서 텍스트를 굵게 표현하고 싶을 때에는 태그(bold text)나 태그를 사용하면 됩니다. 예제 "이 부분"은 단순히 글씨가 굵은 부분이에요! "이 부분"은 중요한 부분이라서 굵게 표현됐어요! 태그는 단순히 화면의 텍스트를 굵게 표현해 줍니다. 하지만 태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 줍니다. HTML 문서에서 이탤릭체를 표현하고 싶을 때에는 태그(italic text)나 태그(emphasized text)를 사용합니다. 예제 "이 부분"은 단순히 글씨가 이탤릭체인 부분이에요! "이 부분"은 중요한 부분이라서 이탤릭..

단락 단락(Paragraph) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부릅니다. HTML에서는 태그를 이용하여 이러한 단락을 표현합니다. 예제 제목1의 크기입니다! 제목2의 크기입니다! 제목3의 크기입니다! 여기서부터 단락입니다. 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다. 띄어쓰기와 줄 나누기 HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못합니다. 웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문입니다. 다음 예제는 웹 페이지에 여러 번의 띄어쓰기와 줄 나누기를 표현하기 위해 작성한 예제입니다. 예제 줄을 나누고 싶어서 이렇게 ..

제목 제목(Heading) HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공합니다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있습니다. 예제 제목1의 크기입니다! 제목2의 크기입니다! 제목3의 크기입니다! 제목4의 크기입니다! 제목5의 크기입니다! 제목6의 크기입니다! 태그의 위아래로는 약간의 여백이 자동으로 삽입됩니다. 이런 태그는 제목의 표현이라는 기능 외에도 또 다른 중요한 역할을 하고 있습니다. 여러 검색엔진은 각 웹 사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집하고, 그 내용을 파악합니다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있습니다. HTML 문서의 제목에 해당하는 부분을 태그나..

블록과 인라인 HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 1. 블록(block) 2. 인라인(inline) 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. 예제 p요소는 display 속성값이 블록인 요소입니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다. ..

웹표준이란 ? 구글, 파이어폭스, 사파리 등 세상에는 브라우저 종류가 참 많습니다. 우리나라에도 네이버에서 개발한 웨일이라는 브라우저가 있죠. 나라마다 우리는 알지 못하는 브라우저의 종류들이 다양하게 많을 겁니다. 여기서, 우리가 코딩을 할 때, 각 브라우저마다 다른 것이 보여진다면? 혼란스럽겠죠? 그래서 이를 막기 위해 표준화 된 언어를 사용함으로써 동일한 결과물을 보여주는 것을 웹표준이라고 합니다. 웹표준은 2007년도부터 대중화 되기 시작하였습니다. 과거에는 웹표준이 없어서 table이라는 태그로만 브라우저를 구성하였습니다. 그러나 지금은 h1, h2, p, ul, ol 등 적재적소에 맞는 태그를 기술할 수 있게 되었죠. 이렇게 알맞은 태그를 사용하여 HTML 문서를 작성하는 것을 시맨틱 마크업이라..