그럼 이제 간단하게 아래와 같이 롤오버했을때 색상이 변하는 메뉴를 만드는 연습을 해보자.

 

 

 

 

 

먼저 5개의 메뉴를 옆으로 나란히 늘어놔야 된다.

이때, 아래 1번과 같이 <ul><li>를 사용하는것과 2번처럼 그냥 <div>로 감싸는 방법이 있다면

메뉴는 리스트 요소이므로 시멘틱한 웹을 위해 <ul><li>를 써주는 방법이 좋다.

(컴퓨터에 이건 순서가 없는 목록이라는 걸 인식시킴)

 

 

 

 

 

 

근데 1번처럼 <ul><li>를 사용하면 각각이 블럭요소이기 때문에 한 줄씩을 다 차지해 버린다.

(2번 <div>도 블럭요소이지만 하나로 되어있으므로 옆으로 나란히 배치)

 

때문에 가로로 정렬시키는 float을 사용해 줘야 한다.

 

 

 

 

 

 

이 때, float을 3번처럼 <li>에 줘야할까? 4번처럼 <a>링크에 줘야할까?

3, 4번 모두 결과는 같아보이지만 엄연히 다르다.

 

 

 

 

 

여기에 css속성을 넣어 꾸며보면 그 차이점을 명확히 알 수 있다.

 

<li>에 백그라운드 컬러와 패딩, 마진을 주고  모서리를 라운딩시키는 {border-radius}를 줬다.

 

*border-radius

css3의 속성 중 하나로 익스플로러 9이하에서는 적용되지 않는다.

파이어폭스, 크롬 등은 적용되지만 익스플로러9 이하를 아직까진 많이 사용하고 있는 우리나라에선 

실제적으로 html5+css3 자리잡기 위해서는 시간이 좀 더 필요하다. 

모서리가 라운딩되는 순서는 왼쪽위, 오른쪾위, 오른쪽아래, 왼쪽아래 이다.

 

*여기선 보기 편하게 <li>에 직접 스타일을 줬지만 일반적으론 <li>에 클래스 네임을 줘서 이름을 불러 사용.

 

 

 

 

어쨌든 3번과 같이 <li>에 float를 넣었을 때 링크가 걸리는 영역은 아래처럼 딱 글자공간밖에 되지 않는다.

 

 

 

 

 

하지만 4번처럼 <a>링크에 float을 넣어주면 효과가 들어간 색상 영역까지 모두 링크가 걸린다.

이는 사용자의 편의를 위해 당연히 <a>링크에 걸어주는게 좋다는걸 알 수 있다.

 

 

 

 

 

 

 

 

근데 만약 <ul>에 아래처럼 빨간테두리를 친다면 float에 의해 메뉴들이 떠 있는 상태이므로

테두리는 밑으로 들어가 위쪽에 붙어버린다.

 

 

 

 

 

이를 바로 잡기위해 부모인 <ul>에 {overflow:hidden}을 넣어 플롯클리어시키면 테두리는 정상적으로 둘러진다.

 

 

 

만약 메뉴에 테두리가 들어가지 않더라도 이 개념은 확실히 알아야하며

더 정확히는 아래글들을 참고하면 될 듯하다.

 

2013/06/20 - [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S

2013/06/22 - [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S

2013/07/07 - [웹표준코딩] 플롯클리어 방법 by S

 

 

 

 

그럼 마지막으로 마우스를 롤 오버했을 때 색상이 변하도록 속성을 추가해 넣어주면 간단한 메뉴만들기 완성~!!!

 

 

 

 

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

 

 

 

line-height 는 글줄 사이의 수직여백을 조정하여 글의 가독성을 높이기 위해 사용된다.
얼핏보면 매우 간단한거 같지만 그 개념을 정확히 모를땐 내 맘대로 조정이 안되는 까다로운 놈이다.

 

 

이제 차근차근 알아보자.

 

Line_height를 지정하는 방법.

1. 퍼센트값으로 지정.
   ex) p {line-height:120%; }

2. 길이 단위 값(px,em 등)을 사용해서 지정.
   ex) p {line-height:20px; }

3. 숫자 값을 사용해서 지정.
   ex) p {line-height:1.3; }

 

 

 

라인하이트나 글자크기, 글자색상과 같은 속성은 자식에게 상속되는 성질을 가지고 있는데
라인하이트의 경우는 지정방법에 따라 상속방식이 좀 다르다.


