메뉴 건너뛰기

XE : Xpress Engine


XE에 대한 생각! XE에 대한 공감! - XE를 사용하는 다른 사람들과 의견을 나눌 수 있는 곳입니다. 많은 의견 공유로 더 좋은 XE를 만들어 주세요.


XE 사용팁

padding, margin, font, border

2010.03.13 20:55

[레벨:9]된장맛껌 조회 수:1230 추천:1

CSS 코드를 만들다보면 가장 많이 사용하는 여백, 글꼴, 선에대해 설명해보도록 하겠습니다.
검색해보니 중복은 아닌 것 같습니다.

"여백을 조정하세요"라고 하면 "어딜요?"라고 하는 분들이 계시더군요..
그런 분들 참고하시라고 몇자 적어봅니다.

일단 여백부터 설명드릴게요.
아래의 그림과 같은 상자가 있다고 생각해보세요.
여백.gif

파란색 선 안에 여백을 주는 것이 padding 이고,
네모밖에 여백을 주는 것을 margin 이라고 생각하시면 되겠습니다.

padding 속성은 아래와 같이 만들 수 있는데,
.css코드이름 { padding:10px 5px 4px 9px }
왼쪽부터 위, 오른쪽, 아래, 왼쪽 순서로 여백값을 설정할 수 있습니다.

margin 도 마찬가지로
.css코드이름 { margin:10px 5px 4px 9px }
이처럼 속성을 만들면 됩니다.

위, 오른쪽, 아래, 왼쪽의 값이 모두 같을경우 아래와 같이 설정해도 됩니다.
.css코드이름 { padding:10px; margin:10px }

물론 아래와 같은 방법으로 설정해도 됩니다.
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px
이렇게 하면 소스가 늘어나기 때문에 대부분 처음 소개해 드린 방법을 선호한다고 보시면 될거에요.

단위는 em, px 등을 사용하면 됩니다.

이번엔 폰트속성을 설정하는 방법입니다.
.css코드이름 { font-weight:bold; font-size:1em; font-family:Arial, sans-serif; }
font-weight는 폰트의 굵기
font-size는 폰트의 크기
font-family는 폰트의 이름입니다.
폰트크기의 단위는 pt,px,em 과 같은 것을 사용할 수 있습니다.

위에서 제시한 폰트속성을 아래와 같이 줄여서 표시할 수도 있습니다.
.css코드이름 { font:bold 1em Arial, sans-serif; }

폰트굵기가 필요없으면 bold 를 제거하면 됩니다.
.css코드이름 { font:1em Arial, sans-serif; }

간혹 아래와 같이 표시하는 것을 봤는데..
.css코드이름 { font:11px/21px Tahoma, Sans-serif; }
11px/21px 이 부분은 정확히 어떻게 사용되는 부분인지는 모르겠습니다.
Tahoma일 때 11px이고, Sans-serif일 때 21px일까요?
아시는 분 말씀해 주세요.
============================================================
plruto님께서  font-size/line-height 라고 말씀해 주셨습니다. ^^
폰트크기/줄간격입니다.
============================================================

선(border)도 네 변을 아래와 같이 함축적으로 표현할 수 있습니다.
.css코드이름 { border:1px solid #06F }
네변의 색이나 굵기가 모두 같다면 위와 같이 한번만 표현하는 것이 보기도 편하겠죠.

점선으로 표현하려면 아래와 같이 하면 되겠네요.
.css코드이름 { border:1px dotted #903 }

표현할 속성이 모두 다르다면 border-left, border-right, border-top, border-bottom 으로 각각 추가하면 됩니다.
번호 제목 글쓴이 날짜 조회 수
공지 질문은 묻고 답하기로~ TSCMD 2012.02.03 366
734 댓글(코멘트) 입력창에 이미지 넣기 [19] file [레벨:8]skyatc 2008.08.29 6143
733 레이아웃 상단에 공백,여백이 생길때 (css,html 등으로도 해결안되는 문제) [7] file [레벨:9]Gnee 2010.01.24 1239
732 서브 메뉴를 항상 펼쳐있도록... [2] [레벨:2]:맥노턴 2008.01.01 6139
731 Lighttpd에서 XE를 사용할 때의 mod_rewrite 규칙 [3] CM행복한고니 2009.12.23 987
730 카테고리를 게시판 상단에 탭모양으로 출력하기 [10] file [레벨:5]한닥터 2009.03.22 5330
729 -추가- 당신의 XE 기반 홈페이지를 훅가게 하는 방법 4가지 [15] [레벨:11]老姜君 2009.10.08 5263
728 Lavalic Lite 음악 재생기 v0.2버전 XpressEngine 1.2.5에 적용하기 [10] [1] file [레벨:1]전수빈 2009.09.02 4189
727 스크롤바색상 변하게 [3] file [레벨:2]김민787 2008.05.28 5677
726 설치하여 사용 중이던 XE의 폴더 옮기기 [1] file [레벨:5]영구만세 2009.12.02 1031
725 확장변수로 북마크 게시판 만들기 [2] [레벨:4]레디오빠 2010.01.31 1150
724 [수정] webzine 스타일을 이용한 링크게시판 만들기 [5] file [레벨:12]대암지기 2008.01.28 1095
723 저작권 없는 음악 사이트 [1] [레벨:5]오키도키 2009.08.03 6235
722 중복. JS버전. 관리자 페이지-트리뷰 계속 확장상태로 두기 [레벨:1]봉남 2010.03.02 1135
721 게시판확장변수를 이미지로 나타내게 게시판스킨 수정법 [3] file [레벨:9]팔공산 2010.03.10 2695
720 windows Live writer로 게시글 쓰기 [3] file [레벨:1]tindrum 2008.04.29 6725
719 XE 업데이트 방법 - 제2편 (1.2.4 에서 1.4.0 이상의 버전으로 업그레이드) [7] file [레벨:10]Gekkou 2010.01.20 1203
» padding, margin, font, border [2] file [레벨:9]된장맛껌 2010.03.13 1230
717 게시물 작성시 관리자 메일 보낼 때 발신인이 없어 스팸으로 분류될 때 [1] [레벨:1]ppoya 2010.03.14 1117
716 스킨 게시판 제목에 태그 넣기 [4] file [레벨:2]꽃들 2010.02.04 1364
715 브라우저 제목 고정하는 방법 [3] [레벨:0]cranky02 2010.03.09 1392