※이번 시간은 CSS에서 자주 사용되는 속성 중 font와 border를 다루어 보려 합니다.

font 속성은 글자의 크기, 굵기, 글꼴 등을 정의하여 주는 속성이며 border는 테두리의 속성값을 정할 수 있는 속성입니다. 

저번 시간에 다루었던 width, height와 padding, margin과 같이 많이 사용되는 속성들입니다. 

목차

1. FONT

2. BORDER

 

1. FONT

※ font 속성은 글자의 크기, 굵기, 글꼴 등을 정의하여 주는 속성입니다. 

크게 6가지의 속성을 가지며 글자의 색상은 따로 font 속성의 하위가 아닌 color 속성으로 지정할 수 있습니다.

font-style 이탤릭체 등의 글꼴의 스타일 지정
font-weight 글자 두께
font-variant 글꼴 변형 (소문자를 대문자로 바꾸는 등의)
font-size 글자 크기
line-height 줄 간격
font-family 글꼴 (굴림, 돋움, …)

 

@font-style

※font-style은 폰트의 표시 형태를 지정하는 속성으로, 폰트의 기본 형태로 표시하는 normal 값과 이탤릭체 또는 기울임 꼴로 표시하는 italic과 oblique가 있습니다.

 

@코드로 보기
    <title>font 예제</title>
    <style>
        #ex1 {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>기본</p>
    <p id="ex1">이텔릭체</p>
</body>
</html>

 

 

@font-weight

※font-weight는 폰트가 표시되는 굵기를 지정하는 속성입니다.

100~900 사이의 굵기 단계를 표시하는 수치값이나 normal, bold 등의 키워드로 선언할 수 있습니다. 

 

@코드로 보기
    <title>font 예제</title>
    <style>
        #ex1 {
            font-weight: 100;
        }
        #ex2 {
            font-weight: 700;
        }
        #ex3 {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>기본</p>
    <p id="ex1">굵기 100</p>
    <p id="ex2">굵기 700</p>
    <p id="ex3">bold 속성</p>
</body>
</html>

 

@font-variant

※font-variant는 영문 폰트의 소문자 표시 형태를 변경하는 속성입니다.

  • font–variant–position : 폰트의 표시 위치를 지정하는 속성, 화학식의 윗첨자, 아랫첨자 등과 같은 형태
  • font–variant–ligatures : 발음 기호 형태와 [æ] 같은 묶음 표시 형태를 표시하는 속성
  • font–variant–caps : 대소 문자 형태를 변경하는 속성
  • font–variant–numeric : 분수나 회계용 숫자 등의 표시 형태를 변경하는 속성
  • font–variant–alternates : 폰트의 장식 요소나 특수 문자의 표시 형태를 변경하는 속성
  • font–variant–east–asia : 한자나 일본어의 폰트를 약자 형식으로 변경할 수 있는 속성

 

@font-size

※font-size는 폰트의 크기를 지정하는 속성으로, xx-small, x-small, small, medium, large, x-large, xxlarge과 같은 절대 크기와 smaller, larger와 같은 상대 크기 등을 사용할 수 있습니다. (일반 웹 페이지에서는 px를 사용)

 

@font-family

※font-family는 텍스트의 폰트를 지정하는 속성으로, 속성 값은 복수로 지정할 수 있으며 복수 지정 시에는 (,)로 구분합니다. 지정된 순서대로 표시할 수 있는 폰트를 찾게 됩니다.

저장되어 있는 폰트 이외에도 URL을 통하여 공유된 폰트를 사용할 수도 있습니다.

 

@코드로 보기
    <style>
        body {
            font-family: '궁서';
        }
    </style>

위 코드처럼 저장되어 있는 폰트를  사용하거나

 
@코드로 보기
    <style>
        @font-face {
            font-family: 'LOTTERIADDAG';
            font-weight: normal;
            font-style: normal;
        }
        body {
            font-family: 'LOTTERIADDAG';
        }
    </style>

URL을 통하여 공유된 폰트 사용이 가능합니다.

 

 

2. BORDER

※border는 테두리의 속성값을 정할 수 있는 속성입니다.

border-top, right, bottom, left 방식으로 방향마다 다른 속성값을 정하여 줄 수 있으며 축약형 명령어로 색, 두께, 스타일 등을 한 번에 지정하여 줄 수 있습니다. 

  • border-width : 선의 두께를 정합니다. 기본값은 medium입니다. 지정된 값 또는 px 등의 수치로 입력합니다.
  • border-style : 선의 모양을 정합니다. 기본값은 none입니다.
  • border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 색(color)입니다.
  • border-radius : 테두리의 굴곡정도를 정합니다. px, % 등의 수치로 입력합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

@border-width

-medium, thick, thin, length, initial, inherit의 기본값을 가지며 px 등의 수치로도 입력합니다.

 

@border-style

  • none  :  기본값 표시하지 않음
  • solid : 실선으로 표시
  • dotted : 점선으로 표시
  • double : 이중 실선으로 표시
  • ridge : 돌출된 선으로 표시
  • groove : 들어간 선으로 표시
  • inset : 보더 안쪽이 들어간 선으로 표시
  • outset : 보더 안쪽이 돌출된 선으로 표시
  • dashed : 파선으로 표시
  • hidden : 표시하지 않음

 

@코드로 보기
    <style>
        body {
            text-align: center;
        }
        #box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 5px;
        }
    </style>

 

200*200px 크기의 테두리, 2px굵기의 실선, 검은색의 테두리 속성값, 5px의 테두리 굴곡 적용

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 - 반응형 레이아웃 만들기  (0) 2023.03.14
CSS에 자주 사용되는 속성(1)  (0) 2023.03.03
비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기  (0) 2023.02.27
비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24

+ Recent posts

티스토리툴바