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

 

 

 

 

 

먼저 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

댓글을 달아 주세요

  1. 너무 재밌겠어요 저도 시간나면 꼭 배워보고싶네요

    2013.08.22 15:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 재미로 배울만한건 아닙니다 ㅋ
      오늘도 좋은하루 되세요^^

      2013.08.22 18:00 신고 [ ADDR : EDIT/ DEL ]
  2. 포스팅 잘봤습니다 ㅠㅠ 설명이 이해가 잘되서 다음 강의도 부탁드려요~
    하위메뉴 생성^^;; 염치없은 부탁드립니다~!

    2013.08.31 12:37 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 저도 배운강의를 그대로 옮겨놓은거라서 여기서 너무 많은걸 바라시면 아니되옵니다 -0-;;

      2013.08.31 16:56 신고 [ ADDR : EDIT/ DEL ]
  3. 정주행

    정주행했어요 ㅋ
    잘 보고 있습니다. 내용이 잘 정리되어있는 것 같아요.ㅎㅎ

    2013.09.02 13:22 [ ADDR : EDIT/ DEL : REPLY ]
    • 봐주셔서 감사합니다 ㅎㅎ
      좋은 저녁되세요~

      2013.09.02 18:10 신고 [ ADDR : EDIT/ DEL ]
  4. ㅁㅇㄹ

    질문있는데요
    그대로 따라서 해봤는데 결과물이 계단식으로 나오네요
    학교
    병원
    직장
    공장
    학원
    이런식으로 나오는데 왜그런지 알수 있을까요?

    2013.09.12 21:31 [ ADDR : EDIT/ DEL : REPLY ]
    • 전 댓글보고 당연히 리셋 css문제인줄알았는데
      (이글참고) http://yslife.tistory.com/402

      제가 다시 해보니까 리셋을 사용해도 익스플로러에선 좀 문제가 있군요.;;

      제가 보통 파이어폭스에서 열어봐서 몰랐음 ㅠ (배울때도 그랬고)

      익스플로러를 사용하면 float:left를 그냥 li에 주면 괜찮은데 a링크에 줬을때는 그런 현상이 생기네요;;
      html5.0이 먹지않는 익스플로러 8의 낮은버전이라 그럴지도 모르겠구요...

      웃긴건 정석대로<li>를 사용하지 않고 야매로 <div>를 사용하면 또 a링크에 플롯을 줘도 제대로 먹힙니다.
      익스플로러가 웹표준사용에 문제가 많은건 알았지만 이런식으로 발목을 잡는군요...

      그렇다면 그냥 div를 사용하든가 다른방법을 써야할거같은데
      저도 이 부분은 좀 더 연구해 봐야겠습니다 ㅠㅠ

      2013.09.13 10:07 신고 [ ADDR : EDIT/ DEL ]
  5. 익명

    비밀댓글입니다

    2013.10.11 10:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 음...패딩과 마진의 영역이 헷갈리신다는건가요?
      사실 이 두가지는 연동되어 보여지고 내가 만들어가는 가상의 영역이기 때문에 헷갈리긴 합니다.

      강의까지 하기엔 제 실력이 미진한 관계로다가...ㅎㅎ

      그렇지만 스타일을 주려는 지정 대상에 background-color나 border를 넣어보면 확실히 알 수 있습니다.
      위의 메뉴처럼 색상이 칠해지는 영역이 패딩이구요. 바깥쪽은 마진영역입니다.
      테두리를 치면 테두리 안쪽이 패딩, 테두리 바깥쪽이 마진영역이겠죠?


      아무것도 없으면 이 경계선이 보이지 않기때문에 당연히 헷갈리는거구요^^;;

      패딩을 단순히 안쪽으로 여백을준다고 생각하지 마시고,
      아무것도 없는 가상의 공간이나 어떤 대상에 패딩을 넣어 지정영역을 넓혀간다고 생각해보세요.

      좀 도움이 되셨는지 모르겠네요. 효니리님도 좋은 주말되세요^^

      2013.10.11 16:30 신고 [ ADDR : EDIT/ DEL ]
  6. 익명

    비밀댓글입니다

    2013.10.24 17:58 [ ADDR : EDIT/ DEL : REPLY ]
    • 여기글은 정말 기초중의 기초만 써놓은거라서 홈피만드는데 무리가 많습니다;;
      학원을 다니시면서 좀 더 차근차근 배워가심이 나을듯하네요.ㅜㅜ

      2013.10.24 21:35 신고 [ ADDR : EDIT/ DEL ]
  7. 제이

    계속 강의 올려주시면 안될까용?ㅠㅠ

    2013.10.31 09:05 [ ADDR : EDIT/ DEL : REPLY ]
    • 이쪽을 배워놓고 요새 써먹을일이 없으니 포스팅을 안하게 되네요.
      그러다보니 잊어먹고
      저도 다시 공부하면서 올려야 되는지라... ㅠㅠ

      2013.10.31 12:34 신고 [ ADDR : EDIT/ DEL ]
  8. ㅇㄹㅇㄴ

    요거 그대로 해봤는데요~!
    크롬에서 보기에는 메뉴 텍스트 위에 점이 하나 생기더라구요 ㅡㅡ 왜그러져?....
    <li>에 만들때 목록 앞에 생기는 점같은데 ㅠㅠ

    2013.11.13 18:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 목록에 점이 생기는거면 리셋css를 따로 하지 않으신것 같네요.

      http://yslife.tistory.com/402
      이 글을 참고해주세요^^

      2013.11.14 08:52 신고 [ ADDR : EDIT/ DEL ]
  9. ja

    전체 글 다 읽어봤습니다 너무 잘보고갑니다 감사합니다~

    2016.10.05 14:37 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

