'웹표준'에 해당되는 글 7

  1. 2010.10.02 HTML - HEAD 태그 (4)
  2. 2009.12.15 HTML 기본 구조 (2)
  3. 2009.12.14 HTML (4)
  4. 2009.12.11 CSS : Box Model
  5. 2009.12.10 CSS : Float 흐름끊기 (2)
  6. 2009.12.09 CSS : Float
  7. 2009.12.08 CSS Position 이야기 (9)
2010.10.02 03:16 | 개발이야기

정말 한 백년만에 적는 이야기인거같네요.. :)
최근에 궁시렁 대는글을 빼고는.. ㅎㅎ
슬슬 다시 HTML에 대해서 이야기를 해 볼까 하는데요..

지난번에 어떤 이야기를 했는지 가물가물 하다면 여기 를 클릭하면 됩니다.

지난번엔 HTML문서의 전체적인 구조를 한번 살펴봤군요..
다시 되짚어 본다면 HTML의 문서는 크게 세부분으로 나눠 볼 수 있습니다.

첫번째.. DTD선언부.
HTML문서의 타입과 버전을 선언하는 부분입니다.
이거 선언 제대로 안해주면 크로스 브라우징에서 애먹어요~

두번째는 HEAD 부분
오늘 자세히 설명을 할 부분으로 HTML문서의 전체적인 속성을 정의하는 부분이라고 볼 수 있습니다.

그리고 마지막으로 BODY부분
우리가 실제로 브라우저에서 보고 읽고 클릭하는 부분을 넣어두는 부분이라고 보면 됩니다.

자.. 그럼 이제 HEAD에 대해서 알아보도록 하겠습니다.

이 HEAD내부에 넣어둔 태그는 대부분 우리가 보는 웹브라우저상에서 확인을 할 수 없습니다.
딱 하나.. TITLE 태그만이 웹브라우저의 제목표시줄상에서 보여지게 되는데요..
HEAD는 말 그대로 HTML문서의 머리 역할을 하게 됩니다.

이 HEAD 태그 내부에 들어가는 태그들 역시 대략 세개가 있는데요..

첫번째.. META태그 입니다.
지난 글에 살짝 언급을 했었는데요.. 
이 META태그는 폭 넓게 봤을때 HTML문서의 속성을 정리 해 두는 태그라고 생각하면 됩니다.

지난 글에는 아래와 같은 코드를 소개를 해 드렸었습니다.

위의 코드를 보면 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
와 같은 부분을 찾아 볼 수 있습니다.
이 부분이 바로 META태그인데요.. 이 태그의 목적은 HTML문서의 Content Type
즉, 문서의 컨텐츠 타입에 대해서 안내를 해 주는것입니다.

content는 일반 텍스트로 이루어진 html문서 (text/html)이고 문자 인코딩(charset)은 utf-8 이라는
일종의 유니코드 형식으로 이루어져 있다고 해석하면 됩니다.

이 외에도 META태그의 대표적인 쓰임새가 있는데요..
그것은 바로 검색엔진최적화(SEO)에 쓰이는 검색 키워드 설정입니다.


위의 코드를 보면 Description 부분과 Keywords 두 부분이 보이실겁니다. Description부분은 말 그대로 이 문서의 설명을 뜻한다고 보면 됩니다. 그리고 Keywords 부분은 이 문서가 검색엔진에 등록 될 시 검색엔진에 제공해줄 키워드를 넣어두는 곳이라고 생각하시면 됩니다.

즉, 내 HTML문서와 관련된 키워드로는 이러이러이러한것들이 있다 라는것을 알려준다고 보면 되겠네요.

이 외에도 META 태그에는 Author, Copyright 등의 정보를 넣어서 검색엔진에 정보를 줄 수 있습니다. 하지만 이 META태그가 검색에 얼마나 유용하게 쓰이는지는 각 검색엔진의 특성에 따라 조금씩 다를수는 있다고 하네요

두번째로는 TITLE입니다. 위의 첫번째 코드에서 <title>HTML문서의 구조</title> 와 같은 부분이 바로 TITLE인데요 이 HTML문서의 제목을 넣어두는 태그라고 보시면 됩니다. 군더더기 없이 그냥 위와같이 넣어두면 브라우저의 제목표시줄이나 탭에 그 안에 있는 내용을 보여주게 되구요 검색엔진에 따라서는 TITLE태그의 내용도 검색에 반영하게 됩니다.

세번째로는 STYLE, LINK 태그가 있습니다. 이부분은 HTML문서의 Style Sheet를 위한 태그로, 웹문서의 스타일을 넣어주는 부분입니다. STYLE태그를 사용하면 아래처럼 태그 안에 일일이 CSS를 넣어주는 형태 (Internal CSS)로 사용을 해야하구요 LINK태그를 사용하면 아래 코드처럼 CSS만을 모아놓은 파일을 link (External CSS)시키는 형태로 사용을 하면 됩니다. CSS에 대해서는 다음에 한번 깊게 다룰 예정이니 여기선 이정도 알아 두면 될꺼 같네요..

