CSS

CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 123

0

조회 수 : 9418 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
미리보기 :  

예를 들어 하나의 박스가 있다고 했을때 박스 바깥쪽은 margin 안쪽은 padding 입니다.
물론 박스 위쪽은 margin-top  이고 왼쪽은 margin-left , 오른쪽은 margin-right, 아래쪽은 margin-bottom 입니다. 물론 안쪽으로 padding 도 마찬가지 입니다.

지금은 설명하기 쉽게 하나의 박스를 예를 들지만, margin 값은 여러군데 사용을 하고 있습니다.
가장 많이 사용되고 있는게 박스형태 이기때문에 박스로 설명을 하겠습니다.

 


위와 같은 박스에서 위, 오른쪽, 아래, 왼쪽이 모두 각기 여백을 갖게 될경우 일일이 margin-top:5px; margin-right:10px; margin-bottom:3px; margin-left:8px; 이렇게 사용해도 되나, 소스가 길어지기 때문에 다음과 방식으로 작성하셔도 됩니다.

margin:5px 10px 3px 8px;

위와 같은 형태가 되며, 외우기 쉽게 시계방향으로 보시면 됩니다. 상,오른쪽,하단,왼쪽 이런순입니다.
만약에 상단여백이 0 일 경우는

margin:0 10px 3px 8px;

이런식으로 사용하시면 됩니다. 0일 경우는 px 같은 단위를 안적으셔도 무방합니다.
만약 모든 여백이 5px 일경우는

margin:5px;

이렇게 적으시면 됩니다.

만약 '상하' '좌우' 가 같은 값이 될경우는

margin:5px 10px;    (5px 이 상단과 하단이 되고, 10px 이 좌우가 되는것입니다.)

'상' 과 '좌우' '하' 이런식의 값을 줄경우는 margin:5px 10px 8px; 이런식으로 적어주셔도 됩니다.
다시말하면 5px 는 상단값이며, 10px은 좌우 값, 8px는 하단의 값이 되는 것입니다.

마진(margin)은 이런식으로 사용이 되며, 전체 레이아웃의 가운데 정렬을 주고자 할때는
margin:0 auto; 이렇게 적어주시면 웹미니같은 가운데 정렬사이트가 됩니다.

물론 파폭에서는 이값이 제대로 먹지만 익스폴로러에서는 가운데 정렬을 하기 위해서는 text-align:center; 값도 같이 줘야합니다 익스의 버그때문인지는 모르겠지만, margin:0 auto; 만 했을경우 먹지를 않더군요.

소스를 대충 보자면

<style type="text/css">
body { text-align:center; }
#wrap { margin:0 auto; }
</style>

보여지는 페이지에서는

<div id="wrap">가운데 정렬</div>

대충 이런식이 되겠네요.

가운데 정렬을 이용한 소스는 http:///css/18892 를 참고해주세요.

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/css/19046/69e/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 Cascading Style Sheets (CSS3) file title: [ani]깜빡이는 표정빽짱구 2010-06-29 1 32638
공지 CSS 용량을 줄여주는 사이트 file [7] title: [ani]깜빡이는 표정빽짱구 2010-05-13 1 23176
공지 css 팁에 관련해서... [1] title: [ani]깜빡이는 표정빽짱구 2007-11-30 1 44339
120 hit css로 background 이미지 고정하기 title: [ani]깜빡이는 표정빽짱구 2008-06-19   23661
119 hit CSS hack 정리 [1] title: [ani]깜빡이는 표정빽짱구 2008-02-09   21190
118 hit div 전체 세로 정렬하기 [1] title: [ani]깜빡이는 표정빽짱구 2008-06-13   19637
117 hit CSS를 이용한 DIV 가운데 정렬 [4] H1N1 2009-12-01   19069
116 hit 자동 줄바꿈 금지 [6] title: [ani]깜빡이는 표정빽짱구 2009-12-29   18098
115 hit CSS 상속 file [3] title: [ani]깜빡이는 표정빽짱구 2009-04-03   16905
114 hit 셀렉트 폼 색지정하기 [1] H1N1 2009-12-01   15870
113 hit png 투명이미지 css에서 배경 적용하기 title: [ani]깜빡이는 표정빽짱구 2009-02-01 1 15373
112 hit css를 이용한 이미지 확대 title: [ani]깜빡이는 표정빽짱구 2008-03-19   14966
111 hit 해당 div를 스크롤로 감싸자. [1] title: [ani]깜빡이는 표정빽짱구 2007-12-06   14722
110 hit IE6 스타핵으로 png 배경으로 적용시 링크가 안먹힐때 file title: [ani]깜빡이는 표정빽짱구 2009-02-16   13799
109 hit 전체 레이아웃 가운데 정렬 title: [ani]깜빡이는 표정빽짱구 2007-11-05   13397
108 hit IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for ... title: [ani]깜빡이는 표정빽짱구 2007-11-30   13173
107 hit text-overflow file title: [ani]깜빡이는 표정빽짱구 2010-09-16 1 13098
106 hit IE에서 Float-Margin Bug title: [ani]깜빡이는 표정빽짱구 2007-12-07   13002
105 hit CSS 만으로 구현하는 롤오버 이미지 [1] title: [ani]깜빡이는 표정빽짱구 2007-12-03   12936
104 hit li 에서 이미지와 이미지 사이에 여백이 생기는 문제 [1] title: [ani]깜빡이는 표정빽짱구 2008-01-15 1 12223