부모인 body안에 <h1><p>라는 자식요속가 있다고 보자.

아래와같이 body의 font-size를 18픽셀로 지정하고 h1은 30픽셀, p는 11픽셀로 별도로 지정했다.

body {font-size:18px; }
h1 {font-size:30px; }
p {font-size:11px; }

 


첫번째, body에 line-height:120%;을 넣으면

body의 폰트크기값(18px)의 영향으로 18x120%=21.6 의 결과값을 만들어내며 이는 자손에게 상속된다.
body에서 계산된 21.6px의 라인하이트값은 h1에서도 21.6px, p에서도 21.6px로 똑같이 지정되니
상대적으로 폰트사이즈가 큰 h1은 간격이 매우 좁아보일 것이며,

폰트사이즈가 작은 p는 간격이 매우 넓어보일 것이다.

 

실제로 해서 브라우저에 랜더링 해보면 아래와 같이 나오는데
만일, h1처럼 폰트사이즈(30px)가 라인하이트값(21.6px)을 넘어버리면 라인하인트값에 맞춰

글자가 겹치는 현상이 생겨버린다.

 

 


또 여기서 보면 글줄 사이의 공백은 (라인하이트값-폰트사이즈)가 반으로 나눠져서

글자 위아래로 채워진다는걸 알 수있다.

 

 

 

두번째, body에 line-height:20px;을 넣으면
첫번째 경우와 마찬가지로 라인하이트값 20px은 자손에게 상속되어 h1과 p에 똑같이 지정된다.
그럼 첫번째 경우와 별반 달라지지 않는다.

 

 

 


그렇다면 세번째 방법인 body에 숫자값을 넣어 line-height:1.3;으로 지정하면 어떨까?
이 경우는 body에서 계산된 결과값 18x1.3=23.4(px)이 상속되는것이 아니라
1.3 만 상속되어 폰트크기에 따라 각기 다른 line-height값을 만들어낸다.

h1=30 x1.3= 39(px) <- h1의 라인하이트값 
p=11 x1.3= 14.3(px) <- p의 라인하이트값 

실제로 해보면 아래와 같다.

 

 

 

 

 

 

그렇기 때문에 폰트크기에 따라 유동적으로 움직이는 숫자값을 사용하는 것이

가장 적절한 방법이라 할 수 있다.


그렇지만 이 역시 모든 상황에 보기좋은 여백을 딱 맞게 만들어내긴 어려우므로
일단 전체적으로 line-height값을 지정해놓고 필요한것만 나중에 따로 한번 더 속성을 주면 된다.

 

 

 

 

 


이렇게 전체적으로 영향을 미치는 line-height값을 처음에 지정해놓고 중간에 바꾸면 큰일나므로

주의할 것!

 

 


 

 

 

 

덧붙이자면

인터넷 익스플로러나 파이어폭스 같은 브라우저들은 line-height 속성을 따로 주지 않을 시 1.0~1.2의 값을
초기 기본값으로 사용한다.


앞에서 포스팅했던 리셋css에서 사용된 에릭마이어란 사람이 만든 기본리셋을 살펴보면

line-height를 '1'로 기본값으로 주고 시작하는데

 

 

 


외국에서 일반적으로 사용하는 기본값인 1은 영어에선 가독성이 크게 떨어지지 않지만

한글은 그렇지 못하다.
이는 같은 픽셀의 폰트사이즈라도 글자종류나 글씨체에 따라 공간을 차지하는 내용영역이 다르기 때문.

 

 

이 때문에 한글을 사용할 경우 기본셋팅을 보통 본문 12픽셀 폰트기준으로 1.3~1.5로 놓고 시작한다고

보면 된다^^

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

 

 

 

사실 이쪽은 아무도 안보고
나 혼자 미친X 마냥 떠드는 느낌인지라;; 좀 버려두고 있었는데
며칠 전 어떤분의 요청으로 간만에 포스팅 ㅋ


배치를 할때 플롯과 포지션이 있지만 대부분 앞에서 포스팅한 플롯(float)을 쓰고
포지션으로 배치하는 방법은 잘 쓰지 않는다.

하지만 이것도 가끔 쓸데가 있으니 알아두자.


포지션은 top, left, right, bottom 을 이용해서 위치를 지정하는데 사용법은 간단하다.

 


1. position:relative;

 

앞의 위치값을 기억하고 상대적인 위치를 지정한다.

 

아래는 100x100짜리 빨간 박스에 position:relative; 를 주고,