그 외에도 <SCRIPT>태그가 올수 있는데요.. 문서에 사용되는 스크립트 언어를 사용하는 태그입니다. 이 태그에서 사용되는 스크립트는 주로 자바스크립트를 사용하는데요.. 아래 코드처럼 외부에 따로 모아둔 파일만을 링크 시킬 수 있구요.. 혹은 아래처럼 직접 스크립트를 작성 해서 사용도 가능합니다. HEAD부분에는 아래에 사용될 함수 등을 미리 선언해주는 정도로 사용을 하게 됩니다. 그 외에 실제로 스크립트를 실행하게 해주는 부분은 문서의 중간이나 최하단(권장)에 위치하게 되는데요 이는 문서가 채 로딩되기도 전에 혹시 모를 스크립트 오류때문에 문서가 안보여질 것을 미리 예방하기 위해 이렇게 사용하곤 합니다.

즉, HTML문서가 브라우저 상에서 렌더링이 거의 끝나서 보여질때쯤 해서 자바스크립트 실행을 시작하는거죠.. 그러면 스크립트에 오류가 있어도 해당 스크립트 실행만 안될뿐, 웹문서를 보는데는 큰 지장 없이 볼 수 있게 됩니다.

위의 이야기들처럼 HEAD는 직접적으로 보이지는 않는 부분이지만 웹문서를 보여주기 위한 아주 중요한 속성들을 담고 있는 부분이라고 보면 됩니다 :)

여기까지 기본적인 이야기였구요 다음번부터는 BODY태그 소개와 함께 대표적인 HTML태그들을 한번 살펴보도록 하겠습니다

'개발이야기' 카테고리의 다른 글

HTML - HEAD 태그  (4) 2010.10.02
HTML 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
2009.12.15 16:00 | 개발이야기

어제에 이어 오늘도 HTML이야기를 계속 해 볼까 합니다 ^^

기본적으로 html문서파일은 우리가 흔히 메모장으로 만드는 일반 텍스트 파일입니다.
즉, html을 작성할때는 일반 메모장으로도 충분히 연습을 할 수 있단 말이 되겠죠??

HTML문서의 기본 구조는 아래와 같습니다.

위의 내용을 메모장에 넣어서 .html 파일로 저장해서 실행을 시켜보면,
브라우저의 창에 "HTML문서가 나오는 부분입니다." 라는 글자를 확인 할 수 있습니다.

단, 저장할때 위 화면처럼 파일형식에 "모든파일", 인코딩에 "UTF-8" 로 저장해야 합니다.

실제로, HTML 태그들을 하나하나 뜯어서 보면,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이부분은 이 html문서가 어떤 문서타입으로 작성이 되었는지 알려주는 부분입니다.
Document Type Declation 이라고 하는데요, HTML의 많은 버전중 어떤 버전으로 작성을 했는지,
브라우저에게 알려주는 역할이라고 보시면 되겠습니다.

많은 버전의 DOCTYPE이 있고, 같은 버전이라도 strict, transitional, frameset 이 있는데요
해당 버전의 DOCTYPE은 여기 에서 확인 해 보시기 바랍니다 ^^

strict의 경우, 엄격한 문서타입을 의미하는데요,
표준을 엄격히 지켜 초창기 사용되던 태그나 특정 브라우저에서만 지원하는 태그의 사용이 제한됩니다.

transitional의 경우엔 strict보다 유연하게 관습적으로 사용되던 태그의 사용이 지원되고요,
framset의 경우 html문서의 frame을 지원하는 문서 타입입니다.

다음에 나오는 <html>은 제일 하단에 위치한 </html>과 짝을 이루는 복합태그입니다.
이제부터 HTML문서가 시작된다는 것을 알려주는 역할을 한다고 보시면 되구요,
하단의 </html>은 여기까지가 HTML문서다 라고 표시를 했다고 보면 됩니다.

이전에도 이야기를 했지만 태그에는 이렇게 시작과 끝이 있는 태그가 있는데요,
이 태그가 가지는 의미는 해당 내용이 여기<html>부터 여기</html>까지 포함된다고 생각하면 되겠습니다.

<head>~</head>
웹문서의 속성 설정을 하는 부분을 뜻합니다.
흔히 생각해서 웹페이지에 표시는 되지 않으나, 전체적인 문서의 속성을 지정해주는 부분이라 보면 됩니다.
예제에서 보시는 meta태그나, title등의 태그 및 그 외에 css나 javascript를 지정해주는 부분입니다.

<body>~</body>
웹문서의 본문이 나오는 부분입니다.
여기서 각종 태그들을 이용해서 웹문서를 나타낸다고 생각하면 됩니다 ^^

그 외에 여기서 사용된 태그를 안내를 해 드리면,

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
웹문서의 문자셋을 지정 해주는 메타태그 입니다 ^^
지금은 이정도로만 알고, 메타 태그에 대해선 나중에 더 자세히 알아보도록 하겠습니다 ^^

