내맘대로 티스토리 스킨 4 - 검색 및 댓글 구현 추가

컴퓨터/Projects

728x90
반응형

서론 및 GitHub

역시나 오늘도.. 하기 싫은 스킨 꾸미기 왜 시작했을까 깊은 반성가 후회가 밀려옵니다.

다른 관심있는 공부 거리가 아주 많은데... 

여하튼.. 비록 용두사미가 될지언정 어느 정도 쓸만한 결과물이 나오기 전까지는 계속 진행해 봐야겠습니다.

 

지난번에 검색 구현을 하려고 하는 과정에서 누군가 댓글을 달았는데... 제 블로그에는 댓글을 달수 있는 방법이 존재하지 않았습니다?!

 

어떻게 등록했는지 모르겠지만... 필요성을 느끼고 일단 구현했습니다.

계속해서 이것저것 업로드를 하고 있는데 우선은 디테일보다는 구도를 잡아서 전체적인 뼈대를 만든 후 꾸미는 것이 좋을 것 같아서 디테일은 나중으로 미루고 중요한 부분들에 대한 구도를 확립하는 방식으로 진행하려고 합니다.

 

여러 소스코드의 변화는 아래 GitHub을 참고하세요.

 

GitHub - Gon-91/TISTORY-SKIN

Contribute to Gon-91/TISTORY-SKIN development by creating an account on GitHub.

github.com

 

 

검색창 디자인

현 스킨 기준으로 좌측 아이콘들을 중 검색아이콘을 선택하면 검색할 수 있는 UI를 디자인했습니다.

목표는 검색하는 검색바와  3가지 인기 글, 최근 글, 태그 목록을 보여주고 싶어서 구도만 설정하여 만들었습니다.

 

기존
변경

더보기

부분 HTML

<div class="lnb-search lnb-show">
            <div>
                <s_search>
                <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) {  }"/>
                <button value="검색" type="button" onclick="" class="submit" >
                    <span>
                        <img src="./images/fi-rr-search.svg" alt="">
                    </span>
                </button>
                </s_search>
            </div>
            <h2>인기 글</h2>
            <div>
                <s_rctps_popular_rep>
                      
                        <a href="">
                            <div class="search-linkwrap">
                                <div class="search-imgwrap">
                                    <s_rctps_rep_thumbnail>
                                        <img src="">
                                    </s_rctps_rep_thumbnail>
                                </div>
                                <div class="search-decwrap">
                                    <h4></h4>
                                    <p> / </p>
                                    
                                </div>
                            </div>
                        </a>

                  </s_rctps_popular_rep>
            </div>

              <h2>최근 글</h2>
              <div>
              <s_rctps_rep>

                    <a href="">
                        <div class="search-linkwrap">
                            <div class="search-imgwrap">
                                <s_rctps_rep_thumbnail>
                                    <img src="">
                                </s_rctps_rep_thumbnail>
                            </div>
                            <div class="search-decwrap">
                                <h4></h4>
                                <p> / </p>
                                
                            </div>
                        </div>
                    </a>



            </s_rctps_rep>
            </div>
              <div class="tagbox">
                <h3>태그목록</h3>
                <ul>
                  <s_random_tags>
                    <li>
                      <a href="" class=""> </a>
                    </li>
                  </s_random_tags>
                </ul>
              </div>
        </div>

 

 

더보기

부분 CSS

.lnb-search{
    margin-top: 110px;
    margin-bottom: 110px;
}
.lnb-search div:nth-child(1) input{
    margin: auto;
    margin-left: 10%;
    width: 70%;
    height: 42px;

    border: 3px solid black;

    border-radius: 10px;
    box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
    3px 3px 5px rgba(0, 0, 0, 0.1);
}
.lnb-search div:nth-child(1) button{
    margin: 5px;
    width: 50px;
    height: 52px;
    transform:translate(0,45%);
}

.lnb-search div:nth-child(1) button span img{
    width: 100%;
    height: 100%;
    border: 3px solid black;
    border-radius: 10px;
    box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
    3px 3px 5px rgba(0, 0, 0, 0.1);
}
.lnb-search .search-linkwrap{
    margin: auto;
    width: 320px;
    border: 1px solid black;
}
.lnb-search .search-imgwrap{
    width: 100px;
    height: 100px;
    display: inline-block;
}
.lnb-search .search-imgwrap img{
    width: 100%;
    height: 100%;
    
}
.lnb-search .search-decwrap{
    position:relative ;
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 100px;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 0.8rem;
}
.lnb-search .search-decwrap h4{
    margin-top: 5px;
}
.lnb-search .search-decwrap p{
    position:absolute ;

    bottom: 5px;
}

댓글 구현

갑작스럽게 필요한 댓글 UI 구현... 우선 글을 쓰고 읽을 수 있게만 하는데 중점을 두었습니다.

더보기

HTML 부분 소스코드

