작성일자
카테고리 CSS/CSS기초
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>태그가 사라진 것은 아닙니다. 같이 사용해도 되며 되도록이면 의미있는 요소 태그를 사용하는 것이 좋겠죠. 

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에서는 간단하게 처리됩니다. 본문의 높이는 설정하지 않았으므로 내용이 늘어나면 자동으로 늘어나게 됩니다. 

LittleStar

어? 베누시안 님이시네요.. ㅎㅎ

예전에 미니 웹사이트 만들기 1편은 잘 봤습니다...^^

퀄러티 높은글 구독하고 갑니다!

광고하고 손가락 누르고 떠나갈게요~

베누시안

안녕하세요. 반갑습니다. 너무 좋게 평가해주셔서 감사합니다. 좋은 하루 되세요~

이츠하크

이건 뭐 교과서네요. 하루하루가 기대됩니다. 중요한 요소배웠습니다.
있다가 퇴근해서 다시 공부해야 겠어요. 지금 출근시간이라서 대충 서베이했습니다.
고맙습니다.^^

베누시안

이츠하크님 마음에 드시나 보네요. 너무 좋게 평가해주시니 송구스럽습니다. 댓글 감사드립니다.

로나루

잘보고 갑니다 ㅎㅎ... 너무 중요한 블로그네요 ㅎㅎ..

베누시안

안녕하세요. 반갑습니다. 좋은 평가 감사드려요.~~

미쟝센7

베누시안님~~~~반갑습니다~^^

정말 교과서가 따로 없는 것 같습니다.
과히 -바이블-이라해도 손색이 없는 강좌입니다.
그저 들어왔다가 베누시안님의 현재까지의 강의를 모두 듣고, 외울 부분이 있는 것같아 처음 부터 다시 살펴 보고 있는 중입니다.

독타인지라 타자 치는게 불편하지만 , 강좌를 보면 볼수록 ...도저히....이렇게...감사의 글을 달지 않을 수가 없군요.

...초심자라 잘 이해가 않가는 부분(특히 포지션에서 마이너스값 줄때 등,)이 있지만 대부분, 님의 배려 깊은 강좌(다른 교과서에는 패딩이나 보더값을 주면 개체가 확대된다는 언급이 없이 그저 개념만 나열해 놓은 책이 많더군요) 에 경탄스러움과 더불어 순간 순간 고마움이 느껴집니다.

덕분에 좀.막연했던 웹표준, div, 선택자...마진,패딩....등의 개념이 확연해졌습니다....ㅋ

자주 찿아와 뵙고 공부 열심히 하겠습니다. 베누시안님 ...이 사회에 정말 유익하신 분이군요.
정말 다시 한번 반가움과 고마움을 표합니다.

베누시안

안녕하세요. 반갑습니다. 너무 과찬의 말씀이십니다. 우리나라의 웹표준에 대한 관심이 그만큼 없다는 생각입니다. 외국의 경우는 웹표준 CSS에 관한 책이 억수로 많답니다. 보시다가 안되는 부분은 꼭 의견을 달아주세요. 좋은 평가 감사드립니다.

hong

네 정말 유익합니다.
저도 이렇게 홈피를 꾸며서, 다른사람에게 도움이 되는 사람이고 싶습니다.
^^ 부럽습니다.

베누시안

안녕하세요. 반갑습니다. 도움이 되신다니 다행입니다. 아직 기초부분이라서 홈페이지 만들기에는 부족하지만 더 진행되면 전체적인 웹페이지 만드는데 도움이 될 것입니다. 댓글 감사드려요.

푸앙

오...자세한 설명 잘 봤습니다.

덕 분에 많이 도움이 되었습니다.

베누시안

안녕하세요. 반갑습니다. 도움이 되신다니 다행입니다. 댓글 감사드려요.

ynsong

급하게 필요한 내용이었는데, 자세히 설명되어있어서 너무 좋았습니다.^^
잘 보고 갑니다//

베누시안

안녕하세요. 반갑습니다. 도움이 되신다니 다행입니다. 댓글 감사드려요.

good

말이 필요없네요 ㅋ 최고입니다! 책보다나아요-ㅁ-;;ㅎ

입문자

정말 최고의 강좌!!
눈물 겹도록 지금 6시간째 정주행 중입니다.
감사합니다 베누시안님^^

thanks

정말 잘보고 있습니다
다른분 말씀대로 책보다도 쉽고 내용이 알찬거 같아요

베누시안

