CSS / font-style / 글자 모양 정하는 속성

개요

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다.

  • 기본값 : normal
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 1

문법

font-style: normal | italic | oblique | initial | inherit
  • normal : 보통 모양입니다.
  • italic : 기울임꼴입니다.
  • oblique : 기울임꼴입니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 줄이 oblique입니다.

하지만, 대부분의 글꼴이 italic과 oblique의 모양이 같습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p { font-family: "Segoe UI"; }
      .no { font-style: normal; }
      .it { font-style: italic; }
      .ob { font-style: oblique; }
    </style>
  </head>
  <body>
    <p class="no">Normal - Lorem ipsum dolor sit amet.</p>
    <p class="it">Italic - Lorem ipsum dolor sit amet.</p>
    <p class="ob">Oblique - Lorem ipsum dolor sit amet.</p>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 7.0+
  • Safari : 1.0+
같은 카테고리의 다른 글
CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...

CSS / tab-size / 탭 크기 설정하는 속성

CSS / tab-size / 탭 크기 설정하는 속성

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

CSS / background-image / 배경 이미지 정하는 속성

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

CSS / 자동 증가하는 일련 번호 붙이기

CSS / 자동 증가하는 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있다. 이때 사용하는 속성은 counter-reset, counter-increment, counter이다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정한다. 그리고 counter로 일련 번호를 붙인다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / Flex / align-content

CSS / Flex / align-content

개요 flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려간다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content이다. 문법 align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit stretch : 기본값으로, 높이를 꽉 채운다. flex-start : 위쪽부터 ...

CSS / columns / 다단으로 만들기

CSS / columns / 다단으로 만들기

columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...

CSS / background-color / 배경색을 정하는 속성

CSS / background-color / 배경색을 정하는 속성

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 1 바깥 여백(margin)은 칠하지 않고, 안쪽 여백(padding)은 칠한다는 것을 ...