렌식님 (수정하려니까 다 깨져버려서 2트째 쓰고 있는중..ㅆ)
저도 트게더 css 커스텀 해보려고 했는데 마땅히 제대로 알려주는 강의가 없더라구요.
최소 이놈이 뭐고 이놈이 뭔지 역할까지는 설명해야하는데 주석으로 달랑 끝...
그래서 제 시간 쪼개서 트게더 커스텀하시는데 가장 기초적인 부분, 이거만 알면 웬만한 커스텀 작업은 다 손수 하실 수 있게 강좌 한번 써보려합니다. (아 커스텀 css 외주 받아묵을라 했는데....)
솔직히 tmi라고 생각될 정도로 이 기능이 뭔지, 이건 어떻게 작성해야 하는지 자세하게 적을겁니다.
그래도 기왕 작업하는데 기능, 작성법 정도는 알고 해야하지 않겠어요? ㅎㅅㅎ 아무튼 시작해보겠습니다.
처음 배워볼건 폰트 바꾸기입니다. 솔직히 뭐가 국룰인지는 모르겠지만 폰트 적용은 html에서 폰트가지고 노는건 css라고 생각합니다.
하지만 우리의 트게더는 마크다운 조차도 지원하지 않고 사진 넣으니 다 깨져버려서 글 다시 쓰게 하는데 당연히 html은 손도 못대게 하겠죠?
그래서 css에서 폰트 바꾸는 법을 알아볼겁니다.
CSS에서 폰트를 바꾸는건 @font-face 하나면 끝입니다. 뭐이리 간단해? 라고 생각하실 수 있지만 여기서 자세하게 설명이 들어갈겁니다.
여러분들이 한글이나 워드에서 다른 폰트를 쓸 때는 ttf나 svg 포맷의 폰트 파일을 다운받아서 사용하셨을 겁니다. 하지만 여러분이 웹에서는
웹 서버부터 작업하는게 아닌이상 요즘 폰트 배포 사이트에서는 웹에서도 간단하게 적용 할 수있게 배포하고 있습니다.
저는 눈누라는 사이트를 애용하는데 눈누를 예를 들어서 알아보겠습니다.
우측 하단에 보시면 웹폰트로 사용이라 적혀있고 복사하기가 있습니다. 사실 이놈 하나면 끝이지만 자세하게 알아보겠습니다.
일단 보기좋게 정렬 해보겠습니다.
~~~
@font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
~~~
그참.. 인덴트도 깔끔하게 안되고 마크다운도 안되고 개판이지만 본격적으로 설명 드리겠습니다.
우선 @font-face가 뭐하는 놈이냐면, 웹브라우저(ex. Chrome, Safari..)에게 사용할 폰트의 이름, 다운 받을 수 있는 위치와 속성등을 지정
해주는 지시어입니다.
그러면 속성들을 살펴보겠습니다.
font-family에 여러분이 적용하고 싶은 폰트의 이름을 적어넣습니다. 영어 풀네임으로 적으셔야합니다.
다음 src에 폰트를 다운 받을 수 있는 링크를 적습니다. src: url('https://다운받을.폰트/위치/폰트.woff') format('woff');
이런식으로 적으셔야합니다. 국룰이기 때문이죠.
그리고 font-weight하고 font-style에서 입맛대로 꾸미실 수 있습니다. 안꾸미실거면 normal로 해주시면 됩니다.
예를 들자면 font-weight에 bold를 입힐 수도 있고 font-style 에 italic을 적용할 수도 있습니다.
사실 그냥 눈누 사이트만 봐도 복붙하면 되는데 구지 알필요 있나? 싶겠지만 그래도 알아두면 쓸대가 있습니다.
그리고 이건 개발자들 사이에서 코드 짜는 규칙? 같은건데 골뱅이(@)가 사용되는 지시어는 소스 맨 위에 배치합니다.
자 그러면 이렇게만 하면 소스가 적용되나요? 해보시면 압니다. 적용이 안되어있어요~ 왜그런지는 다음 글에서 찾아 뵙겠습니다.
글이 도움이 되셨다면 추천 꾹 눌러주시면 감사하겠습니다! 트위치 팔로우도 환영입니다~~(아 스트리머분들은 맞팔 해드립니다)
팔로우 눌러주세요~~
