CSS

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

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

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

List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
공지 Cascading Style Sheets (CSS3) file title: [ani]깜빡이는 표정빽짱구 2010-06-29 1 32641
공지 CSS 용량을 줄여주는 사이트 file [7] title: [ani]깜빡이는 표정빽짱구 2010-05-13 1 23179
공지 css 팁에 관련해서... [1] title: [ani]깜빡이는 표정빽짱구 2007-11-30 1 44342
52 폰트 사이즈 비교표 title: [ani]깜빡이는 표정빽짱구 2007-09-17   9629
51 hit 브라우저 스타일 초기화 title: [ani]깜빡이는 표정빽짱구 2008-02-09   11790
50 hit css로 원하는 부분만 인쇄하기 [1] title: [ani]깜빡이는 표정빽짱구 2008-01-08   11173
49 hit IE에서 Float-Margin Bug title: [ani]깜빡이는 표정빽짱구 2007-12-07   13002
48 repeat title: [ani]깜빡이는 표정빽짱구 2007-10-01   6763
47 margin (마진) 에 대해 알아보자. title: [ani]깜빡이는 표정빽짱구 2007-11-12   9418
46 인터넷 익스플로러 조건 주석문 [1] title: [ani]깜빡이는 표정빽짱구 2007-11-11   7984
45 hit border-collapse:collapse title: [ani]깜빡이는 표정빽짱구 2008-07-29   11807
44 프린트용 css [1] title: [ani]깜빡이는 표정빽짱구 2008-07-29   9831
43 hit css로 background 이미지 고정하기 title: [ani]깜빡이는 표정빽짱구 2008-06-19   23661
42 ie6에서 영역을 잡자. title: [ani]깜빡이는 표정빽짱구 2009-03-06   9023
41 hit CSS 상속 file [3] title: [ani]깜빡이는 표정빽짱구 2009-04-03   16906
40 hit IE8 CSS핵 title: [ani]깜빡이는 표정빽짱구 2010-10-22   10830
39 익스6에서 CSS호출을 못할때 title: [ani]깜빡이는 표정빽짱구 2010-11-11   7116
38 CSS3로 만든 예제들 title: [ani]깜빡이는 표정빽짱구 2010-12-07   6808
37 css3로 돌아가는 애니메이션 효과주기? [2] title: [ani]깜빡이는 표정빽짱구 2011-12-06   5160
36 [css3] 텍스트에 그림자주기 (text-shadow) [1] title: [ani]깜빡이는 표정빽짱구 2012-04-26   4741
35 포토샵과 letter-spacing 자간 비교 file title: [ani]깜빡이는 표정빽짱구 2018-12-24   608
34 css3로 브라우저 별로 그라데이션 주기 title: [ani]깜빡이는 표정빽짱구 2012-07-23   3996
33 css3 애니메이션 속성 title: [ani]깜빡이는 표정빽짱구 2018-10-30   238