티스토리 스킨을 몇달전부터 빠진 사람이야. 정말정말 기초적인것들이랑 이거 쓰면 좋다! 라는 사이트 추천이라 이미 익숙한 사람들은 별로 의미가 없을꺼라 생각해!
이름없음2021/01/15 01:04:45ID : KZa67s7bB83
1.
먼저 티스토리 스킨은 자신이 만들거나 / 사거나 / 배포 받을수 있어. 근데 웹코딩이나 이런걸 잘 모르면 자신이 직접 만드는건 진짜 어렵더라 ( 나 ) ㅋㅋㅋㅋ ㅠ
티스토리 스킨은 티스토리 본 사이트에 들어가서 스킨에 들어가면 있거나, 인터넷에서 주로 티스토리 스킨 배포라고 치면 자주나오는데 티스토리 본사이트에서 찾는건 대부분 유료인 경우가 많아. 실용적인게 아니라 아기자기하고? 그런 이쁜 스킨들이 대부분 다 유료야. 그러니까 검색해서 보는게 더 얻기가 쉬워.
이름없음2021/01/15 01:08:30ID : KZa67s7bB83
2
이제 티스토리 스킨이 있고, 편집에 들어가면 Html / css 나뉘어진게 보일거야.
각자 뜻은 콘텐츠에 구조와 의미를 주기 위한 하이퍼 텍스트 마크업 언어 / 콘텐츠에 스타일과 모양을 주기위한 프리젠테이션 언어라는데.. 사실 그런거 몰라도 어디에다가 어디에 수정해야하는지 알기만하면 문제없음!
나는 자주 쓰이는 코드들을 정리해줄꺼얌.
이름없음2021/01/15 01:15:39ID : KZa67s7bB83
2-1
css에 수정해야할 코드가 많은 스킨도 있고 반대로 html가 많은 스킨이 있어.
보통 (대부분!) 예를들어 스레딕에서 레스를 보내는 버튼의 ‘ 등록 ‘ 이런 글씨들은 html에서 더 세세하게 수정할수있고
그 버튼의 그림자는 css에서 수정할수있는데, 스킨 배포자분들이 그런 수정해야할곳은 알려주시거나 질문 하면 알려주시니까 배포글을 잘읽는게 중요함.
  ( 띄어 쓰기 )
<br> ( 문단 나누기 )
< 코드들은 그냥 우리가 띄어쓰기 버튼을 누른다고 띄어쓰기가 되는게 아니라
이런 코드를 삽입해야 띄어쓰기나 문단 나누기가 돼
.container_postbtn {display:none;} /*공감 버튼 숨기기*/
< css맨-아래에다가 붙히면 공감 버튼을 없앨수있어
이름없음2021/01/15 01:17:09ID : y1u5PbjwIII
오오오오오...이런 거 필요했어 ㅠㅠ 완전 필요했어 ㅠㅠㅠㅠ
나 컴터마저 잼병인데 스크랩간다
앗...갑자기 댓글 달아서 설명에 흐름 깨졌다면 미안..
이름없음2021/01/15 01:27:13ID : KZa67s7bB83
2-2
폰트를 바꾸려면 먼저 css에서 @import 나 @font-face를 찾아야해. ( 차이는 생각보다 없음 )
무조건 대부분 맨위에 있으니까 찾기 쉬울꺼야.
이건 사이트가 어디에서 폰트를 찾아와서 적용 시켜야하는지 티스토리에게 알려주는 코드야.
이런 링크는 눈누에서(무료상업용폰트사이트) 웹폰트 복사로 제공하니까 좋아하는거 잘 찾아봐.
하지만 이것만 바꾼다해서 폰트가 바뀌진않아.
그러니까 예를 들어
@font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
} (< 폰트를 바꿨는데 갑자기 블로그가 이상하게 변한다면 보통 이게 두번 들어갔을수도있어 )
이렇게 우리가 넣었다고 하자. 그럼 여기에 있는 font-family: 'Cafe24Oneprettynight'; < 에 있는 Cafe24Oneprettynight를
css에서 찾다보면 나오는 다른 font-family:”~”; 에다가 font-family: 'Cafe24Oneprettynight'; 로 바꿔줘야해 (; << 이거 없으면 안됌! )
각 스킨마다 하나하나 넣어줘야할수도 있고, 하나만 바꾸면 다 바뀌는 스킨도 있으니 그건 알아서 글을 읽고 하길 바람! ( 하지만 함부로 다 바꿔버리면
스킨이 제대로 작동 안될수있으니 주의 )
요약
1. 복사한 웹폰트를 ( ttf나 otf같은 폰트 파일은 파일에 추가할 필요없어 ) css에서 @import 나 @font-face가 적힌 코드를 ( {} ) 지우고 붙여넣을것
2. 다른 font family에다가 그 웹폰트에 적힌 이름으로 바꿀것 ( 예시: font-family: 'Cafe24Oneprettynight'; )
팁: ‘k’같은 이름으로 미리 font family를 다 바꿔놓고 웹폰트에다가도 그 이름으로 하면 그대로도 적용됌
이름없음2021/01/15 01:27:38ID : KZa67s7bB83
괜찮아! 혹시 막히거나 모르는거 있어?
이름없음2021/01/15 01:33:53ID : KZa67s7bB83
그외에
색깔 바꾸기
color: #( 웹컬러라고 검색하면 코드들이 나오는데 원하는 색의 코드를 넣으면 됌 )
폰트 사이즈
font-size: ~px ;
px 말고도 다른 개념이 많지만 주로 px를 쓰고있어!
보통 본문에 권장되는 크기는 10-18px야 ( 개인 차이임 )
line-height :
줄간격을(행간) 조종해주는 코드야 . 근데 이건 0.2 px라던가 정말 조금조금 하는편이 막 본문을 안나가니까 주의해
여기까지의 설명한 부분 예시 :
@font-face {
font-family: 'G';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* { margin:0; padding:0; border:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'G', sans-serif; color: #373737; font-size: 11px; }