스크랩 [기타자료후기] 좀 더 폼나게 본문 꾸미는 방법 6가지 (부제 : 달글 꾸미기)

[두근두근(2.4kg)]

게 - 하

나는 일단 달글을 꾸미고 만드는 달장 역할을 하는 평범한 사람이야!
그러다보니 기분 내킬 때, 특별한 날일 때, 달글에 컨셉을 주고 싶을 때 좀 더 예쁘게 꾸미고 싶어서 이것저것 알아보고 적용해보곤 했거든

그럴 때마다 어떻게 하냐고 물어보는 달글러들도 많았고 막게 이용하는 게녀들도 저런 건 어떻게 꾸미는 거냐고 물을 때도 있더라고 그래서 별거 없지만 그 방법들을 알려주려고 막생에 왔어

일단 나도 쭉빵에서 배운 것도 있고, 직접 서치하면서 배운 것도 있는데!

이런 소스코드들을 여러 개 쓰면 호환이 안되는 것도 있어서 호환이 되게 수정한 부분이 많으니까 내가 알려준 방법대로 하면 여러 개 사용도 가능해

많은 게녀들이 이 방법들을 자유롭게 사용해줬으면 좋겠어 ㅇ_<

참고로 이 방법들은 소스코드를 사용하는 거라 PC로 해야 해ㅠㅠ

생정은 처음이니까 피드백 해야 할 것이 있는 건 둥글게 말해줘,,,

이해가 안 가고 모르는 것이 있으면 물어봐줘 ♡

그리고 나는 여기선 달장 아니고 게녀니까 따로 뭐 알아보는 듯한 뉘앙스는 하지 말아 줘 닉기억 될 수 있어..

건게 무서워,,

목차

1. 배경 넣기

2. 글씨에 색 입히기

3. 글씨체 바꾸기

4. 상단바 넣기

5. 브금 넣기

-번외. 네캐 유튜브 영상 넣기

6. 사진 50장 이상, 50mb이상 올리기

위의 방법들로 꾸민 본문 예시

(말 그대로 예시일 뿐 홍보도 아니고 자랑도 아니고 내가 쓴 글이 이거밖에 없어서,, 이런식으로 꾸밀 수 있다라고 알려주는 거임)

할로윈 달글 : http://cafe.daum.net/ok1221/8hHX/35184255
기념 달글 : http://cafe.daum.net/ok1221/8hHX/35080789

---

1. 게시글에 배경 넣기

소스코드 복사구간 ↓

<div><p style="text-align: center;"><br></p>
<p style="text-align: center;">
<span style="color: rgb(93, 93, 93);font-family: Dotum, 돋움, sans-serif; font-size: 9pt;">
</span><br></p></div><p><br></p><style>
div {background-image: url('http://cfile293.uf.daum.net/image/996D264D5B6856BE1CB65B');}

- 하늘색으로 칠한 부분에 원하는 이미지/움짤 링크 넣으면 됨

- 게시글을 다 작성하고 마지막에 소스코드를 넣는 것을 추천

① 원하는 이미지 링크를 준비한다.

사진과 같이 배경에 넣고 싶은 사진/움짤을 개인 카페나 개인 달글에 올린 후 링크를 복사해둔다.

배경으로 쓸만한 이미지는 구글에 검색하면 많이 나오고 직접 그려도 됨

② 게시글을 작성한다.

③ 오른쪽 위의 HTML를 체크한다.

그럼 html이 체크가 되고 아래 사진처럼 나의 글들이 이상한 코드들로 바뀌는게 맞아요

④ 스크롤을 내려 제일 밑에 소스코드를 넣는다.

소스코드를 붙여 넣고 원하는 이미지 링크로만 바꿔주면 됩니다

⑤ HTML의 체크를 해지한다.

완성! 그리고 등록 버튼 누르면 배경이 적용이 된 상태로 글이 써져요