위에서 100픽셀, 왼쪽에서 100픽셀의 위치를 지정해 주었다.

이때, body에는 패딩20px을 주고

부모인 mother에 400x400짜리 두께가 5px인 검정테두리를 만들면 아래처럼 보여진다.

 

 

 

 

 

 

그럼 빨간박스는 body에 넣은 패딩값과 부모에 들어간 테두리5px에 영향을 받아
위쪽에서 125px, 왼쪽에서 125px인 지점에 위치한다.

물론 여기서 mother를 없애 버리면 body값 20px만 영향을 받는다.

이렇게 다른것들과 연관해서 상대적인 위치를 지정할 때 쓰이는게 position:relative; 이다

 

 

 

2. position:absolute;

 

그 자리에서 떠있기는 한데 플롯이랑 개념이 다르게
부모를 완전 무시하고 혼자만의 자유로운 자아를 가진다. 대기권밖으로 혼자 날라가 있는 느낌이랄까...

 

부모에 position:relative;를 사용하면 그 기준점을 찾는다.
아무런 기준점이 없으면 바디가 그 기준이 된다.
물론 기준점만 잡고 패딩이나 마진같은 그 외의 데이터의 영향은 전부 무시한다.

 

위에서 했던 빨간박스에 파란박스를 추가해서 position:absolute;를 주면
그 차이점을 확실히 알 수 있다.

 

 

 

 

 


그리고 아래는 부모에 position:relative;를 사용해서 기준점을 잡아주었을때의 변화

 

 

 

 


이건 보통 레이어로 띄우는 팝업같은데에 사용한다.

 

 

 

3. position:fixed;

 

아무 영향도 안받고 뷰(view)를 기준으로 항상 고정되어 있다.
메뉴, 로고, 따라다니는 장바구니, 플로팅광고 같은데 사용된다.

 

아래처럼 위에서 100px떨어진곳에 우측으로 붙여 녹색박스를 위치시켰을 때
브라우져의 창을 늘이거나 줄여도 항상 그 위치에 고정되어있다.

 

 

 


현재 블로그 오른쪽의 따라다니는 경고문이 바로 이 position:fixed;를 사용한 것이다.

 

 

포지션은 플롯보다 매우 쉽고 간편한 방법이긴 하지만

팝업같이 꼭 필요한데에만 사용하고 배치할때 가급적이면 사용하지 않는게 좋다.^^

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

 

 

 

앞에서 플롯을 초기화시키는 방법으로 부모에 조취를 취하는 방법을 알아봤다면
이번엔 자식에 조취를 취하는 방법을 보자.

 

 


일반적으로 많이 사용되는 홈페이지 기본 레이아웃 구조는 아래와 같다.

 

 

 

 

이 레이아웃을 실전에 살짝 응용해서 코딩을 한다면,


일단 전체를 랩(wrap)으로 감싸 브라우저의 사이즈에 상관없이 가운데 정렬되게 만든 후

.wrap {width:800px; margin:0 auto;} <위드값이 들어가거나 이미지 같은것들이 받치고 있어야 함>


상단에 header를, 왼쪽 메뉴(side)와 컨텐츠부분(content)을 main으로 한번 더 감싸주고, 하단에 footer를 넣었다.

 

 

 

 

 


여기서 왼쪽 메뉴와 컨텐츠부분을 나란히 가로배치시키기 위해

둘다 float:left;를 사용하여 공중으로 띄웠으며

두 개 모두 공중에 뜬 상태이기 때문에 footer에 파란색 라인을 넣었더니

아래와 같이 main영역을 침범해 밑으로 기어들어간다.

 

 

 

 


이때 footer에 나부터는 플롯의 영향을 받지 않겠다clear:both;를 넣어주면
이제 정상적으로 footer영역에만 라인이 그어진다.

 

 

 

 

 

 

 

 

 

2013/07/07 - [말랑말랑 컴퓨터/웹표준코딩 html&css] - 플롯클리어 방법 by S

 

여기서 만약 앞 글의 overflow:hidden(넘치면 잘라라)을 사용해서 플롯초기화 시킨다면
레이어 팝업을 띄웠을때 위치에 따라 팝업이 잘리는 문제가 생기고,


display:inline-block;를 사용하여 메인을 인라인속성으로 바꿔버리면
가장 코딩이 많이 들어가야하는 main영역에서 앞으로 무슨일이 있을지 모르기 때문에


