|
안녕하세요!
저는 팬갤러리에서 달글을 운영하고 있는 달글장입니다!
최근에 글쓰기 에디터가 업데이트 되면서 본문 꾸미기에 어려움을 겪으시는 분들이 많더라구요..!
저 역시 그랬답니다!
어느 날 각 잡고 외국 사이트까지 가서 배운 결과 어느정도 타파..! 한 것 같아요! (저만 그렇게 생각 할 수 있음)
개인적으로 저희 달글 찾아오셔서 문의 해주시는 분들이 늘어나고 계시기도 하고
댓글로 알려드리기엔 한계가 있어 이렇게 막생정을 쓰게 되었습니다!
솔직히 말하면 우리 달글만 예뻤으면 하는 맴 쪼금은 있었다...🥺 이해해주라...🥺
그런데 그게 다 무슨 의미가 있니~ 다 같이 예쁘고 아름다운 달글 문화 만들어요 우하하
들어가기에 앞서 저도 프로그래밍 언어 조금만 알아서 (영어나 읽는 정도,,..)
원리를 물어보시면 대답을 못해드릴 수 있어요..!
아무튼 서론이 길었죠 고고싱❣️
먼저 본문 꾸미기는 'PC' 에서만 가능합니다!
1. 폰트 적용
오늘 우리가 사용할 폰트는 '눈누' 라는 사이트 폰트를 사용할 거예요!
사이트에 들어가서 폰트를 골라줍니다!
저는 '교보손글씨'를 골랐어요!
클릭해 주면 이런 창이 뜰 거예요.
여기서 우리는 '웹폰트로 사용' 을 이용할 거예요!
작은 노란 네모박스를 클릭하면 복사가 됩니다!
복사를 하고 다시 컴쭉으로 돌아와주세요.
글쓰기 페이지에 '<>HTML' 을 클릭해주세요!
그럼 새 창으로 이런 창이 뜰 거예요.
여기서 집중!
<!DOCTYPE html>
<html>
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
<style type="text/css">
"복사한 웹폰트 붙여넣기"
p{font-family: '폰트 패밀리';}
p{font-size: 14px;}
br{font-family: '폰트 패밀리';}
br{font-size: 14px;}
body{font-family: '폰트 패밀리';}
body{font-size: 14px;}
table{font-family: '폰트 패밀리';}
table{font-size: 14px;}
td{font-family: '폰트 패밀리';}
td{font-size: 14px;}
input{font-family: '폰트 패밀리';}
input{font-size: 14px;}
form{font-family: '폰트 패밀리';}
form{font-size: 14px;}
textarea{font-family: '폰트 패밀리';}
teexarea{font-size: 14px;}
</style>
</head>
<body>
</body>
</html>
이걸 '교보손글씨'로 적용하면
<!DOCTYPE html>
<html>
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face {
font-family: 'KyoboHand';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
font-weight: normal;
font-style: normal;}
p{font-family: 'KyoboHand';}
p{font-size: 14px;}
br{font-family: 'KyoboHand';}
br{font-size: 14px;}
body{font-family: 'KyoboHand';}
body{font-size: 14px;}
table{font-family: 'KyoboHand';}
table{font-size: 14px;}
td{font-family: 'KyoboHand';}
td{font-size: 14px;}
input{font-family: 'KyoboHand';}
input{font-size: 14px;}
form{font-family: 'KyoboHand';}
form{font-size: 14px;}
textarea{font-family: 'KyoboHand';}
teexarea{font-size: 14px;}
</style>
</head>
<body>
</body>
</html>
이런 모습이 되는 겁니다!
2. 배경 삽입
다음은 더 간단한 배경 이미지 넣기!
배경하고 싶은 이미지나 움짤을 갠카나 아무 곳에 올려주세요~
올린 배경을 오른쪽 마우스로 클릭하면 '이미지 주소 복사'가 나오는데 그걸 복사해주고
('이미지 복사'가 아니고 '이미지 주소 복사' 입니다!!)
저는 이 움짤을 배경으로 넣어 볼게요.
div {background:url('이미지 주소 복사');}
이걸 아까 위에 html 사이에 넣어주면 됩니다!
그럼 '교보손글씨'에 별 움짤로 배경을 적용하면 최종 이런 형태가 되겠죠?
<!DOCTYPE html>
<html>
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face {
font-family: 'KyoboHand';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
font-weight: normal;
font-style: normal; }
p{font-family: 'KyoboHand';}
p{font-size: 14px;}
br{font-family: 'KyoboHand';}
br{font-size: 14px;}
body{font-family: 'KyoboHand';}
body{font-size: 14px;}
table{font-family: 'KyoboHand';}
table{font-size: 14px;}
td{font-family: 'KyoboHand';}
td{font-size: 14px;}
input{font-family: 'KyoboHand';}
input{font-size: 14px;}
form{font-family: 'KyoboHand';}
form{font-size: 14px;}
textarea{font-family: 'KyoboHand';}
teexarea{font-size: 14px;}
div {background:url('https://t1.daumcdn.net/cafeattach/aVeZ/aef3f60b566c515f5bdccd8b2d02c1d43b402a2c');}
</style>
</head>
<body>
</body>
</html>
이걸 적용한 글은 최종 이런 모습!!
참 쉽죠?
3. 폰트 색상 설정
https://html-color-codes.info/Korean/
배경이 검은 색이거나 글자 색상을 다른 예쁜 색으로 바꾸고 싶을 때 사용하는 방법입니다!
위 사이트에서 원하는 색상을 복사해주세요!
p,br,body,table,td,input,form,textarea {color:#색상 코드;}
이 html을 폰트 설정 아래, 배경 설정 바로 위에 삽입해주면 됩니다!
textarea{font-family: '폰트 패밀리';}
teexarea{font-size: 14px;}
p,br,body,table,td,input,form,textarea {color:#색상 코드;}
div {background:url('이미지 주소 복사');}
</style>
</head>
<body>
</body>
</html>
이런 모습이겠죠?
이 방법으로 폰트 색상을 바꾼 달글의 모습!
4. 폰트 테두리 설정
배경이 짙은 색이거나 현란하게 움직이는 배경일 경우 가독성이 떨어지는 부분이 있어요!
그럴 때 사용하는 방법입니다!
p,br,body,table,td,input,form,textarea {color:#폰트 색상 코드; text-shadow:-1px 0 #폰트 테두리 색상 코드, 0 1px #폰트 테두리 색상 코드,1px 0 #폰트 테두리 색상 코드, 0 -1px #폰트 테두리 색상 코드,-1px 0px 20px #폰트 테두리 색상 코드, 0 1px #폰트 테두리 색상 코드,1px 0 #폰트 테두리 색상 코드, 0 -1px #폰트 테두리 색상 코드,-1px 0px 20px #폰트 테두리 색상 코드, 0 1px #폰트 테두리 색상 코드,1px 0 #폰트 테두리 색상 코드, 0 -1px #폰트 테두리 색상 코드;}
이걸 위에 3번과 같은 자리에 삽입해줍니다!
textarea{font-family: '폰트 패밀리';}
teexarea{font-size: 14px;}
p,br,body,table,td,input,form,textarea {color:#폰트 색상 코드; text-shadow:-1px 0 #폰트 테두리 색상 코드, 0 1px #폰트 테두리 색상 코드,1px 0 #폰트 테두리 색상 코드, 0 -1px #폰트 테두리 색상 코드,-1px 0px 20px #폰트 테두리 색상 코드, 0 1px #폰트 테두리 색상 코드,1px 0 #폰트 테두리 색상 코드, 0 -1px #폰트 테두리 색상 코드,-1px 0px 20px #폰트 테두리 색상 코드, 0 1px #폰트 테두리 색상 코드,1px 0 #폰트 테두리 색상 코드, 0 -1px #폰트 테두리 색상 코드;}
div {background:url('이미지 주소 복사');}
</style>
</head>
<body>
</body>
</html>
바로 이런 모습이 되겠죠?
검은 폰트에 흰 테두리를 적용한 달글의 모습!
5. bgm 삽입
다음은 더 더 간단한 bgm 넣기!
일단 사운드클라우드에 들어가서 원하는 음악을 찾아주세요!
이렇게 원하는 bgm을 선택하면 아래 share 버튼을 클릭해주세요!
여기서 반드시 'Embed'로 들어가서 코드를 복사해줍니다!
컴쭉으로 돌아와서 원하는 위치에 html 창을 켜줍니다.
(대부분 제일 위에 있는 경우가 많으니 가장 처음 html을 삽입해줍니다.)
여기서 포인트!
가로와 세로 숫자를 아래와 같이 바꿔줘요.
그래야 본문에 재생바만 예쁘게 올라간답니다!
<iframe width="6%" height="20" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/url=https%3A//api.soundcloud.com/tracks/965400691&color=%234f4f4f&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/cxcx9402" title="MK(ONF)" target="_blank" style="color: #cccccc; text-decoration: none;">MK(ONF)</a> · <a href="https://soundcloud.com/cxcx9402/mk-original-song-onf-difficult-ac-ver" title="넌 나의 뮤즈야 MK (feat.와이엇) [Original Song - ONF Difficult ac ver.]" target="_blank" style="color: #cccccc; text-decoration: none;">넌 나의 뮤즈야 MK (feat.와이엇) [Original Song - ONF Difficult ac ver.]</a></div>
이를 적용 시켜준 달글은 이런 모습!
이를 활용한 달글 본문들 입니다!
구글 폰트보다 많아진 폰트 개수와 배경의 조합은 무궁무진하다는 것!!
이렇게 세가지 방법을 알아봤습니다!
이왕 쓰는 거 욕심이 생겨서 좀 더 추가해봤습니다!👍
댓글 수보다 스크랩 수가 더 많은건.. 무언의 칭찬이겠죠..?
하지만 허탈함은 어쩔 수가 없군요😿
구에디터에서 사용하던 html도 아까 배경 넣었던 위치에 넣으면 대부분 적용 되더라구요!
정성스럽게 썼는데 제발 다들 이해하기 쉬우셨으면...! 젭알..!!🥺
스크랩할 때 댓글 하나라도..! 젭알..!!🥺
혹시나 여기는 막생이니까 알아보기 금지!
그럼 모두 Beautiful Beautiful한 하루 보내세요❣️
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:25
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:26
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:27
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:30
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:31
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:37
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:37
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:39
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:41
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:42
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.16 23:47
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.17 00:16
글 써 줘서 고마워 ㅠㅠㅠㅠ
명생이다
글써줘서 고마워요..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
개인카페로 스크랩해가!! 진짜 너무너무 고마워. 진짜 하나도 몰랐는데 달글 너무 꾸미고싶었는데 알게되어서 너무 좋아 너무 고마워!!
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.28 20:34
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.28 22:16
개인카페에서 꾸며보겠습니다! 감사합니다!
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.04.30 16:25
고마워! 갠캎으로 스크랩할게
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.05.02 14:45
정말 감사합니다!! 완전 도움 됐어요
개인카페에 스크랩해가요~ 좋은 정보 고마워요~~
갠카로 스크랩해가!! 너무 고마워!!
삭제된 댓글 입니다.
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.05.21 23:53
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.05.22 00:22
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.05.22 00:22
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.05.22 00:23
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.05.22 00:23
쌤..혹시 저 모눈종이 이미지 줄수있나요?ㅜㅜ
갠카로 스크랩 해갈게요 이런 정보를 알려주다니 당신은 천사일 거야...
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.21.08.25 18:26
나도 갠카로 스크랩..! 너무 친절해 고마워😭😭😭😭
고마워 유용하게 잘쓸게!!
진짜 대형연어지만... 진짜 큰 도움 됐어 너무 고마워 복받아~~~!!!!
비밀글 해당 댓글은 작성자와 운영자만 볼 수 있습니다.23.04.09 14:28