Life<Log> Life<Log>

우리는 앞에서 CSS를 통하여 HTML 속의 엘리먼트들(h1, h2, p, img, 등)의 스타일을 꾸밀 수 있게 되었습니다. 복습해보자면 엘리먼트의 스타일은 다음과 같이 정해주었지요. 그런데 만약 '어떤 문단()은 이런 스타일로, 또다른 어떤 문단은 저런 스타일로..' 이렇게 서로 다르게 꾸미고 싶다면 어떻게 해야 할까요? 위와 같은 방법으로 CSS를 적용하면 모든 엘리먼트들에 똑같은 스타일이 적용되게 되므로 우리가 원하는 바를 이룰 수가 없습니다. 이런 상황에서 필요한 것이 class 속성입니다. 엘리먼트에 서로 다른 class를 부여해놓으면 그 class 마다 별도의 스타일을 지정할 수 있게 됩니다. class 속성의 사용법은 다음과 같습니다. 먼저 HTML 부분입니다. 위의 h2, p 엘리먼트에는..

이번 글에서는 CSS의 float 속성을 이용하여 웹 페이지의 레이아웃을 잡는 방법에 대해 알아보겠습니다. 이번 글에서 우리의 목표는 블로그와 같은 웹 페이지에서 자주 쓰이는 header, content, sidebar, footer로 구성된 2단 레이아웃을 만드는 것입니다. 즉 다음과 같은 형태의 레이아웃을 잡는 것이 우리의 목표입니다. 위와 같은 레이아웃을 잡기 위한 HTML과 CSS의 기본 구조은 다음과 같습니다. 으로 header, content, sidebar, footer 영역을 나누어 놓았고 각 영역의 크기와 배경색을 정해주었습니다. layout.html layout.css 지금까지의 결과를 브라우져에서 확인해보면 다음과 같습니다. HTML은 기본적으로 웹 페이지의 가장 위에서부터 엘리먼트들..

는 html 속의 수많은 엘리먼트들(h1, h2, p, img 등)에 대한 논리적 구분 및 그룹을 위해 존재하는 엘리먼트입니다. 이제 곧 엘리먼트들의 레이아웃과 포지셔닝에 관한 내용에 대해 배우게 될 텐데요... 만약 논리적으로 같은 그룹에 속하는 엘리먼트들을 하나의 그룹으로 묶을 수 없다면 각각의 엘리먼트들을 일일이 모두 위치를 잡아주어야 하므로 매우 불편하겠죠? div 엘리먼트를 잘 활용하면 엘리먼트들의 레이아웃과 포지셔닝을 쉽게 할 수 있을 뿐만 아니라 구조적으로도 깔끔한 html 문서를 작성할 수 있게 됩니다. 그럼 div의 사용법을 한번 살펴보겠습니다. 위 에서 보듯이 div 역시 다른 일반적인 블록 엘리먼트들과 마찬가지 방법으로 사용하면 됩니다. 위 HTML 문서의 결과물은 다음과 같습니다. ..