[개발일지 6일차] CSS Selector, Font

MSJ·2022년 5월 12일
0

WEB

목록 보기
6/41
post-thumbnail

2022-05-10
font 스타일에 대한 이해를 높이고 사용해본다

자주 사용되는 가상 셀렉터(selector)

마우스
:hober 마우스가 올라갈 때 적용
:active 마우스를 누른 상태에서 적용

폼 요소
:focus 포커스를 받을 때(키보드, 마우스 클릭)에 적용

링크
link 방문하지 않은 링크에 적용
:visited 방문한 링크에 적용

블록
first-letter : <p>,<div>등 블록형 태그의 첫 글자에 적용
:first-line : <p>,<div>등 블록형 태그의 첫 라인에 적용

구조
nth-child(2n) 짝수 번째 모든 자식 태그에 적용
nth-child(2n+1) 홀수 번째 모든 자식 태그에 적용
:nth-child(1) 첫 번째 자식 태그에 적용


폰트 패밀리 이해

디자이너든 아니든 중요하게 봐야할 요소중 하나가 바로 폰트다.
font-family 는 각각의 다른 스타일의 폰트를 큼직하게 묶어주는 그룹이라고 보면 된다. 5종류가 있는데.

serif 서체의 획 끝에 삐침이 있다(바탕체, 명조체)
sans-serif 서체의 획 끝에 삐침이 없다(고딕체)
monospace 자간이 일정하다 (자간이 뭔데? 아래에.)
cursive 필기체, 손글씨
fantasy 딱봐도 알겠지만 화려하게 꾸며진 서체다. 감이 안온다고?

ㅋㅋㅋㅋ
글씨에 덩쿨이 있거나 영화 타이틀 같은 것들이 여기에 속한다.

모노스페이스를 더 설명해보자면 보통 가독성을 높이기 위해 폰트에 커닝을 주는데 이 경우 자간(글자 간격)을 조정하게 된다. 예시로 Arial, MICROSOFT, aTa... Ii, Cc, Tt, Ww 같이 글자에 여백이 많은 대소문자에는 커닝이 대부분 들어가있다. 이 커닝이란 것을 하지 않은 font family가 바로 monospace다.

참고로 영화서체 중 무료로 배포된 것이 있으니 관심있으면 다운바람

웹 글꼴

*.ttf는 흔히 우리가 알고 있는 폰트 확장명인데, 웹용으로 쓸 수 있지만 폰트 파일 당 용량이 엄청나다. 따라서 빠른 홈페이지 로딩을 위해 가벼운 글꼴로 변환하여 쓰는데. *.eot, *.woff,*.woff가 있으시겠다. 용량은 1/3쯤 가벼워진다.

스타일로 폰트 적용하기

{font-family:'AA AAA', BBBBB, CCCCC, sans-serif;}

'따옴표'는 폰트이름 사이에 공백이 있을 경우 쓴다. 없으면 안써도됨. 이 코드의 의미는 font-family를 쓸건데 AA AAA써줘, 근데 이게 없으면 BBBBB써줘, 이것도 없으면 CCCCC 써줘, 이것도 없어? 그럼 sans-serif 써줘;가 되시겠다. 맨 마지막에 쓰는 폰트는 말하자면 보험이다. 명시해놓은 폰트 중 어느 것도 불러오지 못할 경우 컴퓨터에 깔려있는 기본 font중 하나를 지정해주는 것이다. 보통 font family의 분위기에 맞게 지정해준다. 불러오는 서체 종류가 멋들어진 필기체였다면 마무리는 cursive가 될 수 있겠다. 근데 가독성을 위해선 산세리프도 나쁘지 않지.

폰트 불러오기

(1)@font-face {font-family:패밀리종류; src: url('주소') format('해당포맷');}
(2)@import url('주소')
(3)<link href="주소">
이 말인즉슨 외부에서 주소를 가져와 방문자 로컬에 강제로 다운 시킨다...ㅎ 임시파일로 들어감.

글씨 크기가 작다면 우클릭->새 이미지로 열어보자.

  @font-face {font-family:AAAAA, sans-serif;
  	src: url('주소오오오오') format('eot');
  	src: url('주소오오오오') format('woff');
	src: url('주소오오오오') format('woff2');
    src: url('주소오오오오') format('truetype');
    src: url('주소오오오오') format('svg');
  }

format을 쓰는 이유!

홈페이지에 들어오는 모든 유저가 최신 웹브라우저를 갖고 있을까?
많은 사람들에게 의도한 웹페이지를 보여주기 위한 것이 format이다. 저 코드로 예시를 들어보자면 eot는 마이크로소프트에서 만든 포맷인데, 익스플로러에서만 지원한다. 크롬을 쓰는 나는 불러오질 못함. woff2woff를 더 개선해서 만든 업그레이드 버전이지만, 이것도 호환이 안될 수 있다. 그래서 대부분의 웹브라우저에서 범용적으로 쓰는 woff로 안전하게 깔아놓고. 만에 하나 이것도 지원 못하는 에라이! 구식 컴퓨터일 경우 truetype(.ttf의 포맷명)을 쓰면 된다. 윈도우와 맥에서 오래 사용되어온 가장 연식 높은 글꼴 포맷이기 때문.