<s_rp>
                        <s_rp_input_form>
                        <div class="article-comment-write">
                            <div>
                                <textarea type="text" name=""></textarea>
                            </div>
                            <div>
                                <input value="쓰기" type="button" onclick="">
                            </div>
                        </div>
                        </s_rp_input_form>

                        <s_rp_container>
                        <div >
                            <s_rp_rep>
                                <div class="article-comment-main">
                                    <div class="article-comment-main-logo">
                                        <img src="">
                                    </div>
                                    <div class="article-comment-main-content">
                                        <div>
                                                        
                                        </div>
                                        <div>
                                                                
                                        </div>
                                        <div>
                                            
                                            <span><a onclick="">수정/삭제</a></span>
                                            <span><a onclick="">답글</a></span>
                                        </div>
                                    </div>

                                </div>
                                <s_rp2_container>
                                    <s_rp2_rep>
                                        <div class="article-comment-sub">
                                            <div class="article-comment-sub-logo">
                                                <img src="">
                                            </div>
                                            <div class="article-comment-sub-content">
                                                <div>
                                                                
                                                </div>
                                                <div>
                                                                        
                                                </div>
                                                <div>
                                                    
                                                    <span><a onclick="">수정/삭제</a></span>
                                                    <span><a onclick="">답글</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </s_rp2_rep>
                                </s_rp2_container>
                            </s_rp_rep>
                        </div>    
                        </s_rp_container>
                    </s_rp>

 

더보기

CSS 부분 소스코드

.article-comment-main{
    position: relative  ;
    display:flex;
    height: 150px;
    align-items: center;
    border: 1px solid black;
    overflow: hidden;
}
.article-comment-main .article-comment-main-logo{
    margin: 0 auto;

    width: 100px;
    height: 100px;
}
.article-comment-main .article-comment-main-content{
    margin: 0 auto;
    margin-left: 15px;
    width: 80%;
    height: 100px;
}
.article-comment-sub{
    margin-left: 60px;
    position: relative  ;
    display:flex;
    height: 150px;
    align-items: center;
    border: 1px solid black;
    overflow: hidden;
}
.article-comment-sub .article-comment-sub-logo{
    margin: 0 auto;
    width: 100px;
    height: 100px;
}
.article-comment-sub .article-comment-sub-content{
    margin: 0 auto;

    margin-left: 15px;
    width: 70%;
    height: 100px;
}

 

다음번 포스트 목표

다음번에는 오늘 구현한 검색 및 댓글을 아주  조금만! 보기 흉하지 않도록... 개선을 해야겠습니다.

 

그다음에 방명록란을 만드는 것을 우선 하도록 하겠습니다.

 

지난번에 계획했던 몇 가지 디테일한 부분은 우선 Pass..

  • 우측 TOC 크기 조정 및 제목 표시, 그리고 색상 변경하기
  • 좌 / 우측 사이드바 설정 및 광고란 준비하기
  • 좌측 상단에 아이콘 버튼란 개선하기

마침 글

이번에 몇 가지 부분을 급조(?)하면서 flex를 사용을 시도했습니다. 개념적으로 Grid만 쓰면 좋은 거 아닌가 했는데.. 

사용해보니.. 부분적인 구조를 만드는데 아주 쉽고 효율적이라고 느꼈습니다.

 

나중에 시간이 될 때 대충 만들었던 부분을 flex를 이용해서 조금 다듬는 노력을 할 필요가 있다고 생각합니다.

 

또... 해당 HTML & CSS를 사용하는 과정에서... class나 id명으로 제어하는 콘셉트에 대한 고민을 계속하고 있습니다..

지금 하는 방법은 너무 무식해서 어떻게 해야 되나 고민이 많이 필요하네요.

 

이상 다음 포스트에서는 조금 더 사람이 볼 수 있는 블로그 스킨이 되길 바라며 글을 마치겠습니다.

728x90
반응형

'컴퓨터 > Projects' 카테고리의 다른 글

내맘대로 티스토리 스킨 3 - Bata Ver 업로드  (1) 2022.10.31
내맘대로 티스토리 스킨 2 - 아이콘 및 상단 바 추가  (0) 2022.06.25
내맘대로 티스토리 스킨 1 - 서론 및 초기 준비  (0) 2022.06.12
C언어로 스톱워치/타이머 만들기6 - 소스코드 나누기 및 배포  (1) 2022.01.05
C언어로 스톱워치/타이머 만들기5 - 구조 다듬기(함수화2)  (0) 2022.01.03

Commnet

Popular Aricle

New Article

Tag List

C언어 Win32API 배열 독학 개인프로젝트 Selenium 버블정렬 정보처리기사 스킨만들기 스크래핑 static javascript Win32그림판 win32 css HTML windowsAPI WindowsAPI그림판 그림판 구현하기 크롤링

G91개발일지

Gon91(지구일)

91년생 공학엔지니어의 개발일지

TODAY :

YESTER DAY :

TOTAL :

티스토리툴바