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

※CSS(Cascading Style Sheet)는 HTML 문서의 스타일이나 레이아웃 등 디자인 서식을 작성하는 언어

 

※공부를 진행하다 보니 CSS의 속성 중 사용빈도, 활용도가 높은 속성들이 정리가 되었습니다.

그래서 이번 시간은 자주 사용되는 속성들을 자세히 파해쳐볼까 하여 준비하였습니다.

이 부분도 내용이 많은 편이기 때문에 파트를 나누어 정리해 보도록 하겠습니다.

(1) 편에선 width와 height, margin과 padding 속성에 대하여 정리해 보았습니다.

목차

1. width와 height

2. margin과 padding

 

1. width와 height

※width와 height속성은 단어의 뜻처럼 가로, 세로의 길이를 의미합니다. 값의 단위는 % 와 px, vw와 vh가 있습니다. px는 픽셀 값을 말하며 % 는 상위 컨테이너에서 차지하는 비율, vw와 vh는 html, body에 대한 비율을 말합니다.

width, height 속성은 padding, borders, margins 가 포함된 길이가 아닙니다. padding, borders, margins과과 별개의 넓이와 높이 값을 가집니다.

 

@속성

  • auto : 브라우저가 너비와 높이를 계산한다. 기본값이다.
  • length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
  • %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용한다.
  • inherit : 부모 요소로부터 값을 상속받는다.
  • VW, VH : html, body의 너비와 높이값에 대한 비율로 적용한다.
  • max-width, max-height : 최대로 가질 수 있는 너비, 높이 값을 지정합니다. 지정한 값 이하로만 사이즈가 적용됩니다.
  • min-width, min-heigth : 최소로 가질 수 있는 너비, 높이 값을 지정합니다. 지정한 값 이상으로만 사이즈가 적용됩니다.

 

 

2. margin과 padding

※margin과 padding 속성은 각각 외부여백과 내부여백을 의미합니다. border를 기준으로 보면 border와 content 사이의 여백을 padding, border와 다른 요소와의 여백을 margin이라 합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

위의 코드처럼 content자체의 크기는 100*100이지만 1px크기의 border와의 내부여백 10px, border를 기준으로 한 외부여백이 20px로 적용된 것을 확인할 수 있습니다.

margin의 경우 위의 사진처럼 요소가 세로로 배치되어 있을 시 서로의 margin값을 공유하여 하나의 값으로 적용되며 두 요소의 margin값이 다르다면 더 큰 값으로 적용합니다. 

 

그러나 가로로 배치된 경우에는 요소 각각의 margin값이 적용되어 첫 번째 요소의 값과 두 번째 요소의 값을 합친 크기의 여백이 생기게 됩니다. 이점을 유의하여 배치해야 할 것입니다.

 

 

@margin을 이용한 가운데 정렬방법

            margin: 0px auto;

위 코드처럼 상단, 하단에 대한 값을 주고 우측, 좌측에 대한 값을 auto로 지정하면 좌, 우 여백을 같은 값으로 적용하여 요소가 가운데로 정렬됩니다.

 

 

 

@속성 값 입력 방법

            padding: 10px; /*top right bottom left 각각 10px로 적용*/
            padding: 10px 20px; /*top,bottom이 10px, right,left가 20px로 적용*/
            padding: 10px 20px 30px; /*top이 10px right,left가 20px bottom이 30px*/
            padding: 10px 20px 30px 40px; /*top right bottom left 순서로 적용*/

 

CSS에서 box형태의 속성값들은 거의 상단, 하단, 우측, 좌측의 순서로 값이 입력됩니다.

값이 하나일 때에는 전체 값이 적용되며 두 개일 경우 상단과 하단, 우측과 좌측으로 묶여 적용됩니다.

세 개일 경우는 상단, 우측과 좌측을 묶고 하단으로 적용되어 상단 10px, 우측, 좌측 20px, 하단 30px 값이 적용되는 것을 볼 수 있습니다. margin도 이와 같은 방식으로 적용되며 대부분의 box형태의 속성값들이 이와 같은 방식을 사용합니다.

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

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 - 반응형 레이아웃 만들기  (0) 2023.03.14
CSS에 자주 사용되는 속성(2)  (0) 2023.03.07
비주얼스튜디오 코드(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

티스토리툴바