본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

SITE 제작

내.디.코 : 티스토리 스킨 만들어보기_01

by C0Di 2022. 9. 12.
728x90

'내'가 '디'자인 해보고 '코'딩하기

요번에 한거는 숙제는 아닌데 선생님이 저번주쯤인가 PHP로 블로그를 만들어보신다고 하셨었는데 다들 기억나시나요?
그때 저한테 디자인 해보라고 말씀해주셔서 바로 그날 학원 끝나고 두개정도 만들어두었는데

무언가.... 조별작업도 그렇고 다른 배울것들도 많아서 왠지모르게 그대로 스윽 묻히게 될거같더라구요
그래서 차마 만들어둔건 못버리겠어서 눈물 똑똑 흘려가며 기록으로나마 남기려고 제가 직접 만들어보기 시작했어요🥲
이번것은 그 두개 중 첫번째 입니다!

피그마를 통해 레이아웃 잡아보기

디지-탈 느낌 조금 감도는 느낌으로 구상해봤는데 너무 강했으려나.. 뭐 아무렴 어떻습니까 ^^b
뭔가 블로그라고 해서 꼭 블로그하면 떠오르는 모습들로 가기보다는 조금은 다르게 가고싶어서 이렇게 했던건데
막상 하고 보니까 언제 끝낼까 라는 생각도 들었네요 만들때 조금 더 덜어둘껄 그랬나 하는 생각이 들었어요 😬ㅋㅋㅋㅋㅋ

컨셉설명

HTML : HEADER

헤더 부분은 [ 제목 ] 과 [ 메뉴 및 프로필 사진 ] 이렇게 두 덩어리로 나눠 flex로 가로 정렬 후 space-between으로 양쪽 끝에 붙여 두었으며,
스크립트로 스크롤을 내릴 시 프로필 사진과 헤더 부분의 사이즈를 조정하는 클래스를 붙이도록 설정했습니다.

<header id="header">
    <div class="header_divider">
        <div>
            <span>
                <!-- 추가 수정 -->
                <a href="/" class="numbertwo">TODAY CODING CODi</a>
            </span>
            <span>
                <a href="/" class="numberone"></CODi></a>
            </span>
        </div>
    </div>

    <div class="util">
        <div>
            <!--이 부분은 티스토리 치환자 입니다.-->
            <ul class="tt_category">
                <li class="">
                    <a class="link_tit" href="/category">
                        분류 전체보기
                        <img src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114/blogs/image/category/new_ico_5.gif?_version_=tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114"
                            alt="N" style="vertical-align:middle;padding-left:2px;">
                    </a>

                    <ul class="category_list">
                        <li class="">
                            <a class="link_item" href="/category/MAIN">
                                MAIN
                                <img src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114/blogs/image/category/new_ico_5.gif?_version_=tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114"
                                    alt="N" style="vertical-align:middle;padding-left:2px;">
                            </a>


                        </li>
                        <li class="">
                            <a class="link_item" href="/category/STUDY">
                                STUDY
                                <img src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114/blogs/image/category/new_ico_5.gif?_version_=tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114"
                                    alt="N" style="vertical-align:middle;padding-left:2px;">
                            </a>


                        </li>
                        <li class="">
                            <a class="link_item" href="/category/PORTFOLIO">
                                PORTFOLIO
                                <img src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114/blogs/image/category/new_ico_5.gif?_version_=tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114"
                                    alt="N" style="vertical-align:middle;padding-left:2px;">
                            </a>


                        </li>
                        <li class="">
                            <a class="link_item" href="/category/APPLICATIONS">
                                APPLICATIONS
                                <img src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114/blogs/image/category/new_ico_5.gif?_version_=tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114"
                                    alt="N" style="vertical-align:middle;padding-left:2px;">
                            </a>


                        </li>
                        <li class="">
                            <a class="link_item" href="/category/ABOUT_ME">
                                ABOUT_ME
                                <img src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114/blogs/image/category/new_ico_5.gif?_version_=tistory-cd415d6e47146dfa13c383527a5e8d7fcc0d6114"
                                    alt="N" style="vertical-align:middle;padding-left:2px;">
                            </a>
                        </li>

                    </ul>
                </li>
            </ul>
            <!--이 부분은 티스토리 치환자 끝 부분 입니다.-->
        </div>
        <div class="profile">
            <button type="button"><img
                    src="https://tistory1.daumcdn.net/tistory/5622939/attach/d2365d221dfc47fca722aff55031f863"
                    alt="블로그 이미지"></button>
            <nav>
                <ul>
                    <li><a href="https://web-codi.tistory.com/manage">관리</a></li>
                    <li><a href="https://web-codi.tistory.com/manage/entry/post ">글쓰기</a></li>
                    <li class="login" style="display: none;"><a href="#">로그인</a></li>
                    <li class="logout"><a href="#">로그아웃</a></li>
                </ul>
            </nav>
        </div>
        <button type="button" class="menu"><span>메뉴</span></button>
    </div>
    <!-- progress-bar 영역 Start -->
    <div class="progress-box">
        <div class="progress-container">
            <div class="progress-bar" id="indicator">
                <p class="test_gage"></p>
            </div>
            <!--<a href="#" class="page-top">TOP</a>-->
        </div>
    </div>
    <!-- progress-bar 영역 End -->