이때는 최대한 안의 영역은 건드리지 않고 바깥인 footer에서 해결하는 이 clear:both;를 사용하는 것이다.

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

댓글을 달아 주세요

 

 

 

오랜만에 웹표준 공부글을 쓴다.
요새 왜이리 공부글이 쓰기 싫은지...ㅜㅜ
휴...반성반성.

 

 


플롯(float)을 줌으로 인해 생기는 변화를 어느순간 없애야 할 때가 있다.


이전 시간에 float을 주고 그를 감싼 부모에 테두리를 주면 테두리가 위로 붙어버리는 현상을 봤다.

다시 잠깐 보자면 이미지와 문장에 각각 float:left;를 주고

그 둘을 감싼 부모에 검은색 4픽셀짜리 테두리를 쳤더니
테두리가 위로 올라가서 붙어버린다. (붙어버린 라인의 두께는 8픽셀)

 

 

 

 

 

이는 아래처럼 이미지에만 float:left; 를 주어 부모에 테두리를 감쌀때 생기는 현상과는 다르다.

 

 

 

왜냐하면 이미지와 문장 모두에 float:left; 를 주게되면 둘다 공중에 뜨면서 테두리가 밑으로 기어들어가기 때문.

 

 


이를 해결하기 위해 플롯클리어시켜야 하는데 플롯클리어시키는 방법은 여러가지가 있다.
이것은 원래 정해져있던게 아니라 많은 사람들이 하나씩 찾아낸 방법으로 조금씩 성질이 다르다.

 

 

 

 

 

오늘은 부모한테 조치를 취하는 3가지 방법을 알아보자.

 

 

1. 부모에 overflow:hidden; 을 준다.

 

이미지와 글을 감싸고 있는 mother에 overflow:hidden;을 준다.

그럼 아래와 같이 자식들이 정신을 차리면서 부모가 자식들을 컨트롤 할 수 있게 된다.

 

 

 

 


이때, 부모에 width값을 따로 주지 않았기 때문에 윈도우창을 늘이던 줄이던 테두리의 가로값은 항상 100%를

가진다. (블럭요소의 일반적인 성질)

 

원래 오버플로어 히든은 높이에 맞춰 자를때 쓰는 속성이다.
하지만 여기서는 그 자를 기준이 없으므로 자신의 속성만 남게되는데 그 속성이 박스에 영향을 미치고
그 영향으로 인해 클리어시키는것.

 

 

 

 

 

 

2. 부모에 float:left;width값 준다.

 

플롯레프트는 width값을 주지 않으면 가능한 범위내의 최소한의 값을 가지는 성질이 있다.
이는 플롯박스라는 성질로 바뀌기 때문인데 이걸 이용해 아래처럼 플롯클리어 시키는것이다.

(만일 width값을 주지 않는다면 아래 3번과 마찬가지의 형태가 된다.)

 

 

 

 

 

 

 

 

3. 부모에 display:inline-block; 을 준다.

 

기존 <div>블럭요소가 2번에서는 플롯의 성질로 변환되었다면 여기선 인라인요소로 변환되면서

2번과 마찬가지로 100%가 아닌 가능한 범위내의 최소한의 값을 가진다.

 

하지만 가로,세로값을 줄 수 없는 일반적인 인라인요소와 다르게 <img>태그처럼 width값과 height값을 따로

지정해줄 수 있게 만든것이다.
이를 이용해 플롯클리어 시키는 것인데 여기에 width값을 주게되면 2번과 같은 효과가 나타난다.

 

 

 

정리하자면 1번은 여전히 블럭박스의 성질이고 2번은 플롯박스의 성질로 변환, 3번은 인라인박스의 성질로

변환된 것.

그러므로 1,2,3 모두 width값을 별도로 주지 않았을때

1은 100%의 자기영역을 차지하고 2,3 번은 자기가 가질 수 있는 최소한의 값을 가진다.

물론 세개에 width값을 지정해 준다면 전부 2번과 같은 결과가 될 것이다.

 

 

 

 

 

=====================================================================================================

 

 

 

그런데 만일 아래처럼 전체의 높이값이 따로 지정되어 있다면 굳이 플롯클리어를 하지 않아도 된다.

 

 

 

 

 

클리어는 높이(height)가 별도로 지정되어 있지않은,

내용의 길이에 따른 높이의 유동성이 있을때 사용한다는 것을 알아두자.

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

 

 

 

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S

 

앞에서 이미지 밑으로 흘러내리는 글의 레이아웃을 봤다면