<title>~<title>
웹문서의 제목을 지정해주는 태그입니다.
제목이라고 해서 본문에 나오는 부분은 아니고.. 하단 그림처럼 제목표시줄에 나오는 부분입니다 ^^

여기까지 간단한 예제를 통해서 문서의 구조를 살펴 봤는데요,
HTML 문서 작성시 메모장이 불편하긴 하지만 처음 시작할땐 이만큼 좋은것도 없습니다 ^^;

추가적으로 별개의 에디터를 사용하시려면 추천 해 드리는 무료 에디터는,
vim(이건 처음에 사용하기 좀 어렵깁 합니다..^^;)
아크로에디터, 데이지 에디트 등이 있습니다 ^^

이러한 에디터를 사용하면 위의 html 화면처럼 각 부분별로 문법 하이라이팅이 지원되는 등의
편리함을 가지고 문서를 작성 할 수 있습니다 ^^




'개발이야기' 카테고리의 다른 글

HTML - HEAD 태그  (4) 2010.10.02
HTML 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
2009.12.14 16:00 | 개발이야기

지난주의 포스팅은 주로 CSS 그것도 요소의 레이아웃에 대한 이야기를 주로 했었는데요,
아는분들은 알지만, 모르시는분들은 "이놈이 무슨 이야기를 하는건가..." 하셨을겁니다 ^^;

사실 별 생각없이 포스팅을 한건데,
CSS 이미지 스프라이팅(2009/12/07 - [개발이야기] - CSS Sprite 를 이용한 간단한 롤오버 메뉴)을 포스팅한게
시작으로 탄력받아(일명 삘받는다 그러죠?) 작성하게 되었습니다. ^^;

이번부터는 차근차근 처음부터 짚어가도록 할테니 잘 살펴 봐주세요~


HTML (Hyper Text Markup Language) 란?

쉽게 생각하면 우리가 인터넷(WWW)에서 사용하는 웹페이지를 만드는 컴퓨터 '언어' 라고 생각하면 됩니다.
말 뜻대로 하이퍼텍스트를 표현하기 위한 '마크업 언어' 인데요, 마크업 언어란 문서의 구조를 표현하기 위한 언어로
일련의 요소(Element)들을 나열함으로 표현합니다.
뭔가 좀 어려운가요? ^^; 쉽게 풀면.. HTML 태그로 이루어진 문서라고 보시면 되겠습니다.


Tag 란?

위에도 알려드렸지만, HTML에서 문서의 구조를 표현하기 위해 해당 부분의 의미를 알려주는 녀석입니다.
비유를 하자면, 흔히 옷사러갈때 보는 가격태그 에 비유를 하면 되는데요,
가격 태그에는 해당 옷의 브랜드, 가격, 세탁법 등이 나와 있으며 해당 옷이 어떤 섬유로 만들어졌는지
정보를 알려줍니다.. ^^ 이와 마찬가지로 웹문서에서 HTML 태그는,
해당부분이 어떤 부분인지 (제목인지, 문단인지, 인용문구인지)를 정의하는 역할을 합니다.

이 태그들 중에는 혼자가 되어 그 역할을 하는 태그(단독태그),
시작과 끝으로 범위를 나타내는 태그(복합태그)가 있습니다.
단독 태그에는 <br>(line BReak)태그, <img>(image)태그 등 과같이 홀로 쓰이는 태그가 있고,
복합 태그에는 <p>(Paragraph)태그, <hn>(Headline n)태그 등이 있습니다.

문단처럼 문단의 시작과 끝이 있어 그 범위를 알려줘야 하는 부분의 경우엔 복합태그의 형태로 사용하고
이미지처럼 단순히 해당 이미지 하나를 보여줘야 하는 부분의 경우엔 단독태그의 형태로 사용합니다.
복합태그에는 시작태그와 종료태그가 있는데, 위의 예에 나온 p태그를 예로 들면,
<p>는 시작태그에 들어가고, </p>는 이 태그가 끝나는 종료태그로 보면 됩니다. ^^
즉, <p>~</p> 사이에 해당하는 문단을 넣으면 그부분은 브라우저가 문단 이라고 판단하여
웹문서에서 해당 부분을 문단으로 보여주게 됩니다.


하이퍼텍스트란?

결론부터 말씀드리자면 하이퍼텍스트는 웹문서에서 다른 매체(웹문서, 이미지, 영상 등)으로 이동하게끔 하는
기능을 제공하는것을 의미합니다. 
원래 기본 개념은 텍스트와 텍스트를 연결하여 서로 건너뛰기식의 이동(링크)을 제공하는 개념입니다.
하이퍼링크 라고도 하는데요, 이러한 기능이 인터넷에서 World Wide Web 환경으로 들어오면서
일련의 정보에 대한 연관정보들을 한번에 제공할 수 있어 각광받게된 기능입니다. ^^


HTML문서를 어떻게 화면으로 보여지는지?

