폰트, 그러니까 글씨에 대한 내용입니다
마이피 카테고리의 글을 보시고 오면 좋습니당' v');
폰트에 관련된 속성이 조금 많네요
의도적으로 제외시킨 속성이 있는데, 귀찮아서 제외시켰어요 (...)
폰트 관련 속성
font-family : 글꼴
font-size : 글자 크기
font-weight : 글자 굵기
text-align : 좌우정렬
line-height : 행 간격
text-decoration : 꾸미기
color : 글 색
background : 배경색
-
# font-family
주의할 점은, '내 컴퓨터에서 정상적으로 보여진다고해서 남의 컴퓨터도 그런건 아니라는것' 입니다
무슨 소리냐면, 폰트는 마음대로 설치해서 사용할 수 있으니까 사람마다 있는게 있고 없는게 있다~ 라는 말이에요
때문에 기본 폰트를 사용하는게 좋겠지요' v')
코드
font-family:"맑은 고딕", verdana, 돋움, 굴림;
보다시피 여러개를 사용할 수 있으며, 콤마(,)로 구분합니다
여러개를 입력하는 이유는, 폰트가 없을 경우를 위해서입니다. 만약 저 4개가 모두 없다면 브라우저 기본 폰트로 나와요
맑은 고딕은 쌍따옴표로 묶여있는데, 띄어쓰기가 있는 경우 묶어주는게 좋아요
그런데 없어도 잘 인식해서 전 그냥 씁니다 (...)
# font-size
코드
font-size:16px;
픽셀(px)단위를 주로 사용합니다
16px의 크기는 지금 보시는 글자의 크기입니다. 큼직큼직해서 보기 좋지요' v')
# font-weight
코드
font-weight:normal;
font-weight:bold;
노말은 기본 굵기, 볼드는 굵게입니다
숫자로 설정할 수 있지만 추천하지 않습니다
그냥 굵으냐 안 굵으냐 정도로만 구분하면 충분하다고 봐요
# text-align
코드
text-align:left;
text-align:center;
text-align:right;
text-align:justify;
순서대로 [ 왼쪽/가운데/오른쪽/양쪽 ]입니다
양쪽 정렬을 하면 깔끔해 보여서 좋습니다 (...)
# line-height
코드
line-height:2;
숫자가 작으면, 줄이 위아래로 붙게되니 적당하게 설정하시면 됩니다
보통 1.6~2정도 사용한다고 보시면 됩니다
# text-decoration
코드
text-decoration:none;
text-decoration:overline;
text-decoration:line-through;
text-decoration:underline;
순서대로 [ 없음/윗줄/최소선/아랫줄 ] 입니다
none의 경우, 이미 꾸며진 속성을 없애기 위해서 사용하고, 취소선은 말그대로 취소선으로 쓰죠 (...)
일반 텍스트에 윗줄/아랫줄은 가급적 사용하지 않는걸 추찬합니다
특히 아랫줄의 경우 링크로 착각할 수 있으니까요
# color
코드
color:#05F;
color:#336699;
color:black;
글씨 색상입니다. 뭐.. 이부분의 설명은 필요없겠네요
# background
코드
background:none;
background:#FFF;
background:transparent;
순서대로 [ 없음/흰색/투명 ]입니다
글씨쪽에 배경색이 사용되는건 보통 형광팬으로 긋는것처럼 사용하는것 정도겠죠 (..?)
-
# font
선택자 묶기처럼, 폰트 설정도 묶을 수 있습니다
코드
font:16px/2 맑은 고딕, verdana;
제가 전체적으로 마이피를 검게 바꾸고, 폰트를 모두 흰색으로 하고 싶은데,
저것들 붙여넣어두 적용이 안되는것 같고, 또 뭔가를 써야하는 것 같은데, 그걸 어떻게 하는지 모르니;
어떻게 해야하나요?