이번에 테이블을 사용한 듯 가로로 나란히 배치되는 레이아웃을 보자.


이미지에 float:left를 써서 왼쪽에 붙게했을때 글은 자연스럽게 이미지 아래로 흐르지만

글이 길어져도 레이아웃을 유지한채 이미지 옆에 배치시키면서 테두리를 둘러야할때가 있다.

 

 

이때는 글에도 역시 float을 써주면 되는데 실제로 해보면 아래와 같다.
200x200사이즈의 이미지를 하나 넣고 이미지와 글에 각각 { float:left; }를 주고

글에는 2픽셀짜리 파란색 테두리를 쳤다.

 

 

 

 

이렇게 되면 블럭박스가 글과 함께 움직이기 때문에 이때 사용한 가로사이즈 300픽셀은

온전히 글의 넓이가 되는것이다.
테두리도 역시 글에만 제대로 둘러진다.


(만약 이와 똑같이 했는데 이미지옆에 글이 같은 높이로 붙지 않는다면 리셋css를 사용하지 않았기 때문이므로 아래글을 참고할것.)

http://yslife.tistory.com/402

 

 

 

 

 

여기서 엥? 오른쪽에 붙이는데 글은 float:right 아냐? 라고 생각할수도 있다.
그렇지만 이렇게 하면 두개가 나란히 붙는게 아니라 아래와 같이 브라우저창을 기준으로 양쪽끝에 붙는다.

 

 

 

만일 글에다 float:right 를 사용하려면 그림과 글을 감싸고있는 부모인 mother에 넓이값을 지정해주면 되는데

그림이 200px, 글의 가로값이 300px이라고
mother의 가로값에 500픽셀을 준다면 아래와 같은 형태가 되어버린다.

 

 

 


왜 그럴까?

 

바로 글에 둘러진 테두리 2픽셀값을 생각하지 않았기 때문이다.
테두리 양쪽 4픽셀을 합하여 총 504픽셀이 되는데 부모의 width값을 500픽셀로 주었더니

들어갈 자리가 모자라서 밑으로 밀려내려가는 것.

 

이때, 가로값이 모자라는 상황에서 둘다 float:left 였다면 글이 아래로 내려가면서 왼쪽으로 붙는건 당연하다.

이렇게 되면 float을 써놓고도 전혀 먹지 않은듯 하니 이유를 모르면 여기서부터 헤매기 시작한다.

 

 


그렇다면 mother에 width값을 504px로 바꿔주거나 <p>의 width값을 296px로 바꿔준다면

글에다 float:right를 써도 원래대로 나란히 붙게 할 수 있을 것이다. 

 

이만큼 width값을 지정할땐 단 1픽셀만 어긋나도 민감한 상황이니 주의할것!

 

 

 

 

 


그런데 만일 부모인 mother에 테두리를 친다면 어떻게 될까?

 

여기서 글과 그림은 float의 사용으로 모두 공중에 떠있는 상태이기 때문에

부모 mother에 4픽셀짜리 검은색 테두리라인을 넣어보면
전체를 감쌀거라 생각했던 라인은 글과 그림을 무시하고 그대로 위쪽으로 붙어버리는 웃기는 상황이 발생한다.
(위에 붙은 검은색 라인은 위와 아래가 붙어버렸기때문에 4+4해서 총 8픽셀의 두께를 가진다.)

 

 

 

 

 

 


그렇기때문에 바뀌어버린 플롯의 성질을 어느순간 다시 제자리로 만들어야 할 때가 있다.
이를 플롯클리어 시킨다고 하는데 이는 다음 포스팅에서 다루겠음.

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

 

 

 

이전까지 세로의 배치를 했다면 이제 가로배치의 핵심 플롯(float)을 알아보자.
사실 세로로 배치하는건 쉽고 간단하지만 항상 문제가 되는것이 바로 가로 정렬이다.

 

플롯(float)은 [부유하다], [떠있다] 라는 의미를 지니고 있다.
기본적으로 테이블을 사용하지 않고 마크업을하면 아래로 쭉~나열되는데
원하는 부분을 띄워서 오른쪽에 배치하거나 띄워서 왼쪽에 배치하거나...

이런식으로 가로로 연결하여 배치해 나가는 것이다.


이 플롯의 개념만 정확히 이해하고 사용할 수 있어도 웹표준코딩의 기본 레이아웃을 어느정도 잡을수 있다.
물론 테이블을 사용해버리면 쉽겠으나 테이블로 레이아웃을 잡는건 웹표준과 웹접근성의

