Samla's Study

 

1. 폰트 굵기 설정

• "font-weigh"t 속성을 사용
• 100~900까지 값 설정 가능 (100이 가장 얇음)
• 100단위 값만 설정 가능 (120, 450 등은 사용 시 기본값으로 설정됨)
• 값 "nomal"은 "400" 과 같음
• 값 "bold"는 "700"과 같음

<style>
	#p1 {
    	font-weight: 400;
        }
        
    #p2 {
    	font-weight: 700;
        }
        
    #p3 {
    	font-weight: normal;
        }
        
    #p4 {
    	font-weight: bold;
        }
</style>



<p id="p1">굵기가 400인 폰트</p>
<p id="p2">굵기가 700인 폰트</p>
<p id="p3">normal은 400과 굵기가 같다.</p>
<p id="p4">bold는 700과 굵기가 같다.</p>

 

2. 텍스트 정렬

• "text-align" 속성 사용 

<style>
	#p1 {
    	text-align: left;
        }
        
    #p2 {
    	text-align: right;
        }
        
    #p3 {
    	text-align: center;
        }
        
</style>



<p id="p1">왼쪽 정렬</p>
<p id="p2">오른쪽 정렬</p>
<p id="p3">가운데 정렬</p>

 

3. 텍스트 꾸미기

• "text-decoration" 속성 사용
• 주로 "<a>" 태그(링크)의 밑줄 없앨 때 많이 사용

<style>
	/* 텍스트에 밑줄 긋기 */
    #p1 {
    	text-decoration: underline;
        }
 
    /* 텍스트에 윗줄 긋기 */
    #p2 {
    	text-decoration: overline;
        }
  
    /* 텍스트에 취소선 긋기 */
    #p3 {
    	text-decoration: line-through;
        }

    /* 텍스트에 아무런 효과도 주지 않기 */
    #p4 {
    	text-decoration: none;
        }
</style>



<p id="p1">텍스트에 밑줄 긋기</p>
<p id="p2">텍스트에 윗줄 긋기</p>
<p id="p3">텍스트에 취소선 긋기</p>
<p id="p4">텍스트에 아무런 효과도 주지 않기</p>

 

4. 폰트 크기 / 줄간격 설정

• 폰트 크기는 "font-size" 속성 사용
• 절대적 크기 설정단위 : px, pt
• 상대적 크기 설정단위 : em,  %
  • % 설정 시 상위 그룹의 폰트 크기를 기준으로 설정됨
  • em : 1em = 100%, 2em = 200%, 1.5em = 150%
• 줄간격은 "line-height" 속성 사용
• 줄간격은 폰트가 가지고 있는 공간(높이) 기준하여 더해지고 빼짐.
• 폰트가 가지는 공간(높이)는 폰트 사이즈보다 좀 더 큼.
• Example
  
  • font가 가지는 공간(높이): 60px (폰트 사이즈는 대략 50px 정도?)
  • line-heigth (줄간격): 90px  ->  위아래 줄간격 15px ((90 - 60) /2) 벌어짐
  • line-height (줄간격): 60px or nomal ->  기본 값 ((60 - 60) / 2)
  • line-height (줄간격): 40px  -> 위아래 줄간격 10px ((40 - 60) / 2) 좁혀짐

5. 폰트 종류 설정

• 폰트 스타일 종류
  • Serif : 궁서체 / Times New Roman
  • San-Serif : 굴림체 / Arial
  • Monospace : Courier / Courier New 
  • Cursive : 필기체
  • Fantasy : 특이한 글씨체
• 폰트 설정 : font-family 속성 사용
  • 방문자의 웹브라우저에 설정 폰트가 설치되어 있지 않는 경우 다른 폰트로 대체 됨. 
  • 사용희망 폰트 외 대체 폰트와 대체폰트 조차 없을 경우 비슷한 스타일의 폰트 그룹을 지정해 주는 것이 바람직함.

/* 1지망 폰트, 대체 폰트, 그래도 이 스타일 중에 골라주세요 폰트 순서로 설정 */
h1 {
	fonrt-family: "Times New Roman", "Times", serif;
    }
    
    /* font-family (상기 예시 serif)는 따옴표 없이 입력해야 함. */