통신세계에선 규약(Protocol)이라는 녀석이 있습니다.
즉, 서로의 통신방법을 미리 약속을 해 두고 해당 방법으로 통신을 하는 것이지요.

이게 HTML에서도 적용이 됩니다. 이러한 HTML에서 사용되는 일련의 명령들(태그)에 대한 표준을
관리하고 배포하는 기관이 있는데요 그곳이 바로 w3c(World Wide Web Consortium) 이라는 단체입니다.
이곳에서 HTML에 대한 규격을 결정하면 그 규격에 맞춰 브라우저들을 만들게 되고
우리가 작성한 HTML문서는 브라우저에 의해서 규격에 맞게끔 보여지게 되는겁니다. ^^
(이러한 브라우저가 HTML을 해석하고 보여주는 것을 렌더링 이라고 합니다)

실제로 이런 규격에 대한 버전에 여러 개 있는데요, 현재 HTML 5가 꿈틀대고 있답니다 ^^


웹 표준, 웹 접근성이란?

웹 표준이란 w3c에서 만들어놓은 태그를 사용하는 표준 '권고안'을 뜻합니다.
요즘 웹 표준 준수 운동이 큰 이슈인데요 이는, 표준태그 만을 사용해서 웹문서를 만들자는 이야기입니다.
특정 브라우저에서만 보여 질 수 있는 태그를 사용하여 다른 브라우저를 사용하는 유저들의 접근성을 제한하지 않고
표준 태그를 사용하여 많은 브라우저, 많은 플랫폼에서 기능에 제약없이 사용하게끔 하는 내용입니다.

사실, 이러한 웹 표준을 잘 준수하면 웹 접근성이 어느정도 따라 오게 되어있는데요..
이전의 국내 웹 환경은 표를 만들어서 보여지는 <table>태그를 이용하여 웹문서의 레이아웃을 만들었었습니다.
즉, 지금 보는 블로그 화면을 기준으로, 상단에 셀 하나, 중간에 셀 두개, 하단에 셀 하나를 놓고
해당부분에 맞는 내용을 넣곤 했다는 것이지요.. 

이러한 방법은 <table>태그 본연의 기능에서 벗어난 사용이기 때문에 웹 표준에서 벗어나는 일입니다.
이것이 어떻게 웹 접근성과 관련이 있느냐...
웹 접근성은 장애인 비장애인 할 것 없이 누구나 편하게 웹을 쓸 수 있도록 하는 것을 말하는데요
만약, 스크린 리더를 이용하여 웹서핑을 하는 입장에서 봤을때 위의 <table>을 이용한 레이아웃은
스크린 리더가 해당부분을 표의 한 내용으로 안내를 하게 될 것입니다..
사실상 해당 부분 눈으로 보는것은 표가 아닌데 말이죠..

종합해서 쉽게 말하자면 웹 표준, 웹 접근성이란
사람(장애인-비장애인)에 차별 없이, 사용하는 시스템(OS, 브라우저 등)에 차별없이
누구나 웹을 이용할 수 있도록
 
하는 내용을 담고 있다고 보시면 되겠습니다. ^^

딱딱하게 글만 너무 길어졌네요...
정리를 해보자면,

요약.

1. HTML이란? 하이퍼텍스트를 나타내기위한 마크업 언어로 일련의 태그로 이루어져있음.
2. 태그란? 문서의 구조를 표현하기 위해 문서 부분부분을 정의해주는 명령어
3. 하이퍼텍스트란? 문서에서 각 부분부분으로 이동할 수 있도록 해주는 기능 (링크)
4. 웹표준, 웹 접근성이란? 누구나 편하게 웹을 이용할수 있도록 하는 문서 작성에 대한 권고안 


이상입니다.. ^^
다음번에는 HTML문서의 기본적인 구조와 DTD선언, HTML에디터를 소개 해드리도록 하겠습니다 :)


'개발이야기' 카테고리의 다른 글

HTML - HEAD 태그  (4) 2010.10.02
HTML 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
2009.12.11 16:00 | 개발이야기

CSS를 이용하여 레이아웃을 잡을때 크게 세가지를 이용하는데요,
하나가 position, 두번째가 float, 그리고 나머지 하난 이제 다룰 Box Model 입니다 ^^

기본적으로 우리가 html에서 다루는 거의 대부분의 요소[각주:1]는 상자와 같은 Box Model로 되어있습니다.
이전에 다루었던 position이나 float은 해당 요소들이 어느곳에 배치 될 것인지를 각각
절대적인 방법 혹은 상대적인 방법으로 결정을 해 주었다면
이 box model은 해당 요소의 테두리나 여백등의 직접적인 레이아웃을 결정하게 됩니다.

이미지를 하나 보도록 하겠습니다.

Box Model

위의 이미지는 Box Model을 설명 해 놓은 그림입니다.
크게 네가지 영역으로 구성이 되어 있는데요, 각 영역은 다음과 같습니다.