안녕하세요. 좋게 봐주셔서 감사합니다.

따뜻한친구

정말이지 다른 분들이 감탄하는 의견에 전적으로 동의하게 됩니다.
남들이 만들어놓은 것을 활용해서 사이트를 만들다 보니 내 것이라는 아쉬움이 있어
이강좌를 배우기 시작하고 있습니다. 초보자도 쉽게 따라하기 좋은 강좌네요.
너무 감사드리고 이 강좌 배우기 끝나면 심화과정도 꼭 만들어 주시길......
시간가는줄 모르고 따라하고 그러다보면 만들어지고 배움의 기쁨이 있네요

베누시안

안녕하세요. 좋게 봐주셔서 감사합니다. 요즘 책 작업 마무리하느라고 좀 바뻐서 이전에 부탁하신 것 못하고 있는데 시간 나면 포토샵으로 메뉴 만드는 방법을 올려 보겠습니다. 포토샵으로 이미지 만들어 놓은 것 있으면 이메일로 보내주세요. 이메일은 티스토리 아이디에 네이버닷컴입니다. 그리고 어떤 방식으로 하고 싶으신지 알려주시고요. 메뉴 만들기 부분을 아무래도 할려고 했었거든요.

비밀댓글입니다

베누시안

안녕하세요. 이보다 좋은 감사의 댓글은 처음입니다. 감사합니다.

조승태

와..... 설명도 정말 잘 하셨지만, 문서 작성에 들어간 노력과 시간이 눈에 보입니다.

공짜로 글만 읽기 미안할 정도네요.

감사합니다.

베누시안

좋게 봐주셔서 감사합니다.

초보웹디자이너

회사에서 항상 배너나 상세페이지를 디자인하고.. 테이블 코딩만 하다가 답답해서

웹표준이 뭔가하고 책을 사고 정말 막막하던 와중에 굉장히 유용한 정보가 되었습니다. 자세하고 친절한 설명 감사합니다 ㅎㅎ, 그런데 궁금한것이 저는 포토샵이 능숙해서 이미지로 작업하는것이 편한데 꼭 이렇게 스타일 시트로 작업을 해야 웹표준을 지키는것인가요? 포토샵으로 해결할수 있고 이미지로 해결할수도 있는 부분이 있잖아요. 웹표준을 준수하고 웹사이트 제작시 그런것들은 최소로 해야 하는지 궁금해요. 아그리고 서브라임 텍스트로 편집하구 있는데요.. 사이드바에서 스타일시트 이름을 변경하려고 마우스 오른쪽 버튼을 아무리 눌러봐도 'rename'이 안나오더라구요.. 버전이 달라서 그런가요?~

베누시안

외국에서는 포토샵으로 웹디자인하던 시대는 이미 오래전 일이지만 우리나라는 아직 포토샵 이지미를 슬라이스해서 테이블 레이아웃으로 디자인하고 있는 경우가 많죠. 하지만 모바일을 생각해보면 최대한 용량을 줄여야하기 때문에 조그만 이미지 하나라도 줄여야합니다. 배터리 소모량이나 로딩 속도가 가장 문제가 되기 때문이죠. 테이블 태그는 나열형 데이터만 사용하도록 권장하고 있습니다. 그런데 편하다는 이유로 남용하고 있답니다. 테이블 태그로 디자인하면 디자인 변경하기도 어렵고 능률적이지 못합니다.
예전에 한동안 플래시가 인기가 있었지만 이제 플래시도 안쓰입니다. 웹에서 애니메이션은 제이쿼리 같은 자바스크립트가 대체되고 있습니다. 플래시도 플러그인이라는 부담 때문에 사용하지 않는 상태입니다.
이제 CSS도 국내에서는 많이 자리잡은 상태인데 외국에서는 부트스트랩과 같은 새로운 플랫폼이 나타나서 디자인을 편하게 하고 있답니다.
디자인을 배우신다면 빨리 CSS를 접하시는 것이 좋습니다.

웹제작초보

정말 이해하기 쉽고 사진도 많이 첨부해주셔서 이해가 정말 잘됩니다.
소중한 정보 감사한 마음으로 배우고 있습니다.
너무 감사해서 이렇게 댓글로라도 마음 표현하고 싶습니다.
정말 감사합니다.

베누시안

댓글 감사합니다.

흥흥

제가 본 강의 중에서 가장 좋은 것 같아요 ㅋ자주 찾아와서 예쁜 블로그 만들게요~

티스토리 툴바