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/53e/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

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

List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
공지 Cascading Style Sheets (CSS3) file title: [ani]깜빡이는 표정빽짱구 2010-06-29 1 32637
공지 CSS 용량을 줄여주는 사이트 file [7] title: [ani]깜빡이는 표정빽짱구 2010-05-13 1 23175
공지 css 팁에 관련해서... [1] title: [ani]깜빡이는 표정빽짱구 2007-11-30 1 44339
123 hit 크로스브라우징 input 박스 file [1] title: [ani]깜빡이는 표정빽짱구 2009-04-15   11658
122 hit IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for ... title: [ani]깜빡이는 표정빽짱구 2007-11-30   13173
121 hit css를 이용한 이미지 확대 title: [ani]깜빡이는 표정빽짱구 2008-03-19   14966
120 폰트 사이즈 비교표 title: [ani]깜빡이는 표정빽짱구 2007-09-17   9629
119 hit 브라우저 스타일 초기화 title: [ani]깜빡이는 표정빽짱구 2008-02-09   11790
118 hit css로 원하는 부분만 인쇄하기 [1] title: [ani]깜빡이는 표정빽짱구 2008-01-08   11173
117 hit CSS 만으로 구현하는 롤오버 이미지 [1] title: [ani]깜빡이는 표정빽짱구 2007-12-03   12936
116 hit 해당 div를 스크롤로 감싸자. [1] title: [ani]깜빡이는 표정빽짱구 2007-12-06   14722
115 hit IE에서 Float-Margin Bug title: [ani]깜빡이는 표정빽짱구 2007-12-07   13002
114 hit IE6 스타핵에서 띄어쓰기 title: [ani]깜빡이는 표정빽짱구 2009-02-05   10443
113 익스 문자버그 (주석버그) file [1] title: [ani]깜빡이는 표정빽짱구 2009-02-05   9814
112 repeat title: [ani]깜빡이는 표정빽짱구 2007-10-01   6763
111 margin (마진) 에 대해 알아보자. title: [ani]깜빡이는 표정빽짱구 2007-11-12   9418
110 스타일 시트 불러오기? title: [ani]깜빡이는 표정빽짱구 2007-11-12   9346
109 hit 전체 레이아웃 가운데 정렬 title: [ani]깜빡이는 표정빽짱구 2007-11-05   13397
108 인터넷 익스플로러 조건 주석문 [1] title: [ani]깜빡이는 표정빽짱구 2007-11-11   7984
107 hit 스타일시트 속성을 지정하는 순서 title: [ani]깜빡이는 표정빽짱구 2008-02-09   10179
106 css와 html 을 보면서 적용하는 사이트? [2] title: [ani]깜빡이는 표정빽짱구 2008-02-09   9806
105 IE6에서 border 속성 title: [ani]깜빡이는 표정빽짱구 2008-02-10   9968
104 hit CSS hack 정리 [1] title: [ani]깜빡이는 표정빽짱구 2008-02-09   21190