content : 우리가 작성하여 보여지는 영역
padding : content영역을 둘러싸고있는 content와 테두리(border)사이 여백
border : 테두리
margin: 테두리 바깥부분의 여백

또한, CSS 2에 따르면 해당 영역의 width와 height는 content 영역의 크기[각주:2]를 말합니다.
결국 해당 박스의 최종 크기[각주:3]는 content의 width/height의 값에다가 padding과 border값을 합한 값이 됩니다.

자, 그렇다면 위의 값들은 어떤식으로 사용을 하는지 다음 예제를 보도록 하겠습니다.

HTML

CSS

위의 예제들을 브라우저 상에서 보면 다음과 같이 보입니다.

바깥의 검은영역이 wrap 부분이고, 그 안의 하얀색 부분이 box_1 부분입니다.
바깥영역은 margin이 생겼다는것을 볼 수 있도록 하기 위해서 넣어봤는데요..
내부의 box_1 부분을 가지고 설명을 하도록 하겠습니다.

width:250px, height:150px 로 박스의 내용이 들어갈 영역의 크기를 설정합니다.
위의 예는 가로 250px, 높이 150px의 상자가 생성이 됩니다.
이 값은 px(픽셀)로 줄 수도 있고, em이나 %등 다양한 단위로 줄 수 있습니다 ^^

그리고 background-color:#fff 로 해당 영역의 배경색을 설정 해 주는데요
#fff부분이 색상이 들어가는 부분이며 보통은 #ffffff 와 같이 #+여섯자리의 16진수로 표현을 하는데
일부 #ffffff 처럼 모든 자리수가 동일 할때는 보는것처럼 각자리 하나씩만 해서 총 세자리로 표현하기도 합니다.
이 배경색부분은 box model에서 content영역과 padding영역에 적용이 됩니다.

그 다음 남은 속성중 padding: 20px 20px 20px 20px, margin: 40px 40px 40px 40px 가 보이네요
이부분은 각각 padding과 margin영역의 크기를 결정 해 줍니다. 마찬가지로 px, %등 여러 단위가 적용이 가능한데요

사실 이부분은 각각 다음과 같이 표현이 됩니다.

위처럼 각 네부분의 영역을 따로 지정해주는 것을 간편하게 한번에 몰아서 지정해 줄수 있는데요
padding 혹은 margin 다음에 나오는 네부분의 숫자는 각각 위 오른쪽 아래 왼쪽 순서입니다.
쉽게 생각해서 시계 12시방향부터 시작해서 시계바늘이 움직이는 방향순으로 지정해준다고 보시면 됩니다.

또한, 위 예제처럼 모든 영역이 동일한 값을 가진다면 다음과 같이 CSS 선언을 해줘도 됩니다.

이처럼 간략하게 하나만 지정을 해 줄수도 있으며, 연달아 2개 3개도 쓸 수 있는데요,
2개를 지정해주면 상/하 값 좌/우 값을 표현하고,
3개를 지정해주면 상 좌/우 하 이렇게 표현하게 됩니다 ^^

다음 설명할 부분으로 border:10px solid #800000 이 있는데요,
이 부분은 박스모델의 테두리를 지정해주는 부분입니다.

이 border부분도 margin/padding 과 마찬가지로 여러 부분으로 나뉠 수 있는데요
border-top-width, border-right-width, border-bottom-width, border-left-width : 테두리의 굵기
border-top-style, border-right-style, border-bottom-style, border-left-style : 테두리의 모양
border-top-color, border-right-color, border-bottom-color, border-left-color : 테두리의 색깔
이렇게 나눌 수 있습니다. 

즉, border:A B C 로 지정 하는 경우 테두리의 상하좌우 모두 똑같이 설정하는데,
A만큼의 두께로 B모양처럼 C색깔로 설정한다고 보면 됩니다.
이 역시 마찬가지로 border-top, border-right, border-bottom, border-left 로 각각 개별 설정이 가능합니다.

특이하게 여길부분은 style 부분인데요,
이 부분에 사용할 수 있는 값으로는
solid, dashed, dotted, double, groove, inset, outset, ridge 등의 값이 있습니다.
그중에서 실선인 solid를 많이 사용하곤 하지요..^^

크로스 브라우징을 염두해 두고 html문서를 작성하다보면 이러한 박스모델에서 골치썩는일이 생기는데요,
바로 브라우저마다 렌더링을 하는 방식이 달라 아래와 같은 문제점이 발생하기도 합니다.

DTD[각주:4]를 정의하지 않는 쿼크(Quirks) 모드로 렌더링시 브라우저마다 달라지는 현상이 생깁니다.
확인을 해 보면 IE쪽은 width, height가 box model의 border 기준으로 잡혀 있고,
FF쪽은 content영역의 width, height로 잡혀 있습니다. 이를 해결하려면 html 문서에 다음과 같이
DTD를 선언 해 주면 됩니다.

