웹마스터 팁

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 으로 각각 추가하면 됩니다.
태그 연관 글
  1. [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 by forest535 *2
  2. [2018/02/12] 묻고답하기 레이아웃 테이블 여백(공백) 문제 by 개구리
  3. [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 by 립샤 *1
  4. [2016/09/13] 묻고답하기 제목에 html, css 가능하도록 하기? by lifema**** *2
  5. [2016/08/11] 웹마스터 팁 아이콘 폰트 축소 서비스 by easylogic
제목 글쓴이 날짜
본문 링크 새창으로 띄우기.. [9] 멀티비타민 2013.11.11
레이아웃을 불려오지 않게 하는 코드 [4] 착한악마 2013.11.13
다운로드 랭킹 위젯 simulz 님 스킨 단락 흐트러짐 문제 해결 [2] socialskyo 2013.11.14
Content 확장위젯2 에서 권한설정 안되던 버그 xe1.7 garnecia 2013.11.18
모바일 게시판 사용시 글 수정 / 댓글 수정 누르면 <br/> 태그가 뜰때 팁 [12] 사쿠냥ㅋ 2013.11.19
도메인이 바뀐후 기본 URL을 바꿨지만 2차메뉴의 링크는 바뀌지 않은 경우. [9] Ryuj 2013.11.20
롤링 배너 이해하는데 도움이 될것 같아 올립니다 [4] file 예뜨락 2013.11.22
'본문내 이미지 조절 애드온' 이 페이지모듈에서는 자동으로 작동 안 하게 하는 방법 sejin7940 2013.11.23
댓글창 배경이미지 클릭시 사라지게 만들기 [2] 귀머거리하늘 2013.11.23
에디터 "입력창 크기 자동조절" 체크를 기본으로 하기 [8] 투씨 2013.11.24
AXISJ AXUpload5(HTML5) 파일첨부란 높이 조정하는 방법 [6] 착한악마 2013.11.25
[수정]알림센터 Lite에 메일발송 기능을 추가하기 [11] file 매실茶 2013.11.25
[수정] 댓글 삭제 간략화하기 [9] XE만세 2013.11.26
디자인을 위한 팁...Adobe Generator for Photoshop CC [7] kj1212_ 2013.11.26
메시지톡 버튼 게시판에 넣기 [18] file 착한악마 2013.11.26
phpMyAdmin 사용시 주의 사항 [2] explode 2013.11.27
추천/비추천/신고시 확인(메시지 창 띄우기)하기 [21] explode 2013.11.27
multimedia file 첨부 시 자동으로 jw player 로 설정 더뿌 2013.11.27
SSL 적용시 작은 iframe 없애기 [1] file explode 2013.11.28
라르게덴님의 Xpresseditor + AXISJ AXUpload5(HTML5)와 mex_default 스킨 [5] 투씨 2013.11.29