Section 6: CSS: The Very Basics (1)

Zvezda89·2022년 5월 2일
0

2022.05.02 05:31 PM ~ 07:30 PM

Section 6: CSS: The Very Basics

* 글속 태그들 < >는 ( )로 대체


<< CSS Text의 Properties(속성들) >>

-> 1. text-align : 텍스트의 좌우 중앙 정렬을 시켜줌.
(left, right, center 등으로 쓸수도 있고, 요소 내부에서 '몇%'만 이동하라고 %로 지정도 가능)

-> 2. font-weight : 글꼴의 두께를 설정함.
(normal, bold, lighter, bolder, 100, 900 등등)
※ normal은 400과 동일. bold는 700과 동일

-> 3. text-decoration : 보통 텍스트 밑에 밑줄을 긋는 용도.
(underline: 밑줄, overline:윗줄, line-through: 글씨 취소선.
스타일도 지정해줄 수 있음)
(ex: text-decoration: #f78120(색상) underline(밑줄) wavy(물결모양) 4px(선의 두께);)

-> 4. line-height : 텍스트 줄과 줄 사이의 간격을 띄우거나 줄임 (장평)

-> 5. letter-spacing : 글자간의 간격을 띄움 (자간)

-> 6. text-transfrom : 글자 앞을 다 대문자로 시작하도록 하거나,
전부 대문자로 바꾸거나, 전부 소문자로 바꿀 수 있음


<< CSS : Font Size 글자 크기 변경 >>

-> 1. font-size :
※ 많은 단위가 있지만 보통 'px' 단위를 많이 사용함.
※ px : 'Pixel'의 준말. 가장 일반적으로 사용되는 '절대 단위'

반응형 웹사이트에서는 추천하지 않음!


<< Font Family >>

※ 텍스트 요소의 '글꼴'을 변경하는데 사용됨.

※ 글꼴을 바꿀 때는 유의해야 함!

  • Windows와 Mac은 각각 지원하는 글꼴들이 다름.
  • 외부 사용자 글꼴을 추가할 수 있으나 다소 복잡함

    ※ Generic-family-name : 모양이 비슷한 글꼴들의 모음집
    -serif: 바탕체 / sans-serif: 고딕체 / cursive: 필기체 / fantasy: 장식체, monospace: 고정폭
    -보통 글꼴 지정 맨 마지막에 generic name을 넣어준다.
    (사용자의 컴퓨터에 지정 글꼴들이 모두 없을 때, 일반 글꼴을 넣어주는 것)

※ 한개~두개 정도의 백업을 제공해주는 것이 좋다!!

-> 1. "Stack" : 순서대로 사용하고 싶은 글꼴들의 목록

(ex: font-family: Segoe UI, Times New Roman, Sans-serif;
-Segoe UI 글꼴이 있으면 이것으로 출력,
-없다면 Times New Roman 글꼴로 출력,
-이것도 없다면, Sans-serif(고딕체) 중 아무거나로 표현

profile
Come As You Are

0개의 댓글