'css'에 해당되는 글 5건
- 2009.12.11 CSS : Box Model
- 2009.12.10 CSS : Float 흐름끊기 2
- 2009.12.09 CSS : Float
- 2009.12.08 CSS Position 이야기 9
- 2009.12.07 CSS Sprite 를 이용한 간단한 롤오버 메뉴 2
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문서를 작성하다보면 이러한 박스모델에서 골치썩는일이 생기는데요,
바로 브라우저마다 렌더링을 하는 방식이 달라 아래와 같은 문제점이 발생하기도 합니다.
DTD4를 정의하지 않는 쿼크(Quirks) 모드로 렌더링시 브라우저마다 달라지는 현상이 생깁니다.
확인을 해 보면 IE쪽은 width, height가 box model의 border 기준으로 잡혀 있고,
FF쪽은 content영역의 width, height로 잡혀 있습니다. 이를 해결하려면 html 문서에 다음과 같이
DTD를 선언 해 주면 됩니다.
위의 소스에서 <!DOCTYPE HTML.... 로 시작하는 부분이 바로 DTD부분입니다.
이 한줄로 인해서 브라우저는 html문서가 html 4.01 strict5로 제작되었다고 해석하고 그에 맞는 렌더링 방법으로
보여지게 됩니다.
이것으로 레이아웃에 필요한 포지셔닝, 플로팅, 박스 모델까지 대충 정리가 되었는데요
이 세가지만 확실하게 알고 있으면 이런 블로그 스킨의 레이아웃을 만든다던가 할때
생뚱맞는 table 태그를 이용해서 레이아웃을 짜는것보단,
조금은 웹표준에 가까운 div태그등을 이용하여 레이아웃을 짜는데 큰 도움이 될듯 하네요 ^^
[관련글 보기]
2009/12/10 - [개발이야기] - CSS : Float 흐름끊기
2009/12/09 - [개발이야기] - CSS : Float
2009/12/08 - [개발이야기] - CSS Position 이야기
- br, strong 등의 태그는 box model에 해당하지 않습니다. [본문으로]
- IE6와 같은 구형 브라우저에서는 이게 잘 지켜지지 않기도 합니다. 이럴땐 DTD를 명시해줌으로 해서 해결이 됩니다. [본문으로]
- 사용자가 지정한값이 아닌 실제로 보여지는 상자의 크기 [본문으로]
- Document Type Definition 의 약자로, 해당 html문서가 어떤 형태의 html을 가지고 작성했는지 알려주는 역할을 합니다. [본문으로]
- DTD에 대한 설명은 http://trio.co.kr/webrefer/html/sgml/dtd.html 에 자세히 나와있습니다. [본문으로]
'개발이야기' 카테고리의 다른 글
| HTML 기본 구조 (2) | 2009.12.15 |
|---|---|
| HTML (4) | 2009.12.14 |
| CSS : Float 흐름끊기 (2) | 2009.12.10 |
| CSS : Float (0) | 2009.12.09 |
| CSS Position 이야기 (9) | 2009.12.08 |
앞서 flow에 따른 float을 살펴 보았습니다.
실제로 float을 사용하다 보면 이리저리 예상치 못한 난관에 부딧히면서 머엉~ 해질때가 많은데요
그런 케이스를 몇개 추려서 한번 보도록 하겠습니다.
이 화면의 html 구조는 다음과 같습니다.
또한, CSS를 보도록 하겠습니다.
티스토리 스킨을 조금 만져봤던 분이라면 익숙한 구조일 것입니다 ^^;
레이아웃이 블로그 2단 스킨의 그것과 흡사합니다.
근데, 화면을 보면 뭔가 조금 이상해 보일겁니다..
넵. 화면에 회색배경으로 된 div 요소..
즉 container 부분의 높이가 자식 요소의 높이를 반영하지 않는 문제점이 보이네요.
이는 floating된 자식의 요소가 부모요소에게 자신의 크기를 전해주지 못해서 생기는 문제입니다.
위의 레이아웃인 경우 보통의 블로그 스킨을 생각하면 footer부분은 화면의 하단에 위치하기때문에
footer부분에서 float을 없애주면 됩니다.
위의 스타일처럼 clear:both; 를 지정해주면 float이 사라져 아래와 같이 left 요소의 하단에 길게 위치함을
확인 할 수 있습니다.
자, 그렇다면 만약에 이전의 화면처럼 원래 footer가 right 아래 위치해야 한다면 어떻게 해결을 할까요?
방법은 :after1 가상선택자를 이용하여 float을 clear 할 수 있습니다.
즉, 아래처럼 container에다 :after 가상선택자를 이용하여 clear:both를 주고 새로운 스타일을 주면 됩니다.
그러면 결과는 이렇게 변합니다.
또한, float은 각각의 크기에 민감합니다.
위의 상태에서 left 요소의 너비를 400px로 늘려서 확인을 해 보면 right 요소가 아래로 떨어지는것을
확인 할 수 있습니다.
부모 요소(container)의 너비가 700px인데,
자식 요소들이 각각 400px로 합이 800px가 되니 right 요소가 공간이 없어 아래로 떨어지는 현상입니다.
footer는 우리가 너비를 주지 않았기 때문에 유연하게 줄어든거죠 ^^;
특히 이러한 경우는 블로그 스킨에서 종종 나타나는 문제인데요, container가 고정 크기가 아닌 가변적인 크기거나
크기지정을 해 주지 않아서 브라우저의 너비가 충분히 넓을때는 문제없이 보이다가
브라우저의 너비가 좁아지면 해당 부모요소의 너비가 좁아지면서 내부의 자식 요소들의 레이아웃이 깨지기도 합니다.
해결법은 부모요소의 크기를 자식요소들 너비의 합과 같거나 더 큰 고정크기로 바꿔주면 해결됩니다 ^^
적다보니 float을 clear 하는 방법에서 글이 길어지네요..^^;
float에 대한 부분은 이걸로 마치도록 하고,
이후에 float에 관한 유용한 팁이 생각나면 다시 새로운 글로 적어보도록 하겠습니다. ^^
- 해당 요소의 뒷부분을 의미합니다. [본문으로]
'개발이야기' 카테고리의 다른 글
| HTML (4) | 2009.12.14 |
|---|---|
| CSS : Box Model (0) | 2009.12.11 |
| CSS : Float (0) | 2009.12.09 |
| CSS Position 이야기 (9) | 2009.12.08 |
| CSS Sprite 를 이용한 간단한 롤오버 메뉴 (2) | 2009.12.07 |
요즘 하루에 한개씩 글을 발행하게 되네요..^^;
오늘은 어제랑 비슷한거 같지만 다른 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
이러한 float과 어제 다룬 position을 잘 이용하면 원하는곳에 요소들을 속속 배치할 수 있게 됩니다.
조금 더 보태서, 뒤에 다룰 박스모델과 함께 이용을 하면 위치잡는데 혼선이 없이 잡아줄수 있습니다 ^^
이번 이야기를 가지고 더이상은 불필요하게 table을 가지고 레이아웃을 짜는 일이 없었으면 합니다 ^^
'개발이야기' 카테고리의 다른 글
| CSS : Box Model (0) | 2009.12.11 |
|---|---|
| CSS : Float 흐름끊기 (2) | 2009.12.10 |
| CSS Position 이야기 (9) | 2009.12.08 |
| CSS Sprite 를 이용한 간단한 롤오버 메뉴 (2) | 2009.12.07 |
| IE8 다음 지도 API Polyline문제 (9) | 2009.11.24 |
오늘은 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 Sprite 를 이용한 간단한 롤오버 메뉴 (2) | 2009.12.07 |
| IE8 다음 지도 API Polyline문제 (9) | 2009.11.24 |
| 다음 지도 API를 이용한 GPS정보 처리 (3) | 2009.10.22 |
조금은 철 지난 이야기이긴 하지만,
예전에는 마우스를 메뉴위에 올려두면 색이 바뀌는 메뉴가 대세(?)를 이루던 때가 있었습니다.
(요즘은 포털이 아닌 왠만한 사이트에선 플래시를 많이 활용하더군요)
제가 아주 어릴적.. 그러니까 중학교 시절엔 어렴풋이 이런 기능을
자바스크립트의 마우스 이벤트로 처리 했었던 기억이 납니다..
(확실한건 아닙니다..^^;)
최근에는 각 포털들의 이러한 롤 오버 메뉴를 CSS Sprite
기법으로 표현을 많이 하는데요
이는, 각각 개별의 이미지를 잘라서 해당 이미지를 로딩하는 대신, 한번에 로딩을 하여
http-request를 줄여보기 위해 많이 사용합니다.
즉, 위의 화면에서 검은색 HOME과 빨간색 HOME을 따로 만들어서 보여주는 방식이 아닌
한 페이지에 모아놓고 그것을 위치만 바꾸는 식으로 보여주는 방법인데요,
이러한 이미지를 만들어 놓고, 평소엔 검은부분만 보여주다가,
마우스가 해당 부분 위에 올라가면 이미지를 위로 올려 붉은색 HOME을 보여주는 방법입니다.
간단히 만들어본 예제는 다음과 같습니다.
HTML
CSS
위의 코드를 보면 핵심은 background 이미지 스타일에 있습니다.
배경이미지를 넣은 박스의 크기를 HOME 텍스트에 딱 맞춘 가로 43px, 세로 12px로 만들어 놓고,
배경이미지의 좌표를 0 0 으로 설정해놓고 보면 당연히 검은색 HOME 텍스트만이 보이게 됩니다.
(박스 크기 때문에 하단의 붉은 글자는 안보이죠)
여기서 이제 마우스가 올라왔을때,
배경이미지의 y축을 -25px만큼 당겨주면 붉은색 HOME이 보여지게 되는 원리입니다.
다음의 경우 이러한 스프라이트를 많이 활용하는 편인데요,
미디어 다음 스포츠의 메뉴를 보면 다음과 같은 이미지 하나로 이루어져 있음을 알 수 있습니다.
이 메뉴의 경우 마우스가 오버되었을시 변하는 것은 아니지만,
각 페이지마다 on/off 되는 이미지를 한데 묶어, 각 부분에 맞는 background-image position값을 조절하여
적절하게 사용을 하고 있었습니다.
기본적인 배경이미지의 스타일인 경우 아래와 같이 on인 경우의 이미지를 보여주게 되어 있습니다.
또한, off의 경우 position은 아래와 같이 주고 있습니다. (보이는 스타일은 축구메뉴 에 관련된 스타일입니다)
이 방법이 메뉴의 수가 적은 경우엔 큰 차이가 없지만, 포털사이트처럼 메뉴가 많은 경우엔 꽤 많은 request를 줄여 줄 수 있지 않을까 싶습니다. 또한, 이미지 관리가 훨씬 쉬워지겠죠 ^^;
'개발이야기' 카테고리의 다른 글
| CSS : Float 흐름끊기 (2) | 2009.12.10 |
|---|---|
| CSS : Float (0) | 2009.12.09 |
| CSS Position 이야기 (9) | 2009.12.08 |
| IE8 다음 지도 API Polyline문제 (9) | 2009.11.24 |
| 다음 지도 API를 이용한 GPS정보 처리 (3) | 2009.10.22 |