자 여기서부터다.
format은 조건문 역할을 한다. format을 붙이지 않았을 경우, 웹브라우저는 위의 5가지 주소 가운데 어떤 주소를 이용해야할지 모르기 때문에 모든 파일을 불러내버린다. 그러면 웹페이지 불러낼 때 어어엄청 무거워진다. 이 사태를 막아야하는데.

혹시나 format을 넣었지만 모든 포맷을 지원하는 웹브라우저라 걱정되는가? 괜찮다. format은 모든 포맷을 다운 받지는 않는다.

src: url('주소오오오오') format('eot');로 1번 방문자가 eot를 정상적으로 불러왔다면 이하 woff~svg에 관한 내용은 전부 무시해버린다. 만약 2번 방문자의 웹브라우저가 eot형식을 이해하지 못한다면(지원하지 않는다면) src: url('주소오오오오') format('woff');로 넘어가겠지? 옳거니 지원을 하는 구나 woff를 받자. 그럼 woff2부터 svg까지는 모두 필요 없어지니까 무시를 해버리는 것이다.
앞전에 배웠던 CSS규칙 캐스케이딩(Cascading)을 기억하는가? 마찬가지다. 때문에 여기서도 코드를 입력하는 순서가 매우 중요하다.

2020디자이너가 추천하는 폰트 : https://yeowubyeol.tistory.com/7

css 표준 단위

em 해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절(16px이 1em)
ex x-height. 해당 글꼴의 소문자 x 높이를 기준으로 크기 조절
px 픽셀. 모니터 사양에 따른 상대적 크기를 가짐
pt 포인트. 일반 문서에서 사용, 1pt==1in의 1/72크기
vw 뷰포트 너비, 브라우저 크기에 따라 달라짐
% font-size:500%->현재 폰트의 500%크기
cm / mm cm / mm
in 인치, 1in ==2.54cm ==96px
pc 피카소(picas), 1pc==12pt
deg 각도, 20deg(시계방향 20도) transform에도 쓰임

그럼 본격적으로 폰트/텍스트 스타일 태그

한꺼번에 써놓겠음

  • 폰트 사이즈
    font-size:1em, font-weight:100굵기: 100 ~ 900, bold | lighter | bolder (참고로 |==or)

    폰트 사이즈 계산: http://pxtoem.com/

  • 텍스트 커닝 설정

  • 텍스트의 위, 아래, 중간에 라인을 그어주거나 없앨 수 있다. 링크가 걸린 텍스트의 밑줄을 지워주는 것도 none의 기능.
    text decoration : none | underline | overline | line through

  • 텍스트 공백 설정

  • 텍스트의 내용에 대소문자 설정이 가능하다. 띄어쓰기 별로 대문자로 시작해주거나 전부 소문자, 전부 대문자로 변환하는 식.
    text-transform : none | capitalize | uppercase | lowercase

  • 컬러지정도 저마다 다른 식을 갖는다
    color : RGB, RGBA, HSL, HSLA

    RGB : #rrggbb (rr: 0~255 사이 값이기에 8bit )
    rr은 16진수로 표현함 0~FF 15가 F (1600만개의 색 표현이 가능하다)
    rgb(90, 43, 255, 0.5) 네 번째는 투명도

    색조절을 눈으로 보고 싶다면 : https://www.w3schools.com/css/css_colors_rgb.asp

  • font-style : normal | italic (폰트타입이 이탤릭체로 제작된것) | obluque (기존 font를 기울여 보여줌)

    주의. 아래처럼 몰아쓸 때는

  <p style="font: italic bold 20px consolas, sans-serif;">
    font family 글꼴 지저어어어엉</p>

font-style, font-weight, font-size(필수), font-family(필수)
필수적으로 입력해야하는 스타일이 있다는 것을 잊지 말자.

  • 텍스트에 그림자를 넣는 효과
    {text-shadow: 5px 5px 3px #rrggbb}
    {color:orange; text-shadow: -10px 10px black;}
    텍스트 쉐도우 효과
    이제와 하는 말이지만 이처럼 효과를 같은 곳에 때려박아 넣을 수도 있다...


잘 쓰면 이미지가 아니라 코드만으로도 이렇게 표현해낼 수 있다.
대신에 코드가 어마무시함....... 맛보기로 보여주자면

이렇다.


어려웠던 점

특별히 어려웠던 건 없었다. 디자인과를 나왔기에 각 서체를 수작업으로 커닝하기도 했던 기억이 새록새록 나서 복습하는 기분이 들었다.

다만 font-face로 적용시키는데 에선 어려움이 있었다. 외부에서 주소를 불러오는 것은 잘 작동되었지만 내 컴퓨터에서 불러오는 명령어는 어째선지 적용되지 않는다...

해결방법

검색해보니 url()과 local() 코드가 따로 있었다!

소감

재밌었다. 이미지가 아니라 코드만으로 세련된 텍스트 디자인이 가능한 것도 흥미로웠다. 사실 며칠 전에 본 개인 홈페이지에 굉장히 신기한 서체가 있었는데, 드래그가 되는 걸보니 이미지는 아닌 것 같았다. 근데 쉐도우 효과 예시로 작성된 코드를 보니 놀라움과 설렘이 함께 몰려왔던 것 같다. 빨리 나도 버젓한 홈페이지를 하나 만들어 보고 싶다.

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글