위의 소스에서 <!DOCTYPE HTML.... 로 시작하는 부분이 바로 DTD부분입니다.
이 한줄로 인해서 브라우저는 html문서가 html 4.01 strict[각주:5]로 제작되었다고 해석하고 그에 맞는 렌더링 방법으로
보여지게 됩니다.

이것으로 레이아웃에 필요한 포지셔닝, 플로팅, 박스 모델까지 대충 정리가 되었는데요
이 세가지만 확실하게 알고 있으면 이런 블로그 스킨의 레이아웃을 만든다던가 할때
생뚱맞는 table 태그를 이용해서 레이아웃을 짜는것보단,
조금은 웹표준에 가까운 div태그등을 이용하여 레이아웃을 짜는데 큰 도움이 될듯 하네요 ^^



  1. br, strong 등의 태그는 box model에 해당하지 않습니다. [본문으로]
  2. IE6와 같은 구형 브라우저에서는 이게 잘 지켜지지 않기도 합니다. 이럴땐 DTD를 명시해줌으로 해서 해결이 됩니다. [본문으로]
  3. 사용자가 지정한값이 아닌 실제로 보여지는 상자의 크기 [본문으로]
  4. Document Type Definition 의 약자로, 해당 html문서가 어떤 형태의 html을 가지고 작성했는지 알려주는 역할을 합니다. [본문으로]
  5. DTD에 대한 설명은 http://trio.co.kr/webrefer/html/sgml/dtd.html 에 자세히 나와있습니다. [본문으로]

'개발이야기' 카테고리의 다른 글

HTML 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
2009.12.10 07:30 | 개발이야기

앞서 flow에 따른 float을 살펴 보았습니다.
실제로 float을 사용하다 보면 이리저리 예상치 못한 난관에 부딧히면서 머엉~ 해질때가 많은데요
그런 케이스를 몇개 추려서 한번 보도록 하겠습니다.

위 화면을 보면 뭔가 레이아웃이 깨져 있다는 것을 느낄 수 있을겁니다.
이 화면의 html 구조는 다음과 같습니다.

또한, CSS를 보도록 하겠습니다.

티스토리 스킨을 조금 만져봤던 분이라면 익숙한 구조일 것입니다 ^^;
레이아웃이 블로그 2단 스킨의 그것과 흡사합니다.
근데, 화면을 보면 뭔가 조금 이상해 보일겁니다.. 

넵. 화면에 회색배경으로 된 div 요소..
즉 container 부분의 높이가 자식 요소의 높이를 반영하지 않는 문제점이 보이네요.
이는 floating된 자식의 요소가 부모요소에게 자신의 크기를 전해주지 못해서 생기는 문제입니다.
위의 레이아웃인 경우 보통의 블로그 스킨을 생각하면 footer부분은 화면의 하단에 위치하기때문에
footer부분에서 float을 없애주면 됩니다. 

위의 스타일처럼 clear:both; 를 지정해주면 float이 사라져 아래와 같이 left 요소의 하단에 길게 위치함을
확인 할 수 있습니다.

자, 그렇다면 만약에 이전의 화면처럼 원래 footer가 right 아래 위치해야 한다면 어떻게 해결을 할까요?

방법은 :after[각주:1] 가상선택자를 이용하여 float을 clear 할 수 있습니다.
즉, 아래처럼 container에다 :after 가상선택자를 이용하여 clear:both를 주고 새로운 스타일을 주면 됩니다.

그러면 결과는 이렇게 변합니다.

또한, float은 각각의 크기에 민감합니다. 
위의 상태에서 left 요소의 너비를 400px로 늘려서 확인을 해 보면 right 요소가 아래로 떨어지는것을
확인 할 수 있습니다.

부모 요소(container)의 너비가 700px인데,
자식 요소들이 각각 400px로 합이 800px가 되니 right 요소가 공간이 없어 아래로 떨어지는 현상입니다.
footer는 우리가 너비를 주지 않았기 때문에 유연하게 줄어든거죠 ^^;

특히 이러한 경우는 블로그 스킨에서 종종 나타나는 문제인데요, container가 고정 크기가 아닌 가변적인 크기거나
크기지정을 해 주지 않아서 브라우저의 너비가 충분히 넓을때는 문제없이 보이다가
브라우저의 너비가 좁아지면 해당 부모요소의 너비가 좁아지면서 내부의 자식 요소들의 레이아웃이 깨지기도 합니다.

해결법은 부모요소의 크기를 자식요소들 너비의 합과 같거나 더 큰 고정크기로 바꿔주면 해결됩니다 ^^

적다보니 float을 clear 하는 방법에서 글이 길어지네요..^^;
float에 대한 부분은 이걸로 마치도록 하고,
이후에 float에 관한 유용한 팁이 생각나면 다시 새로운 글로 적어보도록 하겠습니다. ^^



  1. 해당 요소의 뒷부분을 의미합니다. [본문으로]

'개발이야기' 카테고리의 다른 글

HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
2009.12.09 20:33 | 개발이야기