</header>

HTML : 자기소개

첫번째 자기 소개 부분의 사진은 최대한 불필요한 수정작업이 필요하지 않도록 [티스토리 치환자]를 통해 프로필 사진을 그대로 가져와 사용하도록 했습니다.
대신 두번째 사진은 그냥 깃허브를 통해 넣었습니다. 둘 모두 absolute를 통해 기호에 맞게 위치를 조정해주시면 됩니다

<div class="all__main__cont">
    <div>
        <p style="font-size: 100px" class="main__total">HELLO!</p>
        <p style="font-size: 19px" class="main__total">
        어떤 일이라도 노력하고 즐기면<br>
        그 결과는 빛을 바란다고 생각합니다.<br><br>
        신입의 열정과 도전정신을 깊숙히 새기며<br>
        배움에 있어 겸손함을 유지하며 세부적인 곳까지 파고드는<br>
        개발자가 되겠습니다.
        </p>
        <div class="more_desc_btn">
        자세히 보기
        </div>
        
    </div>
    <div style="position: relative">
        <div class="main__profile"><img src="https://tistory1.daumcdn.net/tistory/5622939/attach/d2365d221dfc47fca722aff55031f863" alt="블로그 이미지"></div>
        <img class="main__sub_image" src="https://raw.githubusercontent.com/kimsangjunv1/coding/main/assets/img/screenshot_6.png" alt="">
    </div>
</div>

HTML : 최근 내 소식

1. 간단하게 카드 느낌을 주기위해 ::after로 카드 상단에 구멍을 내주었어요.
2. 좌우로 스크롤 하기 위해서 post-header 클래스 양쪽에 ::before, ::after로 그라데이션을 넣어 스크롤 해서 보여지는 부분을 넘어가면 자연스럽게 사라지는듯한 느낌을 주었어요! 3. 사진위에 그냥 글씨를 넣으면 안보이기 때문에 그라데이션을 넣어두었습니다~ 

<div class="all__main__cont">
    <div>
        <p style="font-size: 100px" class="main__total">HELLO!</p>
        <p style="font-size: 19px" class="main__total">
        어떤 일이라도 노력하고 즐기면<br>
        그 결과는 빛을 바란다고 생각합니다.<br><br>
        신입의 열정과 도전정신을 깊숙히 새기며<br>
        배움에 있어 겸손함을 유지하며 세부적인 곳까지 파고드는<br>
        개발자가 되겠습니다.
        </p>
        <div class="more_desc_btn">
        자세히 보기
        </div>
        
    </div>
    <div style="position: relative">
        <div class="main__profile"><img src="https://tistory1.daumcdn.net/tistory/5622939/attach/d2365d221dfc47fca722aff55031f863" alt="블로그 이미지"></div>
        <img class="main__sub_image" src="https://raw.githubusercontent.com/kimsangjunv1/coding/main/assets/img/screenshot_6.png" alt="">
    </div>
</div>

JQUERY : 최근 내 소식

$.ajax({
    url: "https://api.rss2json.com/v1/api.json?rss_url=https://web-codi.tistory.com/rss",
    dataType: "json",
    success: function(data) {
        for (var i = 0; i < 10; i++) {
            let articleData = `
                <article>
                     <a href="${data.items[i].link}" target="_blank" class="link-article">
                         <div class="text_container">
                             <span class="author">${data.items[i].author}</span>
                             <span class="title">${data.items[i].title}</span>
                             <span class="desc">${data.items[i].pubDate}</span>
                         </div>
                         <div class="gradient_bg"></div>	
                         <img src="${data.items[i].thumbnail}" alt="" />
                     </a>
                 </article>
            `;
            $("#recent_data").append(articleData);
        }
    }
});

