4. 타이포그래피-font ~ 조화

룰루루 2021. 4. 1. 11:22

2021. 4. 1. 11:22

#1. 타이포그래피-font

: font-family 등을 사용해서 글꼴 조정 가능

1. font-family : 글꼴 적용

1) 글씨체로 글꼴 적용

=> font-family : (글꼴이름)

2) 해당 글꼴이 적용 안 될 때는 여러 개로 순차적 적용 가능

=> font-family : (글꼴1) , (글꼴2) , (글꼴3)

+ 두 단어 이상일 경우에는 ""로 묶기

ex) font-family : Nanumgothic , "Times New Roman"

3) 포괄적 글꼴 적용 가능

: serif , sans-serif , cursive , fantasy , monospace 적용 가능. 이들은 특정 글꼴 이름이 아니라, 앞에서 언급한 글꼴이 컴퓨터에 없을 경우 적용될 수 있는, 어느 컴퓨터에나 있는 포괄적인 글꼴임.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TYPOGRAPHY</title>
    <style>
      h3{text-align : center}
      #type11{font-family : sans-serif ; color: indianred}
      #type12{font-family : serif ; color: indianred}
      #type13{font-family : cursive ; color: indianred}
      #type14{font-family : fantasy ; color: indianred}
      #type15{font-family : monospace ; color: indianred}
    </style>
  </head>
  <body>
    <h3 id="type11">Dark Chocolate and Wafer</h3>
    <h3 id="type12">Dark Chocolate and Wafer</h3>
    <h3 id="type13">Dark Chocolate and Wafer</h3>
    <h3 id="type14">Dark Chocolate and Wafer</h3>
    <h3 id="type15">Dark Chocolate and Wafer</h3>
  </body>
</html>

2. font-weight : 글꼴 굵게 서식 적용

: font-weight : bold 로 설정하면 같은 글꼴인데 굵게만 표시된다.

ex) <h3 font-weight:bold>Dark Chocolate</h3>

3. line-height : 줄간격 서식 적용

: line-height : (숫자) 로 설정하면 해당 태그/id/class 선택자의 줄간격을 설정할 수 있다.

이때 두 가지 방법으로 설정 가능

1) 줄간격의 배수 = 그냥 숫자만 입력

ex) <h2 line-height:2>Hello World</h2>

(기본 줄간격은 1.2 이다)

2) pixel로 지정 = (픽셀 값) px 입력

ex) <h2 line-height:200px>Hello World</h2>

- px는 줄간격의 배수와 달리, 화면 확대나 브라우저 설정을 변경해서 글씨 크기가 바뀌어도 줄간격이 이에 따라 바뀌지 않아서 추천하지 않음

#2. 타이포그래피 - 웹폰트

: 사용자가 갖고 있지 않은 폰트를 다운로드받아서 사용할 수 있는 방법

*폰트의 용량이 너무 크다면 주의해야 한다.

1. 구글의 폰트 사용

: fonts.google.com 에서 폰트 다운로드

2-1) <link> 태그 안의 href url을 포함한 코드를 복사해서 붙여넣기

ex) <link rel="preconnect" href="https://fonts.gstatic.com">

: <link> 태그 안의 href 속성을 이용하면, html 실행 시 href 안의 링크를 불러온다고 한다.

2-2) <style> 태그 안의 font-family 를 포함한 코드를 복사해서 붙여넣기

ex) <style>#아이디이름{font-family:폰트이름}</style>

: 그러나 이 경우는 font-family에 이미 구글 폰트의 글꼴이 있어야만 간단하게 코드 한 줄로 작성할 수 있고, 아니라면 아래의 더 복잡한 2번 방법을 사용해야 한다.

2. 개인이 갖고 있던 폰트를 웹폰트로 바꿔서 사용

-> (생각보다 더 어려워서 따라 실행하진 못했다ㅠㅠ)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Train+One&display=swap" rel="stylesheet">
    <style>
      h3{text-align : center}
      #type41{font-family: 'Train One', cursive;}
    </style>
  </head>
  <body>
    <h3 id="type41">Dark Chocolate and Wafer</h3>
    <h3>Dark Chocolate and Wafer</h3>
  </body>
</html>

#2. 조화

CSS 수업에서 하나의 element는 여러 디자인 서식의 영향을 받을 수 있다. 만약 여러 서식이 중첩으로 적용된다면 어떤 규칙에 의해 하나의 서식이 우선적으로 적용되는데, <조화> 부분에서는 어떤 규칙이 적용되는지를 알아볼 것이다.

