HTML로 코딩하면서 가장 흔하고 많이 쓰이는 것이 <div>태그입니다. 영어로 Division을 의미하는데 이것은 이전 글 에서 알아봤듯이 대표적인 블럭요소중에 하나입니다. 블럭요소란 웹페이지에서 좌우공간을 다 차지하여 이 요소 외에 다른 요소가 옆에 오면 아래로 내려버리는 성질이 있습니다. 그래서 CSS로 스타일을 적용하지 않은 웹페이지를 보면 글자의 나열과 이미지만 나오고 위에서 아래로 HTML 코드 순서대로 나타납니다.
우리나라에서 가장 많이 쓰이는 인터넷 익스플로러에서 네이버 포털사이트의 초기화면을 스타일을 적용안하고 본 화면입니다. HTML의 블럭요소는 이런 성질 때문에 보기좋게 레이아웃하기 위해서 초기 디자이너들은 <table>태그를 사용하여 레이아웃을 했습니다. 테이블형태의 레이아웃은 스타일시트와 관계가 없기 때문에 위처럼 스타일을 적용하지 않아도 화면이 그대로 나오게 됩니다. 하지만 이런 화면은 요즘 없죠. 학교에서 기초 HTML을 가르치는 경우 아직도 테이블형식의 레이아웃을 가르치고 있어서 가끔 네이버 지식인에 이런 레이아웃을 만들어주세요. 하고 올라오곤 합니다.
CSS의 스타일시트를 적용하여 레이아웃을 만드는 것은 블럭요소인 <div> 태그를 이용합니다. 블럭요소라고 해서 좌우 공간을 다 차지하지만 width라는 속성과 값을 부여하면 차지하는 공간을 제한할 수 있습니다. 다른 요소와는 달리 <div>이라는 요소는 블럭요소라는 성질 외에는 어떤 특성이 없습니다. <h1>태그는 이전 글에서 봤듯이 글자가 크게 나오는 역할을 하고 <p>태그는 문단을 나누게 되면 두 문단 사이에 공간이 생기게 되는 특성이 있지만 <div>태그는 어떤 특성이 없습니다. 이 태그안에 무엇이 오느냐에 따라서 그 크기에 맞춰 크기가 변하는 아주 자유로운 태그입니다. 그래서 스타일시트를 적용한 레이아웃에서는 항상 <div>태그를 사용하고 웹디자인은 <div>에서 시작해서 </div>으로 끝난다고 할 정도로 이 태그는 아주 효율적인 도구입니다.
<div>태그를 사용하면 아이디 선택자나 클래스 선택자를 사용해서 스타일을 정하게 되는데 그 이름을 정할때 헤더부분의 이름은 <div id="header">로, 메뉴가 있는 내비게이션 부분은 <div id="nav-bar">로 정하는 등 일정한 규칙을 세워서 이름을 만드는 습성이 생겨났습니다. CSS에 관련된 외국 서적을 보다보면 "Semantic"이나 "Generic"이라는 단어가 많이 나옵니다. 이것은 "의미있는" 과 "총괄적인" 이라는 뜻인데 코딩시에 어떤 이름을 짓거나 할때 바탕이 되는 기준입니다. 우리말로 가장 근접한 의미가 "체계적"이라는 말이 적당할 것 같습니다. 체계적인 레이아웃은 HTML5가 등장하기 이전부터 생겨났는데 그것은 HTML5가 <div>태그 대신에 그야말로 의미있는 요소를 만들어서 사용할거라는 것을 미리 알았기 때문입니다. 그래서 웹디자이너들은 미리부터 <div id="header">나 <div id="nav-bar"> 같이 id에 이름을 부여해서 사용했던 것입니다. 그래서 아이디 선택자의 이름을 의미있는 체계적인 이름을 정하는 것이 아주 중요합니다. HTML5가 등장했다고 해서 <div>태그가 사라진 것은 아닙니다. 같이 사용해도 되며 되도록이면 의미있는 요소 태그를 사용하는 것이 좋겠죠.
이전 글에서 미니웹사이트 만들기에서 작업한 것은 웹사이트에서 <header>부분입니다. 이를 <div>태그를 이용하여 정리를 해봅니다.
우선 이전에 사용했던 파일을 정리합니다. 서브라임 텍스트 에디터의 사이드바에서 파일을 우클릭하면 메뉴가 나옵니다. index.html파일만 남기고 html파일은 제거합니다. 3의 external.css파일은 우클릭해서 Rename을 선택하면 하단에 이름변경할 수 있는 입력창이 나옵니다. style.css로 바꿉니다. html코드와 CSS코드를 분리해서 입력하는 것이 좋으므로 두개의 화면으로 분리합니다. 메뉴에서 View-레이아웃을 선택하고 Column:2를 선택하면 화면 중간에 6의 분리 Bar가 나옵니다. style.css탭을 클릭드래그하여 우측화면으로 이동하고 내용물은 지워줍니다.
스타일시트 파일의 이름을 변경했으니 1의 링크에 있는 파일이름도 바꿔줘야합니다. 지금부터 할 것은 각 요소가 화면 좌측에 너무 붙어있어서 우측으로 전부 50픽셀씩 이동하는 것입니다. 스타일시트화면에서 h1을 치고 한칸 띄운다음 중괄호를 치면 시작과 끝 중괄호가 자동으로 만들어지고 커서가 가운데에서 깜빡거리며 명령을 기다립니다. 엔터키를 치면 4처럼 모양이 바뀌면서 커서가 4에서 깜빡거립니다. 스타일시트에서 가장 보기 좋은 구조형태로 자동으로 바뀌는 것입니다. 이런식으로 스타일시트를 만들면 보기도 좋고 관리하기도 좋기 때문에 웹개발자들이 선호하여 프로그램자체에서 자동으로 만드는 것입니다.
5처럼 4개의 요소에 대해 margin-left:50px; 을 입력해줍니다.<p>태그의 내용은 <h1>태그 아래에서 인덴트되어있어서 부모자식관계인 것 같지만 전혀아이므로 별도로 스타일을 정해줘야합니다. 반면에 6의 <li>태그는 <ul>태그의 자식이므로 스타일을 정해주지 않아도 같이 가게 됩니다. 이런 것을 상속(inherit)이라고 합니다. 여기까지 입력하고 두개의 파일을 저장한 다음 윈도우탐색기에서 index.html파일을 클릭하면 웹브라우저에 나오고 내용전체가 우측으로 50픽셀만큼 이동합니다.
위 내용을 보면 여러개의 요소에 대해서 같은 속성과 값이 적용되어있습니다. 이럴때는 여러개의 요소를 그룹화시키는 것이 효율적인 CSS관리가 됩니다.
스타일시트화면에서 위처럼 각 요소를 배열하고 요소 사이에는 콤마를 찍어서 분리시킵니다. 이렇게 만들고 저장한 다음 웹브라우저에서 보면 전과 동일하게 나옵니다.
이렇게 모든 요소에 대해서 margin-left를 사용하여 간격을 만들어주면 나중에 아주 복잡해집니다. 예를들어 <p>태그나 <ul>태그에 대해서는 별도의 작업을 해서 배치해야하는데 이런 식으로 간격을 띄우면 혼란을 초래하게 됩니다. 그래서 사용하는 것이 이 전체를 하나의 상자에 담아서 그 상자만 이동하면 되는 것입니다. 그 상자에 해당하는 것이 <div>태그입니다.
1처럼 모든 내용의 상단에 <div>태그를 만들고 id와 아이디 이름을 입력합니다. 마지막에는 2처럼 마감태그도 만듭니다. 스타일시트화면에서 이전의 요소를 지우고 #(파운드 사인이라고 읽습니다.)를 붙이고 아이디 이름을 입력합니다. 저장한 다음 웹브라우저에서 Ctrl+R키를 눌러 새로고침하면 화면 변동은 없습니다.
계속 요소를 추가하다보면 서열을 정리해줘야합니다. 인덴트작업인데요. 4의 줄번호가 있는 곳을 클릭하여 아래로 5까지 드래그하면 모두 선택이 됩니다. 탭키를 누르면 4픽셀 이동합니다. 이렇게 인덴트작업하다보면 마지막 자식은 쪼그라들기 때문에 공간을 좀 확보해야죠. 탭을 누르면 4칸 이동하는 것을 2칸으로 줄여줍니다. 방법은 6의 Preferences-File Settings Default를 클릭하면 화면이 나옵니다. 코딩되어있어서 복잡하지만 아래로 내리면 "tab_size"항목이 나옵니다. 숫자를 2로 고치고 탭의 우측에 있는 x아이콘을 클릭하면 닫으면서 저장할 것인지 묻습니다. "Yes"를 클릭하면 됩니다.
현재까지 어떤 레이아웃이 되고 있는지 모든요소에 대해서 테두리를 적용해서 보려면 1과 같은 모든요소 선택자를 사용합니다. 도스시절의 와일드카드에 해당합니다. 우선 border부분만 속성과 값을 입력해서 저장한 다음 웹화면에서 보면 다음과 같이 나옵니다.
테두리는 구분을 위해 그대로 놔두고 margin부분에 auto를 추가해줍니다. 이것의 의미는 3에서 body태그의 넓이를 정해주면 나머지 공간은 좌우로 자동으로 맞춰라. 라는 의미입니다. margin에 대해서는 나중에 자세히 나오지만 원래는 margin:0 auto 0 auto;로 상, 우, 하, 좌의 시계방향의 순서로 공간을 주는 속성입니다. 상하는 0의 공간을 좌우는 자동으로 맞춤이므로 같은 값은 생략해서 두개만 입력해도 되는 것입니다. 이것을 사용하려면 width가 정해져야합니다. 국제적으로 레이아웃의 표준 넓이인 960픽셀을 입력해주고 저장한 다음 웹에서 보면 다음과 같습니다.
이제 얼굴이 만들어지니 뭔가 모습이 나오는 것 같습니다. 그러면 몸통에 해당하는 본문도 div태그로 만들어봅니다. 내친김에 사이드바와 푸터도 만들고 마무리하겠습니다.
header와 병행하게 본문인 wrapper와 footer를 div태그를 사용해서 만들어주고 스타일에서는 테두리만 빨간색과 녹색으로 만들어주고 저장한 다음 웹에서 보면 아무것도 없으니 테두리만 겹쳐져서 나오게 됩니다. 헤더와 마찬가지로 넓이를 지정해주지 않아도 body에 있는 넓이 속성을 상속 받으므로 넓이는 960픽셀로 됩니다.
content와 sidebar에 <p>태그를 이용해서 내용을 입력해주고 footer에도 header에 있는 메뉴를 복사해줍니다. 스타일시트에서 #content와 #sidebar는 #wrapper에 속해 있는 것이므로 4와 5처럼 1탭을 인덴트해서 만들어주면 구분도 되고 나중에 찾기도 쉽습니다. 배경색을 입력해주고 각각의 넓이를 지정해줍니다. 여기까지 해서 저장하고 웹에서 보면 다음과 같습니다.
content와 sidebar에 넓이만 설정했다고 해서 좌우로 정렬되지는 않습니다. 두개의 요소를 좌우로 나오게 하려면 float라는 속성을 사용합니다.
content에는 float:left;를 sidebar에는 float:right;를 각각 입력합니다. 웹에서 보면 다음과 같이 나옵니다.
sidebar가 우측으로 간것은 좋은데 content의 옆에 있는 것이 아니라 아래에 있습니다. 1의 맞닿는 부분을 보면 치수상에 약간 초과되어있습니다. 이것은 border에서 양쪽으로 1픽셀씩 사용하고 있기 때문에 총 넓이인 960픽셀을 감안해서 사이드바나 컨텐트의 넓이를 정해줘야한다는 것입니다. 그리고 푸터가 위로 올라가서 붙어버렸는데 이 현상은 float라는 속성을 사용하면 나타나는 증상으로 clear라는 속성을 사용해줘야합니다.
본문을 우측으로 가게하고 사이드바를 좌측으로 오게 하려면 간단합니다. 스타일시트에서 #content는 float를 right로 #sidebar는 float를 left로 바꿔주면 됩니다.
테이블 레이아웃에서는 이렇게 바꾼다는 것은 처음부터 새로운 코딩을 해야 가능하지만 CSS에서는 간단하게 처리됩니다. 본문의 높이는 설정하지 않았으므로 내용이 늘어나면 자동으로 늘어나게 됩니다.
우리나라에서 가장 많이 쓰이는 인터넷 익스플로러에서 네이버 포털사이트의 초기화면을 스타일을 적용안하고 본 화면입니다. HTML의 블럭요소는 이런 성질 때문에 보기좋게 레이아웃하기 위해서 초기 디자이너들은 <table>태그를 사용하여 레이아웃을 했습니다. 테이블형태의 레이아웃은 스타일시트와 관계가 없기 때문에 위처럼 스타일을 적용하지 않아도 화면이 그대로 나오게 됩니다. 하지만 이런 화면은 요즘 없죠. 학교에서 기초 HTML을 가르치는 경우 아직도 테이블형식의 레이아웃을 가르치고 있어서 가끔 네이버 지식인에 이런 레이아웃을 만들어주세요. 하고 올라오곤 합니다.
CSS의 스타일시트를 적용하여 레이아웃을 만드는 것은 블럭요소인 <div> 태그를 이용합니다. 블럭요소라고 해서 좌우 공간을 다 차지하지만 width라는 속성과 값을 부여하면 차지하는 공간을 제한할 수 있습니다. 다른 요소와는 달리 <div>이라는 요소는 블럭요소라는 성질 외에는 어떤 특성이 없습니다. <h1>태그는 이전 글에서 봤듯이 글자가 크게 나오는 역할을 하고 <p>태그는 문단을 나누게 되면 두 문단 사이에 공간이 생기게 되는 특성이 있지만 <div>태그는 어떤 특성이 없습니다. 이 태그안에 무엇이 오느냐에 따라서 그 크기에 맞춰 크기가 변하는 아주 자유로운 태그입니다. 그래서 스타일시트를 적용한 레이아웃에서는 항상 <div>태그를 사용하고 웹디자인은 <div>에서 시작해서 </div>으로 끝난다고 할 정도로 이 태그는 아주 효율적인 도구입니다.
<div>태그를 사용하면 아이디 선택자나 클래스 선택자를 사용해서 스타일을 정하게 되는데 그 이름을 정할때 헤더부분의 이름은 <div id="header">로, 메뉴가 있는 내비게이션 부분은 <div id="nav-bar">로 정하는 등 일정한 규칙을 세워서 이름을 만드는 습성이 생겨났습니다. CSS에 관련된 외국 서적을 보다보면 "Semantic"이나 "Generic"이라는 단어가 많이 나옵니다. 이것은 "의미있는" 과 "총괄적인" 이라는 뜻인데 코딩시에 어떤 이름을 짓거나 할때 바탕이 되는 기준입니다. 우리말로 가장 근접한 의미가 "체계적"이라는 말이 적당할 것 같습니다. 체계적인 레이아웃은 HTML5가 등장하기 이전부터 생겨났는데 그것은 HTML5가 <div>태그 대신에 그야말로 의미있는 요소를 만들어서 사용할거라는 것을 미리 알았기 때문입니다. 그래서 웹디자이너들은 미리부터 <div id="header">나 <div id="nav-bar"> 같이 id에 이름을 부여해서 사용했던 것입니다. 그래서 아이디 선택자의 이름을 의미있는 체계적인 이름을 정하는 것이 아주 중요합니다. HTML5가 등장했다고 해서 <div>태그가 사라진 것은 아닙니다. 같이 사용해도 되며 되도록이면 의미있는 요소 태그를 사용하는 것이 좋겠죠.
Project (2).zip이전 글에서 미니웹사이트 만들기에서 작업한 것은 웹사이트에서 <header>부분입니다. 이를 <div>태그를 이용하여 정리를 해봅니다.
우선 이전에 사용했던 파일을 정리합니다. 서브라임 텍스트 에디터의 사이드바에서 파일을 우클릭하면 메뉴가 나옵니다. index.html파일만 남기고 html파일은 제거합니다. 3의 external.css파일은 우클릭해서 Rename을 선택하면 하단에 이름변경할 수 있는 입력창이 나옵니다. style.css로 바꿉니다. html코드와 CSS코드를 분리해서 입력하는 것이 좋으므로 두개의 화면으로 분리합니다. 메뉴에서 View-레이아웃을 선택하고 Column:2를 선택하면 화면 중간에 6의 분리 Bar가 나옵니다. style.css탭을 클릭드래그하여 우측화면으로 이동하고 내용물은 지워줍니다.
스타일시트 파일의 이름을 변경했으니 1의 링크에 있는 파일이름도 바꿔줘야합니다. 지금부터 할 것은 각 요소가 화면 좌측에 너무 붙어있어서 우측으로 전부 50픽셀씩 이동하는 것입니다. 스타일시트화면에서 h1을 치고 한칸 띄운다음 중괄호를 치면 시작과 끝 중괄호가 자동으로 만들어지고 커서가 가운데에서 깜빡거리며 명령을 기다립니다. 엔터키를 치면 4처럼 모양이 바뀌면서 커서가 4에서 깜빡거립니다. 스타일시트에서 가장 보기 좋은 구조형태로 자동으로 바뀌는 것입니다. 이런식으로 스타일시트를 만들면 보기도 좋고 관리하기도 좋기 때문에 웹개발자들이 선호하여 프로그램자체에서 자동으로 만드는 것입니다.
5처럼 4개의 요소에 대해 margin-left:50px; 을 입력해줍니다.<p>태그의 내용은 <h1>태그 아래에서 인덴트되어있어서 부모자식관계인 것 같지만 전혀아이므로 별도로 스타일을 정해줘야합니다. 반면에 6의 <li>태그는 <ul>태그의 자식이므로 스타일을 정해주지 않아도 같이 가게 됩니다. 이런 것을 상속(inherit)이라고 합니다. 여기까지 입력하고 두개의 파일을 저장한 다음 윈도우탐색기에서 index.html파일을 클릭하면 웹브라우저에 나오고 내용전체가 우측으로 50픽셀만큼 이동합니다.
위 내용을 보면 여러개의 요소에 대해서 같은 속성과 값이 적용되어있습니다. 이럴때는 여러개의 요소를 그룹화시키는 것이 효율적인 CSS관리가 됩니다.
스타일시트화면에서 위처럼 각 요소를 배열하고 요소 사이에는 콤마를 찍어서 분리시킵니다. 이렇게 만들고 저장한 다음 웹브라우저에서 보면 전과 동일하게 나옵니다.
이렇게 모든 요소에 대해서 margin-left를 사용하여 간격을 만들어주면 나중에 아주 복잡해집니다. 예를들어 <p>태그나 <ul>태그에 대해서는 별도의 작업을 해서 배치해야하는데 이런 식으로 간격을 띄우면 혼란을 초래하게 됩니다. 그래서 사용하는 것이 이 전체를 하나의 상자에 담아서 그 상자만 이동하면 되는 것입니다. 그 상자에 해당하는 것이 <div>태그입니다.
1처럼 모든 내용의 상단에 <div>태그를 만들고 id와 아이디 이름을 입력합니다. 마지막에는 2처럼 마감태그도 만듭니다. 스타일시트화면에서 이전의 요소를 지우고 #(파운드 사인이라고 읽습니다.)를 붙이고 아이디 이름을 입력합니다. 저장한 다음 웹브라우저에서 Ctrl+R키를 눌러 새로고침하면 화면 변동은 없습니다.
계속 요소를 추가하다보면 서열을 정리해줘야합니다. 인덴트작업인데요. 4의 줄번호가 있는 곳을 클릭하여 아래로 5까지 드래그하면 모두 선택이 됩니다. 탭키를 누르면 4픽셀 이동합니다. 이렇게 인덴트작업하다보면 마지막 자식은 쪼그라들기 때문에 공간을 좀 확보해야죠. 탭을 누르면 4칸 이동하는 것을 2칸으로 줄여줍니다. 방법은 6의 Preferences-File Settings Default를 클릭하면 화면이 나옵니다. 코딩되어있어서 복잡하지만 아래로 내리면 "tab_size"항목이 나옵니다. 숫자를 2로 고치고 탭의 우측에 있는 x아이콘을 클릭하면 닫으면서 저장할 것인지 묻습니다. "Yes"를 클릭하면 됩니다.
현재까지 어떤 레이아웃이 되고 있는지 모든요소에 대해서 테두리를 적용해서 보려면 1과 같은 모든요소 선택자를 사용합니다. 도스시절의 와일드카드에 해당합니다. 우선 border부분만 속성과 값을 입력해서 저장한 다음 웹화면에서 보면 다음과 같이 나옵니다.
모두가 블럭요소이다보니 우측 공간을 다 차지하고 있는 것이 보입니다.그리고 2의 공간은 헤더의 50픽셀 좌측마진을 준 것은 알겠는데 1은 무엇일까요. 이것은 웹브라우저가 기본적으로 제공하는 margin입니다. 웹디자인시 쓸데없는 것이기 때문에 margin:0;을 추가해줍니다. 보통은 와일드카드를 사용하지 않고 body 태그를 사용하여 3과 같이 스타일을 정하게 됩니다. 이러면 쓸데없는 마진은 사라지게 됩니다.
이번에는 위 헤더를 웹브라우저의 중앙에 오도록 해봅니다.
테두리는 구분을 위해 그대로 놔두고 margin부분에 auto를 추가해줍니다. 이것의 의미는 3에서 body태그의 넓이를 정해주면 나머지 공간은 좌우로 자동으로 맞춰라. 라는 의미입니다. margin에 대해서는 나중에 자세히 나오지만 원래는 margin:0 auto 0 auto;로 상, 우, 하, 좌의 시계방향의 순서로 공간을 주는 속성입니다. 상하는 0의 공간을 좌우는 자동으로 맞춤이므로 같은 값은 생략해서 두개만 입력해도 되는 것입니다. 이것을 사용하려면 width가 정해져야합니다. 국제적으로 레이아웃의 표준 넓이인 960픽셀을 입력해주고 저장한 다음 웹에서 보면 다음과 같습니다.
이제 얼굴이 만들어지니 뭔가 모습이 나오는 것 같습니다. 그러면 몸통에 해당하는 본문도 div태그로 만들어봅니다. 내친김에 사이드바와 푸터도 만들고 마무리하겠습니다.
header와 병행하게 본문인 wrapper와 footer를 div태그를 사용해서 만들어주고 스타일에서는 테두리만 빨간색과 녹색으로 만들어주고 저장한 다음 웹에서 보면 아무것도 없으니 테두리만 겹쳐져서 나오게 됩니다. 헤더와 마찬가지로 넓이를 지정해주지 않아도 body에 있는 넓이 속성을 상속 받으므로 넓이는 960픽셀로 됩니다.
content와 sidebar에 <p>태그를 이용해서 내용을 입력해주고 footer에도 header에 있는 메뉴를 복사해줍니다. 스타일시트에서 #content와 #sidebar는 #wrapper에 속해 있는 것이므로 4와 5처럼 1탭을 인덴트해서 만들어주면 구분도 되고 나중에 찾기도 쉽습니다. 배경색을 입력해주고 각각의 넓이를 지정해줍니다. 여기까지 해서 저장하고 웹에서 보면 다음과 같습니다.
content와 sidebar에 넓이만 설정했다고 해서 좌우로 정렬되지는 않습니다. 두개의 요소를 좌우로 나오게 하려면 float라는 속성을 사용합니다.
content에는 float:left;를 sidebar에는 float:right;를 각각 입력합니다. 웹에서 보면 다음과 같이 나옵니다.
sidebar가 우측으로 간것은 좋은데 content의 옆에 있는 것이 아니라 아래에 있습니다. 1의 맞닿는 부분을 보면 치수상에 약간 초과되어있습니다. 이것은 border에서 양쪽으로 1픽셀씩 사용하고 있기 때문에 총 넓이인 960픽셀을 감안해서 사이드바나 컨텐트의 넓이를 정해줘야한다는 것입니다. 그리고 푸터가 위로 올라가서 붙어버렸는데 이 현상은 float라는 속성을 사용하면 나타나는 증상으로 clear라는 속성을 사용해줘야합니다.
사이드바에서 치수를 2픽셀 줄이고 푸터에서 clear:both;라는 속성과 값을 입력하고 저장한 다음 웹에서 보면 다음과 같이 원하는 화면이 나옵니다.
본문을 우측으로 가게하고 사이드바를 좌측으로 오게 하려면 간단합니다. 스타일시트에서 #content는 float를 right로 #sidebar는 float를 left로 바꿔주면 됩니다.
테이블 레이아웃에서는 이렇게 바꾼다는 것은 처음부터 새로운 코딩을 해야 가능하지만 CSS에서는 간단하게 처리됩니다. 본문의 높이는 설정하지 않았으므로 내용이 늘어나면 자동으로 늘어나게 됩니다.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