댓글을 달아 주세요

  1. 쪼랩

    좋은 자료 감사합니다.. 이제 강좌는 거의 다 본것 같은데요.. 궁금한게 있어서요.. 모바일홈페이지를 만들려고 하는데요.. 포토샵 사이즈를 어떻게 해야하는지 좀 알려주실 수 없을까요? 모바일홈페이지때문에 이거 공부중이거든요 ^^

    2013.08.13 11:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 모바일 홈페이지를 만드시는 군요.
      제가 모바일 사이트를 만든적이 없어서 큰 도움은 못드리겠지만
      보통 디자이너들이 가로 640px을 기본으로 작업하는걸로 알고 있습니다.
      지인이 전에 320px로 작업했을때 다른 사이즈들은 맞는데 이미지가 약간 깨진다 그러더라구요.

      그러니까 초창기 나왔던 아이폰 320px을 최소 기준으로 해서 2배크기로 작업하는 거구요...
      640px로 작업한 시안으로 필요한 이미지를 자른 후 css를 사용해서 원래크기인 반으로 줄여넣는다고 합니다.

      딱히 답이 정해져 있는건 아니겠지만요.

      2013.08.13 23:14 신고 [ ADDR : EDIT/ DEL ]
  2. 쪼랩

    답변 감사합니다~~ 그런데 지금 테스트해서 올리시는파일은 뭘로 저장해서 올리시는건가요? 웹표준이니까 asp라던가 php파일로 작업해서 올려도 상관없는거겠지요? 문제가 생겼다면 제가 뭔가를 잘못한거겠죠? ㅎㅎㅎ; 강좌가 하나 더 올라왔네요 그것도 마저 보구 갈게요 ~

    2013.08.20 10:02 [ ADDR : EDIT/ DEL : REPLY ]
    • 저는 그냥 에디트플러스에서 html로 저장해서 파이어폭스로 여는건데 ^^:;
      웹표준과 asp, php가 별도로 무슨 상관이 있을런지는 잘 모르겠네요.
      (전혀 상관 없을거 같긴한데...)
      저한테 너무 많은것을 바라시면 아니되옵니다. ㅋㅋ

      그럼 좋은 밤 되세요^^

      2013.08.20 22:36 신고 [ ADDR : EDIT/ DEL ]
  3. 이거때문에 고생하고 있었는데 감사합니다~
    다른 블로그는 적용하는 법만 소개하던데, 이걸보고 응용해보니까 금방 되네요^^
    좋은 하루 되세요!

    2014.02.19 07:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 넵 구리님두요~
      저희 광고 이제 나오네여 ㅜㅜ
      신경써주셔서 감사합니다^^

      2014.02.19 09:03 신고 [ ADDR : EDIT/ DEL ]
  4. 송지

    가르쳐주신 선생님 만나뵜고 싶네요 ㅜㅜ

    몰라던 부분들 인데 이렇게 간단하게 설명해 주시다니

    요즘에는 html 포스팅은 안하시는거예요?

    2014.05.02 17:12 [ ADDR : EDIT/ DEL : REPLY ]
    • 이건 선생님이 가르쳐주신거에 제가 좀 더 공부해서 썼던건데 정리가 잘 된건가요?ㅎㅎ 전 가끔 제가 나중에 봐도 뭔소리를 써놓은건지 한참 봐야할 경우가 있어서^^;;

      제가 한참 공부할때 저도 잊어버리지 않으려고 포스팅했던거라 아무래도 요새는 포스팅을 안하게 되네요. 게을러져서 큰일이예요 ㅠㅠ

      2014.05.02 18:25 신고 [ ADDR : EDIT/ DEL ]
  5. 구데기

    좋은정보 너무 감사합니당 ㅠ,.ㅜ 수업시간에 진도못따라가서 혼자찾아보는중인데 많은 도움이되요~

    2018.04.27 11:05 [ ADDR : EDIT/ DEL : REPLY ]
    • 오래된글인데 이게 아직까지도 도움되는군요 ㅎㅎ

      2018.07.04 17:42 신고 [ ADDR : EDIT/ DEL ]

 

 

 