#2-1. 상속

상속(Inheritance) : 부모 요소가 가진 속성들을 자식 요소가 물려받는 개념

상속이 있는 이유는 코드 작성의 편리함 때문이다.

ex) 문서 전체에 서식을 적용하고 싶다면, 개별 요소에 서식을 적용하는 것보다 <body>나 <html> 태그 하나에 속성을 적용시키면, 이 태그는 모든 태그들의 부모 태그이므로 코드 한 줄로 본문 전체에 서식이 적용된다.

※ 그러나 모든 속성이 상속되는 것은 아니다.

b/c 상속되어야 유리한 속성이 있고, 상속되지 않아야 유리한 속성이 있기 때문이다.

ex) color 속성은 상속됨 <-> border 속성은 상속되지 않음!

* 어떤 속성이 상속되는지는 www.w3.org/TR/CSS21/propidx.html 여기서 확인할 수 있다.

+) 주석 처리 정리

1) 한 줄 단위로 주석 다는 방법

: 

2) 여러 줄 단위로 주석 다는 방법

: /*

( comment

comment )

#2-2. stylish

: 그동안 배운 CSS를 웹페이지 생산의 관점이 아닌, 소비의 관점에서 보는 방법들 중 하나

= 내가 자주 사용하는 웹사이트의 디자인 서식을 직접 바꿀 수 있는 방법이다.

*방법*

1. 구글 검색창에 stylish + (브라우저 이름) 검색

ex. stylish chrome 검색

2. 검색하면 맨 상단에 나오는 Stylish 사이트에 들어가서 프로그램 설치.

3. chrome의 경우 우측 상단의 stylish 아이콘 선택 후, 'find more styles' 영역 클릭하면 사이트로 이동.

4. userstyles.org/styles/browse/google 이 웹사이트에는 google, stackoverflow, netflix 등 다양한 웹사이트에 해당하는 디자인 서식들이 있는데, 두 가지 선택지가 있다:

4-1. 다른 사람들이 올려놓은 서식을 그대로 다운로드 받을 수 있다.

=> 구글 사이트에서 슈퍼마리오 스타일을 다운받았다!

4-2. 내가 직접 웹사이트를 선택하고 서식을 변경할 수 있다.

나는 생활코딩 웹사이트에 서식을 적용하려고 했는데, 강의의 설명을 그대로 따라했지만 서식이 적용되지 않았다; 'Style' 바가 안 나와서 !important 명령을 적용할 수 없었던 듯 하다.

(디자인 서식 뒤에 !important 를 붙이면 해당 서식을 경쟁 관계의 서식보다 우선적으로 적용하도록 한다)

#2-3. cascading

웹사이트는 웹 브라우저, 사용자, 저자의 디자인이 자유롭게 결합될 수 있는 공간이다.

하지만 여러 디자인이 적용되는 경우, 우선순위를 고려하는 규칙이 적용된다.

규칙1.

웹 브라우저 < 사용자 < 저자

: 웹페이지 저자가 지정한 디자인은 사용자와 웹 브라우저가 바꿀 수 없다.

또한 요즘은 사용자가 웹 디자인을 변경할 수 있는 권한을 주지 않는 웹사이트들도 많아서, 사용자가 디자인에 관여하는 면이 점차 줄어들고 있다.

규칙2.

tag selector < class selector < id selector < style attribute

: 가장 구체적이고 세부적인 속성이 먼저 적용된다!

id 는 하나의 대상에만 적용되고, class 는 여러 대상에 적용 가능하므로, id가 더 세부적이라고 판단된다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      li {color:tomato ; text-align:center ; font-size:1.5rem} <!-- tag selector -->
      #ids {color:pink}  <!--id selector -->
      .classes {color:purple}  <!- class selector -->
    </style>
  </head>
  <body>
      <li id="ids" class="classes" style="color:blue">html</li>    <!-- style attribute-->
  </body>
</html>

'front-side > CSS' 카테고리의 다른 글

6. 레이아웃 추가(심화)내용 (0)	2021.04.05
5. brackets ~ 레이아웃 기초 내용 (0)	2021.04.02
3. 선택자 fin ~ 타이포그래피 (0)	2021.03.30
2. 선택자 (0)	2021.03.29
CSS Tutorial: (1)	2021.03.24

아스