[CSS] 다음카페 게시글 본문 꾸미기

1. 화면 좌우로 움직이기

<style>
  div { 
    position: relative; 
    -webkit-animation: pikamove 0.1s infinite; 
    -webkit-animation-iteration-count: 9999; 
    animation: pikamove 3s; 
    animation-iteration-count: 9999; 
  } 
  
  @-webkit-keyframes pikamove { 
    00% {top: 0; left: 0;} 
    30% {top: 0; left: 25px;} 
    60% {top: 0; left: -25px;} 
    100% {top: 0; left: 0;} 
  }
</style>

PC (O)

Mobile (O)

 

 

 

 

 

 

 

2. 댓글 닉네임 앞뒤로 문구 추가

<style>
  #mArticle li span:first-child:before {
    content: "닉네임 앞 <";
  }
  
  #mArticle li span:first-child:after {
    content: "> 닉네임 뒤";
  }
</style>

PC (X)

Mobile (O)

 

 

 

 

 

 

 

3. 전체 배경 이미지 삽입

// 해당 HTML 삽입 하단의 게시글은 노출되지 않으므로
// 모든 게시글을 작성 후 최하단에 HTML 삽입할 것.

<style>
  div {
    background-image: url('https://t1.daumcdn.net/cfile/blog/112294084962FB8C8E');
  }
</style>

PC (O)

Mobile (O)

 

 

 

 

 

 

 

4. 전체 단색 배경 삽입

// background의 rgb에 같은 색상 넣으면 단색.
// 다른 색상 넣을 경우 그라데이션 적용.

<style>
  div {
    margin:0 auto; 
    background: linear-gradient(
      to right, rgb(200, 213, 245), rgb(200, 213, 245)
    ); float:center;
  }
  
  p {
    background-color: transparent;
  }
  
  img {
    border: 0;
  }
</style>

PC (O)

Mobile (O)

 

 

 

 

 

 

 

5. 게시글 제목에 이미지 삽입

// 게시글 제목 길이 + 폰트 크기에 따라서 이미지 크기 변경.
// font-size 값 직접 변경해가며 적당한 값 찾아야 함.

<style>
  h3 {
    background:url('https://cdn.notefolio.net/covers/209080_t3.jpg') no-repeat center;
    background-size: contain;
    font-size: 50pt !important;
    color: rgba(0, 0, 0, 0);
  }
</style>

PC (X)

Mobile (O)

 

 

 

 

 

 

 

6. 본문 및 댓글 글자색 바꾸기

// 최초 ★은 글자 색. 나머지 ★은 그림자 색(나머지 색 통일).
// 전부 적용 해줘야 본문 및 댓글까지 색깔 전부 바뀜.
// text-align center 적용 시 본문 및 댓글 가운데 정렬.
// 필요 없으면 삭제해도 무방.

<style type="text/css">
  p,br,body,table,td,input,form,textarea {
    color: #★; 
    letter-spacing:-1; 
    opacity:1; 
    text-align:center;
    text-shadow: -1px 0px 20px #★, 
      0 1px #★,
      0 -1px #★,
      1px 0 #★, 
      -1px 0 #★
  }
</style>

PC (O)

Mobile (O)

 

 

 

 

 

 

 

7. 상단바 추가

<link href="//t1.daumcdn.net/cafe_cj/mobileweb/css/89/mobile_cafe.css" rel="stylesheet" type="text/css">
<div class="cafe_type3" id="daumWrap">
  <header class="fixed" id="daumHead">
    <div class="d_head #cafe_home_gnb">
      <h2 style="text-align: center;">
        <font color="#EAEAEA">
          <span style="font-size: 15px;">
            <marquee behavior="scroll">
              <span style="font-size: 15pt;" padding-top:3px;>상단바에 쓸 말</span>
            </marquee>
          </span>
        </font>
      </h2>
    </div>
  </header>
 </div>

PC (O)

Mobile (O)

 

 

 

 

 

 

 

8. 게시글 본문에만 배경 적용 (2024.02.15)

// 첫 줄의 경우 모바일만 적용.
// 둘째 줄은 PC만 적용.

<style>
    #mArticle > div:nth-child(2) {background: black;}
    .tx-content-container {background: black;}
</style>