요즘 하루에 한개씩 글을 발행하게 되네요..^^;
오늘은 어제랑 비슷한거 같지만 다른 Float에 대해서 이야기를 해 볼까 합니다.

Float을 사전에서 찾아보니.. 원래 단어의 의미는 부유하다, 표류하다, 둥둥 떠있는 등의 의미가 나오는데요
Float을 이해하려면 요소들이 배치되는 flow(흐름)을 알고 있어야 합니다.

Flow란 브라우저가 요소들을 페이지에 배치하기 위해 사용하는 것으로,
파일의 가장 위에서 아래로 요소의 흐름을 따라가며 만나는 각각의 요소를 보여주게 됩니다.
보여주는 과정에서 블럭 요소를 고려하면서 각각에 라인 브레이크를 넣어주게 됩니다.

어제의 예제를 보면 position을 주지 않은 제일 첫번째의 결과를 놓고 보면
div요소는 결국 블럭요소이므로 각 요소마다 라인 브레이크를 넣어
각각의 요소가 탑 쌓듯 쌓여있는 모습을 보여주게 되는 것입니다.

블럭요소와는 달리 인라인요소의 경우, flow는 위에서 아래로 쌓이는 형태가 아닌
수평으로 왼쪽에서 오른쪽으로 바짝 붙어 흐른다고 생각하면 됩니다[각주:1] ^^

이러한 흐름중에서 float은 단어의 뜻 그대로 flow 에서 해당 요소를 '띄운다' 라고 보시면 됩니다.

그렇다면 아래의 예제를 통해서 float을 익혀보도록 하겠습니다.

HTML

CSS

위의 예제를 저장해서 보면 다음과 같이 요소들이 배치되는 것을 확인 할 수 있습니다.

<div>나 <h1>, <p>와 같은 블럭 요소들은 아까 말한것처럼 위에서 아래로 흐르고,
일반 글자나 <strong> 과 같은 인라인 요소들은 왼쪽에서 오른쪽으로 흐르는것을 확인 할 수 있습니다.[각주:2]

여기서 #img_area 에다가 다음과 같이 속성을 한번 각각 바꿔보도록 하겠습니다.

float:right

float:left

위 스타일의 적용 결과는 각각 다음과 같습니다.

float:right

float:left


즉, float 속성에 의해 블럭요소가 어느쪽에 떠다니는지를 결정 짓게 되는데요,
브라우저는 일반적인 flow에 따라 요소를 배열 하다가 float으로 떠있는 요소를 만날 때,
해당부분 (왼쪽, 오른쪽)으로 둥둥 떠다니게 밀어 넣습니다.
그리고 해당 요소를 일반적인 flow에서 배제를 하도록 합니다.
그 다음 그 이후에 나오는 요소들을 float 속성이 들어간 요소의 경계를 존중 하면서,
나머지 공간에 기존의 flow대로 흘려 보여주게 됩니다.

기본적인 원리는 flow에서 둥둥 떠 다니는 것이지만,
겹쳐지면 안되기때문에 그 경계는 존중을 해 주는 셈이지요 ^^

이러한 float을 이용하면 상하로 쌓이는 기존의 flow를 좌우로 쌓이게 바꿀 수 있습니다.
다음의 문서를 살펴보도록 하겠습니다.

이 문서를 열어보면 다음과 같이 리스트가 생성이 됩니다.

  • menu 01
  • menu 02
  • menu 03
  • menu 04

li 요소가 블럭요소이기 때문에 각각의 리스트는 상하로 쌓이게 되는데요,
이 것을 다음과 같이 css에서 float을 주게 되면 flow가 바뀌게 됩니다.

  • menu 01
  • menu 02
  • menu 03
  • menu 04


flow와 관련된 다른 css 보기

이러한 float과 어제 다룬 position을 잘 이용하면 원하는곳에 요소들을 속속 배치할 수 있게 됩니다.
조금 더 보태서, 뒤에 다룰 박스모델과 함께 이용을 하면 위치잡는데 혼선이 없이 잡아줄수 있습니다 ^^

이번 이야기를 가지고 더이상은 불필요하게 table을 가지고 레이아웃을 짜는 일이 없었으면 합니다 ^^



  1. 일반적으로 텍스트를 넣을때의 경우를 생각하면 상상하기 쉽습니다. 위치를 지정해주지 않은 상태에서 img태그와 일반 문자는 서로 어울리지 못하고 위 아래로 떨어지지만, a태그나 em태그 등의 태그는 계속 오른쪽으로 추가되는 것을 확인 할 수 있습니다. [본문으로]
  2. poem_wrap 블럭은 전체 레이아웃을 위해 잡아두었습니다. [본문으로]

'개발이야기' 카테고리의 다른 글

CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
IE8 다음 지도 API Polyline문제  (9) 2009.11.24
2009.12.08 19:54 | 개발이야기

