웹마스터 팁
page_full_width">
padding, margin, font, border
2010.03.13 20:55
CSS 코드를 만들다보면 가장 많이 사용하는 여백, 글꼴, 선에대해 설명해보도록 하겠습니다.
검색해보니 중복은 아닌 것 같습니다.
"여백을 조정하세요"라고 하면 "어딜요?"라고 하는 분들이 계시더군요..
그런 분들 참고하시라고 몇자 적어봅니다.
일단 여백부터 설명드릴게요.
아래의 그림과 같은 상자가 있다고 생각해보세요.
파란색 선 안에 여백을 주는 것이 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 으로 각각 추가하면 됩니다.
검색해보니 중복은 아닌 것 같습니다.
"여백을 조정하세요"라고 하면 "어딜요?"라고 하는 분들이 계시더군요..
그런 분들 참고하시라고 몇자 적어봅니다.
일단 여백부터 설명드릴게요.
아래의 그림과 같은 상자가 있다고 생각해보세요.

파란색 선 안에 여백을 주는 것이 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 으로 각각 추가하면 됩니다.
태그 연관 글
- [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 *2
- [2018/02/12] 묻고답하기 레이아웃 테이블 여백(공백) 문제
- [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 *1
- [2016/09/13] 묻고답하기 제목에 html, css 가능하도록 하기? *2
- [2016/08/11] 웹마스터 팁 아이콘 폰트 축소 서비스
댓글 2
제목 | 글쓴이 | 날짜 |
---|---|---|
정말 쉬운 이미지 롤오버 [3] | Nopedy Lee | 2002.12.05 |
엔지오처럼 메뉴가 아래위로 움직이는 소스[steelheart님 만듬]. [10] | 김태경 | 2002.11.23 |
iframe 내용에 맞게 자동으로 크기 조절하기 [36] | 행복한고니 | 2002.11.21 |
[파파스 1] 즐겨찾기 추가기능 소스 [5] | 파파스 | 2002.11.20 |
제로님 Select Box 조금 바꾼거... [5] | 행복한고니 | 2002.11.18 |
아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [7] | (づ_-) 커터칼 | 2002.11.18 |
[re] 아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [2] | Mahican | 2002.12.02 |
이미지 변환함수(롤오버) [3] | 행복한고니 | 2002.11.18 |
글상자글적으면 적은수가 숫자로 표시(글제한할때좋죠). [2] | 아벨라 | 2002.11.18 |
레이어를 원하는 곳에 고정하기입니다. [7] | 아벨라 | 2002.11.14 |
윈도우 할아버지 나타나게 하기 [11] | 행복한고니 | 2002.11.14 |
고정된 배경이미지는 싫다면서... [9] | 디아릭스 | 2002.11.12 |
엔지오같은 메뉴 만들기 #2 - Error 수정판 -_-;; [13] | Eccen | 2002.11.12 |
[re] 엔지오같은 메뉴 만들기 #2 -> 레이어배치 팁! //ⓦⓞⓞⓡⓨ님참고 [3] | Aracing™ | 2003.01.10 |
방문자가 특정부분 텍스트크기 바꿀수 있게 (확대/축소) [2] | 디아릭스 | 2002.11.05 |
링크 포커스 없애기 3탄 [10] | 멀대 | 2002.11.05 |
엔지오같은 메뉴 만들기 #1 - 수정판 [6] | Eccen | 2002.11.05 |
[자작] select 폼 태그 html로 허접하게나마 꾸며보기 [18] | zero | 2002.11.05 |
글씨 하이퍼링크시 밑줄 없에기 [8] | 이솔렛 | 2002.10.31 |
하이퍼링크 점선 테두리 없애기 [9] | 레드 | 2002.10.31 |
font:11px/21px
는
font-size: 11px;
line-height: 21px;
라는 의미입니다.