사실 이쪽은 아무도 안보고
나 혼자 미친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

댓글을 달아 주세요

  1. 노땅프로그래머

    제가 찾아다니던 css관련 자료중 최고네요.
    이미지와 같이하여 이해도 빨랐습니다.
    이번에 psd파일 몇개로 사이트를 만들라는 오더를 받아서 작업하였는데 db와 개발시간 보다는 css와의 전쟁으로 보낸시간이 작업시간 3/4 을 차지하였으니...쩝!
    진작에 방문했다면 수월한 잡업이 되었을텐데 라는 아쉬움이 남네요.
    그래도 작업하면서 막혔던 부분이 다 풀렸네요.
    다시한번 감사하다는 말씀 드리면서 앞으로도 좋은 포스팅 부탁드립니다.
    종종 찾아뵙겠습니다.
    행복한 인생 되시길~~

    2013.07.31 20:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 사이트 제작하면서 프로그래머와 웹디자이너가 html과 css를 정확히 인지하지 않고 있기 때문에 소통면에서 문제가 많이 생긴다고 하더라구요.
      요번에 좋은 경험이 많이 되셨겠네요^^
      님도 행복한 하루되세요~

      2013.08.01 10:04 신고 [ ADDR : EDIT/ DEL ]
  2. 요코문

    진짜 설명 쉽네요!!!
    공중에 떠다니는 .... 최고!

    2013.08.20 10:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다.ㅎㅎ
      도움되셨다니 다행이네요^^

      2013.08.20 22:28 신고 [ ADDR : EDIT/ DEL ]
  3. 호랑이기운

    웹디자인으로 전향에서.뭐 이것저것 배우고 있는데..코딩까지할려니 머리가 아프더라구요
    기초도 없고. 책만봐서는 답도 없고 , 코딩하면서 매번 인터넷자료를 디지면서 겨우겨우 만들고 그랬는데
    제가 의문을 가졌던 것들을 하나둘 여기서 배우고 나니 조금 수월해집니다.
    좋은 자료 많이 올려주세요!!! ^______________^

    2013.09.05 10:39 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 웹디자인 전향하고서 코딩이 가장 싫더라구여...
      이렇게 저렇게 찾아가면서 하나하나 만드시다보면 금방 느실것 같네요.
      역시 뭐니뭐니해도 경험이 최고니까여~^^

      2013.09.06 08:30 신고 [ ADDR : EDIT/ DEL ]
  4. 감사합니다.

    독학으로 표준화 코딩을 공부하다가
    좋은 공부하고 있습니다.

    2014.04.29 16:10 [ ADDR : EDIT/ DEL : REPLY ]
    • 웹쪽을 하신다면 이제 표준화공부는 필수인듯해요.
      열심히 하세요~^^

      2014.04.29 18:33 신고 [ ADDR : EDIT/ DEL ]
  5. hahahaha

    많이 배우고갑니당^^

    2016.02.18 11:53 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

 

 


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

 

 

 

 

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


일단 전체를 랩(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

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.07.19 16:39 [ ADDR : EDIT/ DEL : REPLY ]
  2. 익명

    비밀댓글입니다

    2013.07.19 16:52 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잘 보고갑니다^^

    2013.08.31 12:27 [ ADDR : EDIT/ DEL : REPLY ]
  4. monica

    저 여기 자주 올래요 강의가 너무 너무 이해가 잘되게 자세하게 설명해주셔서 너무너무 좋아요.
    정말 감사합니다 :)

    2013.09.06 14:13 [ ADDR : EDIT/ DEL : REPLY ]
    • 앗~ 감사합니다^^
      포스팅 해놓은 보람이 있군요 ㅎㅎ

      2013.09.07 00:23 신고 [ ADDR : EDIT/ DEL ]
  5. qwer

    float 정리가 잘되어있네요 잘보고갑니다~

    2014.04.03 17:07 [ ADDR : EDIT/ DEL : REPLY ]
  6. cloud

    감사합니다. 이해가 쏙쏙 되네요. ^^

    2014.07.18 17:00 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

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

 

 