권장사항에 어긋나므로...

 

 

어쨌든 이 플롯을 확실히 이해하기 위해서는 앞전의 블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box)의 개념을 정확히 알고 성질을 파악해야 한다.

 

블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box) 보러가기

 


이러한 블럭박스나 인라인박스에 float를 주면 플롯박스라는 다른 성질로 변하면서

기존 고유의 성질이 바뀌어 버린다.
예를들어 한칸을 다 차지해야 직성이 풀리는 성질인 블럭박스가

float을 줌과 동시에 플롯박스 성질로 변하여 부분으로 들어가 다른것과 함께 배치될 수 있는것이다.

 


일단 이론적인 플롯의 사용법은 간단하다.

 

띄워서 왼쪽으로 배치

float:left;


띄워서 오른쪽으로 배치
float:right;

left 나 right 말고도 none 이나 inherit 가 있으나 많이 사용하지 않으므로 일단 패스.

 

 

 

자, 그럼 플롯이 실제 어떻게 사용되는지를 보자.

 

이미지와 나열된 글이 있고 이미지에 float:left를 줘서 이미지 우측에 글을 배치시키려고 한다.
이때 이 이미지가 어떻게 떠서 이동하는지 눈에는 보이지 않지만 아주 천천히 그 경로를 보자면 아래와 같다.

 

 

1.이미지가 공중으로 뜬다.
2.문장이 이미지 밑으로 들어간다.
3.문장의 블럭박스는 그대로 있는 상태에서 텍스트들을 감싼 라인박스만 이미지영역만큼 우측으로 밀려난다.
(만일 이를 직접 확인하기 위해 p에(블럭박스) 실제로 border를 넣어보면 이미지 밑에부터 테두리가 쳐진다.)

 

 

 

 

 

위에서는 이해를 돕기위해 중간부터 테두리를 넣었지만

테두리를 치지 않더라도 보이지 않는 가상의 선들이 위와같이 존재한다고 생각하면 된다.

 

실제로 문장부분에 테두리가 필요해 p에 스타일을 준다면 당연히 테두리는 이미지 아래까지 기어들어갈 것이고,
p에 문장의 가로값을 지정하려 width값을 주었는데

들어가있는 이미지 크기보다 width값이 작다면 p안에 들어있는 텍스트는 이미지 밑으로 다시 밀려난다.

 

float은 옆으로 배치하는거라고 했고 분명 float을 사용했는데 왜 옆으로 배치되지 않는 것인지...

테두리가 어째서 내 의도대로 안쳐지는지...
위의 개념을 확실히 알고있지 않으면 도대체 왜? 이런 현상이 벌어지는지 자체를 알 수 없는것이다.


블럭요소 p는 가로값을 주지않으면 항상 100를 차지한다.
때문에 이미지 옆으로 밀려나있는 라인박스 때문에 글들이 이미지 옆에서 나오다가 이미지가 끝나는 순간
다시 전체영역인 블럭박스로 돌아가 이미지 아래쪽으로 글이 흘러내리는 것이다.
이는 이미지를 상단 우측이나 좌측에 글과 함께 배치시킨 네이버 뉴스글 같은데서 볼 수 있다.

 

 

 

 

실전

 

아래는 이미지대신 200x200 사이즈의 박스하나를 만들고 빨간테두리를 친 후 클래스네임 photo로 지정해 float:left 를,문장에는 파란 테두리를 치고 가로값 500픽셀을 주었다.

 

 

 

 

 

 

그럼 결과는 아래와 같은 모습이 된다.

분명 문장에 테두리를 주어도 이미지 아래까지 들어가 있는걸 알 수 있다.

이 때, 가로값 500px은 이미지를 포함한 파란테두리 값이다.

 

 

 

 

 

글이 길어지면 물론 빨간 박스 아래까지 내려가고,

 

 

 

 

 

문장 <p>의 width값만 500에서 150px로 바꾼다면 이미지200px보다 작기 때문에 아래로 내려간다.

 

 

 

 

그럼 글이 길어져도 이미지 아래의 영역을 침범하지 않고 이미지 옆쪽으로 나란히 나오게 하려면 어떻게 해야할까?

 

간단하다.
글에도 같이 float을 주어 함께 띄우면 된다.

(이건 다음 포스팅에서 좀 더 자세히 설명하겠음)

 

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요