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

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

List of Articles
번호 제목 글쓴이 날짜sort 추천 수 조회 수
공지 Cascading Style Sheets (CSS3) file title: [ani]깜빡이는 표정빽짱구 2010-06-29 1 32643
공지 CSS 용량을 줄여주는 사이트 file [7] title: [ani]깜빡이는 표정빽짱구 2010-05-13 1 23185
공지 css 팁에 관련해서... [1] title: [ani]깜빡이는 표정빽짱구 2007-11-30 1 44343
123 포토샵과 letter-spacing 자간 비교 file title: [ani]깜빡이는 표정빽짱구 2018-12-24   611
122 css3 애니메이션 속성 title: [ani]깜빡이는 표정빽짱구 2018-10-30   239
121 아이폰(ios) input 박스안에 그림자 및 라운드 제거하기 title: [ani]깜빡이는 표정빽짱구 2018-10-28   312
120 sass 기초 개념이 잘정리되어 있네요. title: [ani]깜빡이는 표정빽짱구 2018-10-25   238
119 CSS Transition 옵션 title: [ani]깜빡이는 표정빽짱구 2018-09-30   240
118 아이폰에서 textarea 그림자 제거 [1] title: [ani]깜빡이는 표정빽짱구 2018-09-25   400
117 크롬 input 박스 노란색 제거 하기 title: [ani]깜빡이는 표정빽짱구 2018-09-23   552
116 IOS 박스 스크롤 부드럽게 하기 -webkit-overflow-scro... title: [ani]깜빡이는 표정빽짱구 2016-02-16   589
115 CSS3 box-sizing:border-box [1] title: [ani]깜빡이는 표정빽짱구 2016-02-16   391
114 [반응형웹]해상도에 따른 CSS호출하기(미디어쿼리) title: [ani]깜빡이는 표정빽짱구 2014-05-20   3238
113 css 패턴 title: [ani]깜빡이는 표정빽짱구 2014-05-14   1831
112 아이폰 모바일에서 숫자 색상스타일 title: [ani]깜빡이는 표정빽짱구 2014-01-02   9642
111 모바일 가로버전 @media title: [ani]깜빡이는 표정빽짱구 2013-12-23   2897
110 모바일 코딩시 메뉴가 3개일때 해결방법 title: [ani]깜빡이는 표정빽짱구 2013-12-18   3564
109 크롬,사파리,익스 스크롤바 바꾸기 title: [ani]방울UI 2013-08-08   3409
108 자주쓰는 css3 속성 Top10 title: [ani]깜빡이는 표정빽짱구 2013-01-09   2907
107 css3 box-shadow 에 대해 알아보자 title: [ani]깜빡이는 표정빽짱구 2013-01-09   2600
106 list-style 속성들 title: [ani]깜빡이는 표정빽짱구 2012-10-26   2952
105 css3 그라데이션을 손쉽게 적용하자 title: [ani]깜빡이는 표정빽짱구 2012-10-11   3974
104 css3 border-radius 속성 file [1] title: [ani]깜빡이는 표정빽짱구 2012-09-03   4634