HTML : 해시태그

1. 해시태그는 치환자가 여러가지 있었는데 aside에 붙어있는 hashtag 치환자를 가져와 사용하시면 생각보다 쉽게 들어가더라구요~~ 

<div class="hashtag">
    <h2>#HASH_TAGS</h2>
    <s_sidebar_element>
        <!-- 해시태그 치환자 -->
        <!-- 해시태그 치환자 끝 -->
    </s_sidebar_element>
    <p class="tags_counting_star">1</p>
</div>

HTML : 해시태그

하단에 붙여놓은 검색창은 헤더에 붙어있는 티스토리 치환자를 쓰면 제대로 작동을 안하더라구요,,
그래서 검사를 했을때 나오던 치환자 결과값 그대로 html에 붙여 사용하였습니다~~! 

<div class="search">
    <input type="text" class="article_search_field" placeholder="무엇이든 검색해보세요." name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" id="article_search">
    <button type="submit" class="article_search_submit" value="검색" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){}">검색</button>
</div>

HTML : 갤러리

1. thum 클래스에 마우스를 가져다 대면 2. 숨겨두었던 ".gradient_two_bg" 클래스를 불러옵니다. 3. .thum 클래스에 ::after 요소를 사용해 Go! 글자를 띄워주었습니다. 

<div class="post-item">
    <a href="/15">
        <span class="thum">
            <span class="title">여기 한국 맞죠...? k-간판 있는거 보면..</span>
            <span class="excerpt">실상은 그냥 골목길</span>
            <div class="gradient_two_bg"></div>
            
                <img src="//i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/cggG94/btrLOm4ugNq/kLy1Vkknkrzjcy5evyBbKK/img.png" alt=""><!--수정2-->
            
        </span>
    <span class="meta">
            <span class="date">2022. 9. 11.</span>
        </span>
    </a>
</div>

완성 후기

저는 이거 두시간 생각하고 했던건데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ,,,,,,,, 이렇게 까지 길줄은 몰랐어요
아마 다른분들이 하셨으면 금방 끝났겠죠? 티스토리 치환자 충돌나는거 신경쓰면서 처음부터 다 엎다보니까 자꾸만 헤매이게 되었네요
디자인할때 구현할거까지 감안해서 덜어냈기 때문에 지금 끝났지만 그래도 구현은 가능할까 생각했던 부분들이 몇몇부분 있었는데 조금 빼고는 왠만하면 다 구현되어서 뿌듯했던 작업이였습니다 (๑′ᴗ‵๑)

* CSS 부분은 제가 수정해놓은게 너무 많아서 적어두지 않고 하단의 페이지 보기로 가셔서 확인해보시면 될거같아요!

페이지 보기
컨셉설명
728x90
반응형

'SITE 제작' 카테고리의 다른 글

사이트 유형 종합_02 : 버그 픽스와 함께 사이트 유형 종합의 완성도를 UP!  (10) 2022.09.15
사이트 유형 종합해보기!  (4) 2022.09.14
패럴렉스 효과_03 : TOP 버튼과 네비 메뉴를 스크롤에 따라 변화시켜보자!  (10) 2022.09.11
스크롤시 패럴렉스 효과의 2번째 예시를 구현해보자!  (9) 2022.09.08
배너 유형 01 한번 만들어 봅시다!  (7) 2022.09.05

관련글

댓글

#HASH_TAGS

-

1

숙제가 다양해서 너무 좋아요 ImageSlideEffect 선택해주세요 scroll-snap-align JQuery 오늘 조업 마감했습니다. scroll-snap-type 오징어 1Kg 당 3000원 필터선택자 Method 제이쿼리 오늘도 웹표준은.. 코드 내일은 즐거운 월요일 테스트테스트 코딩 울적하니 꽃을 달아봤습니다 메서드 HTML 오늘은 내가바로 오징어! 공부 오징어 두마리 포획 완료 테스트 슬라이드 결과 : 월요일 다크모드 멈추지 않는 ' j ' 시리-즈 이건 또 뭐람 화사한가요? 오징어 한마리 수확 완료!

티스토리툴바