SunFly의 코딩 및 정보 블로그

CSS(Cascading Style Sheet) 기본 구조 (Font) 본문

웹프로그래밍

CSS(Cascading Style Sheet) 기본 구조 (Font)

SunFly 2021. 10. 14. 00:31

※ 내부 스타일 선언

  • HTML 문서의 <head>에서 <style> 태그를 이용하여 선언
  • 주석은 /*와 */사이에 기입

● HTML 문서 내에서 CSS선언

<head>

  <style type="text/css">

</head>

 

● 외부 CSS 연결

<head>

<link rel="stylesheet" type="text/css" href="CSS 파일 이름">

</head>

 

● 인라인 스타일시트 삽입

  • 모든 요소에서 사용할 수 잇는 style 속성을 이용
  • 해당 태그에만 특정한 스타일을 적용하고 싶을 때 사용

▷Font

  • font-family : 글꼴 지정
  • font-size : 글자크기
  • font-weight : 글자 굵기
  • font-style : 기울임 모양
  • font-variant : 영문 소문자의 표시 방법

<DOCTYPE html>

<html>

<head>

<title> 시험 공부용title>

<meta charset="UTF-8">

<style type="text/css">

h3 {font-family:"맑은고딕" "돋움" san-serif;color:red;}

h3:after { content:"(sblim)"; font-size: 10pt;}

p { font-family: "Times New Roman" "돋움" serif; line-height: 10pt;}

#x-small {font-size:x-small;}

#v-normal { font-variant: v-normal;}

#small-caps { font-variant: small-caps;}

 

<style>

<head>

 

<body>

<h3>CSS 폰트 속성</h3>

<p>

font-size:

<span id="x-small">연세대학교</span>,

<span id="small">small_연세대학교</span>

<span id="pt12">연세대학교</span>

<p>

<p>

font-variant:

<span id="v-normal">연세대학교</span>

<span id="small-caps">연세대학교 small-caps, </span>

<p>

<body>

<html>

 

위의 코드 실행 결과값

 

'웹프로그래밍' 카테고리의 다른 글

[HTML] 표 만들기  (0) 2021.10.13
HTML 기본 구조  (0) 2021.10.12
'웹프로그래밍' Related Articles more