TILHTML&CSS

html-css-study-11

CSS, HTML, TIL, Web, coding

html-css

HTML Study 11

  • fontello 사용법
  • letter, word spacing
  • transition 사용 주의점
  • 프로젝트 하면서 느낀점 9월 23일

fontello 사용법

  1. fontello 사용법
  2. fontello 접속 마음에 드는 fontello 아이콘들 선택(라이센스 주의)
  3. 다운로드
  4. 다운로드 된 압출파일을 해제
  5. 해제된 폴더를 프로젝트에 붙여넣는다.(가급적이면 폴더 네임수정 - 지저분함)
  6. CSS파일에 다음과 같이 넣어준다.
1
2
3
4
5
6
7
8
@import url('./fontello/css/fontello.css'); /*import*/


/*사용 방법*/
.header::after{
    content: '\e805';
    font-family: "fontello";
}

letter , word spacing

  • 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정한다.

  • 값이 커지면 간격이 커진다.

  • 값에는 음수를 넣을 수 있다.

    ( 마이크로소프트 엣지나 인터넷 익스플로러에서는 단어 사이의 간격을 음수로 정해도 글자가 겹치지 않을 정도로만 간격이 줄어든다.)

  • 음수를 값으로 하는 경우 글자가 겹칠 수 있다.

  • 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변한다.

  • 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않는다.


transition 사용 주의점

​ transition 사용시 초(s) 단위를 붙일 경우, 0일때 s를 생략하면 작동을 안한다.

​ 꼭 유의 하고 사용할 것.


프로젝트 하면서 느낀점

  • 막히면 차분히 무엇이 문제인지 돌아보고 꼭 구조적으로 해결하기 보다는 작은부분부터 수정해 나가기.
  • 개발 도중 정적이니 동적이니 반응형이니 고정형이니 생각하지 말고 현재 주어진 디자인만 생각하기.
  • 레이아웃 설계는 가능한 그리면서 진행하기. (나중에 레이아웃을 뒤엎는 경우가 생긴다.)
  • flex , float , absolute , grid 특성에 대해서 다시 한번 공부하기

Share