확인하고 싶으면 등록 전에 미리보기로 먼저 봐도 되고 그건 자유

---

2. 글씨에 색 입히기

소스코드 복사구간↓

<form name="formBGM2">
<input type="hidden" name="vol2" size="3" value="30" xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxonchange="setVolume2()">
<xmp id="template_xmp" name="template_xmp" style="display:none;"> <style type="text/css">p,br,body,table,td,input,form,textarea { color:#★; letter-spacing:-1; opacity:1; text-align:center; 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 #★; }</style><p><br></p>
<!-- --></xmp>
</form>

- 색상코드를 복붙할 때 #000000 형태를 맞춰주기 (##000000, 000000), 별만 지우고 숫자만 넣으라는 소리

- 노란색으로 칠한 부분 : 글씨 색

- 하늘색으로 칠한 부분 : 제목, 본문, 댓글창 모두 가운데 정렬 / 저 부분을 지우고 싶으면 지워도 됨

- 나머지 별 부분 : 글씨의 그림자 색 / 모두 같은 색으로 넣어주기 

① 색상 코드를 준비한다.

글씨에 원하는 색을 입히려면 필요함

네이버에 색상코드 쳐도 나오고, 사친처럼 바로 저기서 찾아도 됨

② 글을 다 쓰고 HTML에서 소스를 붙여넣는다.

앞에 배경 넣기에 자세히 설명했으니 이 부분은 간략히 설명할게요

소스를 붙여 넣고 위에서 설명한 것처럼 원하는 색상코드만 넣어주면 됩니다!

다시 html 체크 해지하고 등록하면 완성!

완성

왼쪽은 소스코드에서 하늘색 부분을 지운 거 (가운데 정렬 X)

오른쪽은 소스코드에서 하늘색 부분을 놔둔 거 (가운데 정렬 O)

차이가 보이죠? 글쓰기 내에서 왼쪽, 가운데, 오른쪽 정렬을 따로 하지 않은 부분은 전부 가운데 정렬이 됩니다

글씨 색도 마찬가지로 분홍색 하늘색으로 포인트 준 부분을 제외한 나머지는 다 색이 바뀌어요

---

3. 글씨체 바꾸기

소스코드 복사구간↓

첫 번째 소스
<style type="text/css">p,br,body,table,td,input,form,textarea {color:#★; 두 번째 CSS 소스}</style>

- 폰트 사이트 : https://fonts.google.com/?subset=korean (구글 폰트)

- 색상 코드는 지워도 됨 / 주로 배경이 어두울 때 흰색 코드를 넣기도 함

① 구글 폰트에서 원하는 폰트를 찾아 + 버튼을 누른다.

한글은 25개 밖에 없고, 영어 폰트는 되게 많음

저기서 바로 원하는 글을 쳐봐서 미리보기 가능함

@태그를 사용하면 더 많은 폰트를 사용 가능한데 내가 할줄 몰라서..

② CUSTOMIZE를 누른다.

③ CUSTOMIZE에서 한국어도 체크해준다.

여기서 한국어 체크를 안 하면 영어만 폰트 바뀌어요

④ 다시 EMBED로 와서 소스코드들을 복사한다.

⑤ 글을 다 쓰고 HTML에서 소스를 붙여 넣는다.

위에서 알려준 소스코드에 알맞게 잘 복붙하고 다시 html 체크 풀면 완성!

모바일

---

4. 상단바 넣기

소스코드 복사구간↓

<link href="/favicon.ico" rel="shortcut icon">   <link href="//i1.daumcdn.net/cafeimg/161017_mw/cafe-mw-homescreen.png" rel="apple-touch-icon-precomposed">

     <link href="//t1.daumcdn.net/cafe_cj/mobileweb/css/89/mobile_cafe.css" rel="stylesheet" type="text/css">

 <link href="//t1.daumcdn.net/cafe_cj/mobileweb/css/15/custom.css" rel="stylesheet" type="text/css"><p>&nbsp;</p><xscript>

  </xscript><div class="cafe_type3" id="daumWrap">

 <header class="fixed" id="daumHead">

  <div class="cafe_head">

  <!-- 네비게이션바 -->

    <div class="d_head #cafe_home_gnb">

   <div class="wrap_tit">

    <h1 class="tit_daum">

     <a class="tit_service link_service" id="daumServiceLogo" href="/_myCafe?t__nil_logo=cafe">

      <span class="cafe_logo"><span class="sr_only">cafe</span></span>

     </a>

    </h1>

    <h2 class="tit_cafename" style="text-align: center;"><font color="#ffffff"><span style="font-size: 10.66px;"><marquee behavior="scroll"><span style="font-size: 10pt;">하고 싶은 말</span>&nbsp;</marquee></span></font></h2></div></div></div></header></div><p><br></p>

<div><p style="text-align: center;"><br></p></div><p><br></p>

- 하늘색 부분에 색상코드

- 노란 부분에 하고 싶은 말

① 글을 다 쓰고 HTML에서 소스를 붙여 넣는다.

완성!

---

5. 브금 넣기 (사운드 클라우드)

① 원하는 노래를 찾아 Share 버튼을 누른다.

사운드 클라우드 : https://soundcloud.com/

② Embed 에 들어가서 Code를 복사한다.

재생바 색을 바꿀 때는 색을 먼저 바꾸고 코드 복사를 해야함

③ 게시글에 원하는 위치에 코드를 붙여 넣는다.

여기서 재생바만 보이게 하려면 색칠된 부분을 6 20 또는 7 20 정도로 바꿔줌

후에 크기 조정 알아서 해주기

모바일로 보면 짠!

번외. 네캐 유튜브 영상 첨부

저 소스코드들을 복사해서 붙여 넣으면 됨

---

6. 사진 50장 이상, 50mb이상 올리기

① 개인 카페나 개인 달글에 짤리지 않을 만큼 나눠서 올린다

② html에 들어가서 소스코드들을 복사한다.

③ 새로운 게시글의 html에 복사한 소스들을 넣는다.

그럼 50메가 용량 초과도 50장 이상도 올릴 수 있어요

대신 미리보기로는 안 보이니까 미리보기용으로 하나 새로 평소에 사진 올리듯이 올리면 돼요

여기서 원래 나눠서 올렸던 게시글을 지워버리면 엑박뜸!!

감사합니다,,^^

문제시 지워버리고 막게로 옮김

[푸른달스물나흘]

아 이거..글쓰기.. 안돼네ㅠㅠㅠㅠㅠ 다시 해봐야지 고마워!!

[뒤끝작렬 소인배]

고마워!!!

[영원은 없지만 영원하고 싶어]

꾸며볼개요....고마워...

[망망개떡]

꾸며볼게요 고마워요

[고래의 지평선]

아놔 여기 얼떨결에 달주된 아방방 달주들 왜케 많은건뎈ㅋㅋㅋㅋㅋㅋ귀엽구 장하다 증말 우리 달주들 모두 파이팅! 간지좍살 달글 달주가 될테야...

[노스트라김무스]

완전 꿀정보 ㅠㅠ 고마워 여시

[샤이닝해파리]

고맙읍니다

[틀니궁민남궁민]

우리달글 디져따 나 깜짝놀래게 해준다....

[참why]

선생님.. 진짜 고맙습니다.. 초보 달주 어캐할지 몰라서 손발 벌벌인데.. 바이블이네요 어디쪽 사세요? 절올립니다 🙇‍♀️

[피카츄파이리꼬부기]

고맙읍니자ㅠㅠㅠㅠ 고맙읍니다ㅠㅠㅠ

[그럴땐버거머거요]

열심히 꾸며보겠어요

[촛불셋]

감삼니다.. 예쁘게 꾸며보겠어 !!

[팽긘밥]

선생님 감사합니다............. 이따 확인해야지