오늘은 position에 대해 이야기를 해 볼까 합니다.
position 속성은 해당 박스의 위치 기준점을 결정하는 역할을 하는 녀석으로,
기본적으로 position 속성이 갖는 값은 static, relative, absolute, fixed 네가지가 있습니다.
일단, 테스트를 해볼 목적으로 박스를 몇 개 만들어 보고 기본적인 스타일을 적용 시켜 보도록 하겠습니다.

HTML

CSS


위와같이 작성을 하고 브라우저로 불러오면 아래와 같이 요소들이 딱딱 붙어있는 문서를 만날 수 있습니다.


아무 속성을 주지 않으면 기본적으로 position: static 과 동일한 상태를 유지합니다.
static인 상태에서는 위치를 지정해주는 top, left, bottom, right 의 오프셋이 적용되지 않습니다.

자, 그럼 이제 css를 몇군데 살짝 수정해서 relative는 어떤녀석인지 보도록 하겠습니다.


CSS를 위와같이 수정을 하면 다음과 같은 화면을 볼 수 있습니다.


우리가 수정한 요소를 보면 #1번 요소와 #3, #4번 요소의 CSS를 수정 했는데요,
수정을 했더니 위치가 조금씩 변경이 되어있음을 확인 할 수 있습니다.

relative 속성값은 기준점을 상대적(relative)으로 잡습니다.

쉽게 생각해서 해당 요소가 static으로 있을때의 위치를 기준으로 top에서 얼마만큼,
left에서 얼마만큼 움직인다고 생각하면 됩니다.

위의 static일때의 위치와 비교를 해서 보면 어떻게 움직인건지 한눈에 확인 할 수 있습니다 ^^;

다음은 absolute 값인데요, 일단 CSS를 아래와 같이 수정 해 보도록 하겠습니다.


위와 같이 수정을 하면 다음과 같이 화면이 변하는 것을 확인할 수 있습니다.


재미있게 변했는데요, inner요소 자체가 위로 올라가고, inner요소 안에 있던 #4번 요소가
inner 요소 안의 최상단에 위치하게 되고, #1, #2, #3, #5번 요소는 웹문서 영역의 원점(좌측 상단) 을 기준으로
우리가 지정해준 위치대로 위치하게 됩니다.

absolute 값은 말 그대로 '절대적' 인 좌표값을 지정해주는 값입니다.
이전의 static이나 relative와는 달리 자신이 위치했던 공간은 싹 사라지고
그 위에 레이어를 덧붙히듯 붕 뜨는 효과를 가져오게 됩니다.

말 그대로 '절대적' 인 좌표를 갖는다고 생각하시면 됩니다..^^

여기서 #3번 요소는 조금 더 설명이 필요한데요,
그쪽부분은 inner 요소가 static이라 오프셋을 가지지 않아서 위와같이 보이게 되는겁니다.

한번 inner요소가 오프셋을 줘 보도록 하겠습니다.


이렇게 오프셋을 주고나면 화면은 요렇게 변하게 됩니다.


즉, inner요소 밖에 있는 #1, #2, #5번 요소는 웹문서의 좌측상단을 원점으로 해서 보여지게 되고,
inner요소 안에 있는 #3번 요소의 경우 inner요소의 좌측 상단을 원점으로 해서 요소 안에 오프셋을 가지게 됩니다.

#3번 요소의 부모요소(inner)의 left와 top값을 그대로 반영 후, #3번 요소의 값을 반영했다고 보면 됩니다.

마지막으로 fixed가 남아있네요..^^;

fixed는 ie6에서는 구현이 되지 않습니다..^^ 위의 예제에서 #3번요소만 fixed로 바꿔보도록 하겠습니다.


이렇게 바꿔서 보면 inner요소 안에 있던 #3번 요소가 부모요소인 inner밖으로 삐져나오는것을 확인 할 수 있습니다.


이 fixed값은 기본적으로 화면의 좌측 상단을 원점으로 갖게 해주는데요,
재밌는점은 웹문서가 스크롤이 생겨 스크롤을 할 시, 해당 요소는 항상 같은 위치에 고정적으로 보여지게 됩니다.


이처럼 말이죠..^^

absolute와 fixed의 큰 차이점은 이렇게 화면에 고정적으로 보여진다는점,
즉 absolute는 부모요소의 오프셋을 받아와서 거기서 자신의 오프셋을 정하지만,
fixed는 해당 화면을 기준으로 오프셋을 결정한다는 점 입니다.

이러한 요소의 오프셋을 주는건 가끔 꼬이면 막막하게 느껴질때가 많습니다.
여러 요소들이 중첩되어있는 경우라면 더 심각하죠..^^;

이러한 네가지 값에 따라 어떤식으로 오프셋이 변하는지를 확실하게 알고 가면
조금 시간이 걸릴뿐, 요소들의 위치를 잡는데 큰 도움이 되지 않을까 합니다.

'개발이야기' 카테고리의 다른 글

CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
IE8 다음 지도 API Polyline문제  (9) 2009.11.24
다음 지도 API를 이용한 GPS정보 처리  (3) 2009.10.22