플롯(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

댓글을 달아 주세요

  1. monica

    너무....설명을 잘해주셔서 해외에서 웹시작하는데 많이 도움이 되어요 감사합니다 :)

    2013.09.06 13:59 [ ADDR : EDIT/ DEL : REPLY ]
  2. 헤븡

    너무 좋은 설명 잘 봤습니다 :)
    근데 중간에 오타가 하나 있는 것 같아요~
    조취 -> 조치

    2013.11.18 14:22 [ ADDR : EDIT/ DEL : REPLY ]
  3. 뭔가 무서운 인형뽑기라는게 제목같다는 느낌을 받는건 저뿐....인지 -_-

    2013.11.19 10:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 엥? 그냥 네이버뉴스 아무거나 긁어서 예제로 쓴건데영 ㅎㅎ

      2013.11.19 18:30 신고 [ ADDR : EDIT/ DEL ]
  4. 박들리

    너무 잘보고 가요~! 글을 잘읽다가 오타를 찾았는데 좀 민망시럽네용ㅠ
    살색박스 4번째 줄 1은 100% ㅈㅈ영역...
    무튼 다른글들도 볼게 많네요~!!

    2015.12.17 10:16 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 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

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.10.24 16:56 [ ADDR : EDIT/ DEL : REPLY ]
    • mother라는 클래스네임은 이해를 돕기위해 임의로 지정한거구요
      굳이 mother라고 사용하지 않고 다르게 지정해도 상관없습니다.

      만약 님처럼 클래스네임을 따로 주지않고 태그를 직접 지정해서 스타일을 주려면 img앞에 .을 빼서
      img {float:left;} 이런식으로 사용해야합니다.

      자세한건 아래글을 참고하세요
      http://yslife.tistory.com/399

      그렇지만 스타일을 줄때는 태그를 직접 블러 사용하는것보다
      보통 임의의 클래스네임을 지정해주고 그 이름을 불러서 스타일을 사용합니다.
      여기서는 img태그가 하나뿐이라 상관없지만 안그러면 홈페이지 만들때는 수많은 img태그들에 전부 같은 스타일이 들어가 버릴테니까요.

      2013.10.24 21:37 신고 [ ADDR : EDIT/ DEL ]
  2. 제이

    아 답변 감사합니다.
    img에 직접 안주고 클래스네임이 img앞에 붙도록 되어있길래 왜 그래야하는지 몰랐는데..
    그렇네요 다른 img에 다 지정되게되네요.
    또 배우고 갑니다.

    2013.10.25 13:06 [ ADDR : EDIT/ DEL : REPLY ]

 

 

 

이전까지 세로의 배치를 했다면 이제 가로배치의 핵심 플롯(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

댓글을 달아 주세요

  1. 익명

    비밀댓글입니다

    2013.06.21 17:16 [ ADDR : EDIT/ DEL : REPLY ]
    • 설명이 잘되어 있다면 제가 배운 선생님이 강의를 잘 해주셨다는거겠죠^^
      전 최대한 정리해서 초보들도 알아보기 쉽게 옮겨놨을뿐 ㅎㅎ

      갑자기 웹표준 하시려면 힘들겠네요.
      열심히하세요~
      고생해서 끝내고나면 자신에게 그만큼 많이 도움될거라 생각합니다.^^

      2013.06.22 11:56 신고 [ ADDR : EDIT/ DEL ]
  2. 나그네

    이제 막 기초 책으로 떼운상태에서
    float이 정확하게 이해가 안가서 보고있는데,
    진짜 도움많이됩니다.
    감사합니다~

    2013.09.20 19:01 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 배울때 float이 개념잡기 어렵드라구요.
      도움되셨다니 다행이네요~^^

      2013.09.22 23:37 신고 [ ADDR : EDIT/ DEL ]
  3. 헤븡

    잘 봤어요~
    감사한 마음으로 작게나마 광고라도 클릭 열심히 하고 가요! :)

    2013.11.18 11:54 [ ADDR : EDIT/ DEL : REPLY ]
  4. simplymango

    우와 이렇게 이해하기 쉽고 자세하게 설명해서 ㅠㅠ참좋네요 !!!!!!!!!!!!!!!!!
    감사합니다

    2013.12.05 02:33 [ ADDR : EDIT/ DEL : REPLY ]
  5. 익명

    비밀댓글입니다

    2015.01.15 17:34 [ ADDR : EDIT/ DEL : REPLY ]
    • 본문에 작성해서 사이드에 떠있는 배너를 만든다는게 무슨말씀이신지 잘 모르겠네요;;
      티스토리 블로그를 기준으로 말씀하신건가요?
      티스토리 본문글에서 사이드에 떠있는 배너를 넣는건 불가능합니다.
      엄연히 영역이 다르거든요..
      부모박스안에 자식박스가 있다 생각하시면 자식안에서 무슨짓을해도 부모에게 영향을 미치지 못하는것과 같은 이치입니다.

      2015.01.16 20:59 신고 [ ADDR : EDIT/ DEL ]