※이번 시간은 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

※FONT와 TEXT는 디자인적인 부분이나 가독성 측면에서 매우 중요한 요소 중 하나입니다.

CSS를 활용하여 TEXT에 크기, 글꼴, 효과등을 주거나 정렬하는 방법을 알아보도록 하겠습니다.

 

목차

1. FONT

2. TEXT

 

1. FONT

폰트는 크게 4가지의 속성을 가집니다. 각 속성에 대해 자세히 알아보도록 하겠습니다.

font-size 길이(px, em, ex), 백분율(%; 140%) 폰트의 크기를 지정
font-family 글자체(굴림체, 궁서, 맑은 고딕 등) 폰트 모양을 지정
font-style normal, italic, oblique 폰트 형태(이태릭체 등)를 지정
font-weight normal, bold, bolder, lighter, 숫자(100 200, ‥ ,900) 폰트의 굵기를 지정

 

@font-size 속성

글꼴의 크기를 지정하는 속성입니다.

keyword medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
length px, em 등 고정 수치로 지정합니다.
% 부모 요소의 font-size 기준의 퍼센트로 지정합니다.

 

@font-family 속성

글꼴을 지정하는 속성입니다.

 

font-family: '고딕', '돋움';

첫 번째 글꼴을 사용하되 첫 번째 글꼴이 없을 시 ', '로 구분된 두 번째 글꼴을 사용하는 방식입니다.

글꼴은 더 추가할 수 있습니다.

 

 

@font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

normal 기본 값 (400)
bold 굵게 표현(700)
bolder 부모 요소 보다 두껍게 표현
lighter 부모 요소 보다 얇게 표현
number 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

 

@font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

normal font-family 내에 분류된 기본 값
italic italic 스타일로 표현합니다. (italic체)
oblique oblique 스타일로 표현합니다. (기울임)

 

2. TEXT

 

@text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

none 텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline 밑줄로 꾸밈을 설정
overline 윗줄로 꾸밈을 설정
line-through 중간을 지나는 줄로 꾸밈을 설정

@text-decoration-style 속성

solid 한줄 스타일 ( 기본 값 )
double 이중선 스타일
dotted 점선 스타일
dashed 파선 스타일
wavy 물결 스타일

 

@text-indent 속성

텍스트의 들여 쓰기를 지정하는 속성입니다. 

length px, em 등 고정 수치로 지정. 음수 허용
% 부모 요소의 width를 기준으로 퍼센트로 지정

 

@text-align 속성

텍스트의 정렬을 지정하는 속성입니다. text 가운데 정렬을 위해 많이 사용됩니다.

left 텍스트를 왼쪽으로 정렬
right 텍스트를 오른쪽으로 정렬
center 텍스트를 중앙으로 정렬
justify 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

@text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

 

block 요소를 가운데 정렬 하고자 한다면 margin의 auto 값을 이용해서 양쪽 여백값을 조절하면 됩니다. 

- 인라인 요소 : text-align (center) 

- 블록 요소 :  margin (auto) 

 

 ex) margin:0 auto;

-첫 번째 0은 top, bottom의 여백, 두 번째 auto부분은 left, right의 여백입니다. 좌우 여백을 auto로 줘서 자동으로 양쪽 여백을 같게 만들어 주면 가운데로 정렬됩니다.

 

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

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24
비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)  (0) 2023.02.22
비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON  (0) 2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20

+ Recent posts

티스토리툴바