Tutorial/Portfolio

풀스택 도전! PHP로 나만의 블로그 만들기

by @webs 2023. 11. 01.

코딩 06

PHP로 나만의 블로그 만들기 : 사이드 영역 코딩하기

난이도 중간

소스 다운로드

인덱스 보기 코드 보기 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시판 및 로그인을 구현함으로써 웹사이트의 활용성을 높일 수 있습니다.

인덱스

디자인

1. 메인 디자인
- 1.1 카드 유형 디자인
2. 블로그 디자인
- 2.1 블로그 메인
- 2.2 블로그 카테고리 영역
- 2.3 블로그 뷰 영역
3. 게시판 디자인
- 3.1 게시판 메인
- 3.2 게시판 글쓰기
- 3.3 게시판 수정하기
- 3.4 게시판 보기
- 3.5 게시판 검색
4. 로그인 디자인
- 4.1 로그인
- 4.2 아이디 찾기
- 4.3 비밀번호 찾기
5. 회원가입 디자인
- 5.1 이용 약관
- 5.2 정보 입력
- 5.3 가입 완료

코딩

1. 기본 셋팅하기
- 1.1 vscode 셋팅하기
- 1.2. 호스팅 셋팅하기
- 1.3. 파일질라 셋팅하기
- 1.4. ftp-simple 셋팅하기
2. CSS 셋팅하기
- 2.1 style.css 만들기
- 2.2 fonts.css 만들기
- 2.3 vars.css 만들기
- 2.4 resets.css 만들기
- 2.5 commons.css 만들기
3. 기본 섹션 코딩하기
- 3.1 기본 레이아웃 잡기
- 3.2 헤더 영역 코딩하기
- 3.3 푸터 영역 코딩하기
4. 인트로 유형 코딩하기
- 4.1 메인 인트로 코딩하기
- 4.2 블로그 인트로 코딩하기
- 4.3 회원가입 인트로 코딩하기
5. 카드 유형 코딩하기
- 5.1 메인 카드 유형1 코딩하기
- 5.2 메인 카드 유형2 코딩하기
- 5.3 메인 카드 유형3 코딩하기
- 5.4 블로그 카드 유형1 코딩하기
- 5.5 블로그 카드 유형2 코딩하기
- 5.6 블로그 카드 유형3 코딩하기
- 5.7 카드 유형 반응형 코딩하기
6. 사이드 영역 코딩하기
- 6.1 인트로 영역 코딩하기
- 6.2 카테고리 코딩하기
- 6.3 인기 포스트 코딩하기
- 6.4 최신 댓글 코딩하기
- 6.5 게시판 코딩하기
- 6.6 메인 공지사항, 댓글 코딩하기

개발

1. 기본 셋팅하기

6. 사이드 영역 코딩하기

6.1 인트로 영역 코딩하기

사이드 메뉴가 있는 블러그 페이지 사이트 콘텐츠를 설정하겠습니다. 여기에는 소개, 카테고리, 인기포트스, 최신 댓글, 공지사항이 들어가는 영역입니다.

<article class="aside__intro">
    <div class="aside__img" aria-hidden="true"></div>
    <div class="aside__text">
        어떤 일이라도 노력하고<br>즐기면 그 결과는 빛을 바란다고 생각합니다.
    </div>
</article>
<!-- //aside__intro -->

/* aside__intro */
.aside__intro {
    margin-bottom: 50px;
}

.aside__intro .aside__img {
    background-image: url(../img/intro01@2x.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
}

.aside__intro .aside__text {
    padding: 15px;
    text-align: center;
    word-break: keep-all;
}

6.2 카테고리 코딩하기

<article class="aside__cate category">
    <h3>카테고리</h3>
    <ul>
        <li><a href="#">모든 글</a><span>New</span></li>
        <li><a href="#">최신 기술 동향</a></li>
        <li><a href="#">코딩 팁</a></li>
        <li><a href="#">문제 해결 방법</a></li>
        <li><a href="#">공지 사항</a></li>
    </ul>
</article>
<!-- aside__cate/category -->

/* aside__cate/category */
.aside__cate {
    padding: 20px;
}

.aside__cate h3 {
    border-top: 2px solid var(--black);
    border-bottom: 1px dashed var(--black);
    text-align: center;
    padding: 10px 0;
}

.aside__cate ul {
    padding: 20px 0;
}

.aside__cate ul li {
    padding-bottom: 10px;
}

.aside__cate.category li {
    padding-left: 13px;
    position: relative;
}

.aside__cate.category li span {
    background-color: var(--red);
    font-size: 10px;
    margin-left: 10px;
    color: var(--white);
    border-radius: 10px;
    padding: 1px 6px;
    vertical-align: 4px;
}

.aside__cate.category li::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: var(--black);
    position: absolute;
    left: 0;
    top: 4px;
}

.aside__cate.category li a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

6.3 인기 포스트 코딩하기

<article class="aside__cate popular">
<h3>인기 포스트</h3>
<ul>
    <li>
        <a href="#">
            <span class="ir">01</span>
            <em>점진적으로 강화된 WebGL 효과</em>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ir">02</span>
            <em>전체 화면 이미지 슬라이드쇼 애니메이션</em>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ir">03</span>
            <em>THREE.JS를 이용한 배겨 이미지 특수효과 처리 방법</em>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ir">04</span>
            <em>연속적인 그리드 레이아웃 애니메이션</em>
        </a>
    </li>
</ul>
</article>
<!-- aside__cate/popular -->

/* aside__cate/popular */
.aside__cate.popular li {
    margin-bottom: 5px;
}

.aside__cate.popular li a {
    display: block;
    position: relative;
}

.aside__cate.popular li a:hover {
    text-decoration: underline;
}

.aside__cate.popular li a span {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 1px;
    display: block;
    background-size: cover;
    background-position: center;
}

.aside__cate.popular li a em {
    padding-left: 60px;
    width: 100%;
    height: 50px;
    display: inline-block;
    font-size: 14px;
    padding-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.aside__cate.popular li a em:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.aside__cate.popular li:nth-child(1) a span {
    background-image: url(../img/card01-01.jpg);
}

.aside__cate.popular li:nth-child(2) a span {
    background-image: url(../img/card02-02.jpg);
}

.aside__cate.popular li:nth-child(3) a span {
    background-image: url(../img/card03-03.jpg);
}

.aside__cate.popular li:nth-child(4) a span {
    background-image: url(../img/card01-04.jpg);
}

6.4 최신 댓글 코딩하기

<article class="aside__cate comment">
<h3>최신 댓글</h3>
<ul>
    <li>
        <a href="blogView.php?blogId=13#blogComment" class="ment">
            <em>정말 멋있네요!! 멋있네요!! 멋있네요!! 멋있네요!! 멋있네요!!</em>
            <div class="info">
                <strong>존남</strong>
                <span>2023-10-30</span>
            </div>
        </a>
    </li>
    <li>
        <a href="blogView.php?blogId=13#blogComment" class="ment">
            <em>이런거 저도 작성하고 싶어요!! 어디서 구하나요</em>
            <div class="info">
                <strong>xdf</strong>
                <span>2023-10-30</span>
            </div>
        </a>
    </li>
    <li>
        <a href="blogView.php?blogId=13#blogComment" class="ment">
            <em>이 정보 너무 좋아요! 줘도 가져갈께요!</em>
            <div class="info">
                <strong>맛있다</strong>
                <span>2023-10-30</span>
            </div>
        </a>
    </li>
    <li>
        <a href="blogView.php?blogId=13#blogComment" class="ment">
            <em>그렇게 믿어봐봐 나도 할 수 있지롱!</em>
            <div class="info">
                <strong>수제비</strong>
                <span>2023-10-30</span>
            </div>
        </a>
    </li>
</ul>
</article>
<!-- aside__cate/comment -->

/* aside__cate/comment */
.aside__cate.comment li {
    margin-bottom: 5px;
    margin-right: 5px;
    display: flex;
}

.aside__cate.comment li .ment {
    width: 100%;
    padding-left: 38px;
}

.aside__cate.comment li .ment em {
    width: 100%;
    display: block;
    background-color: var(--black500);
    border-radius: 0 10px 10px 10px;
    padding: 5px 10px 5px 10px;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: all 0.2s;
}

.aside__cate.comment li .ment em:hover {
    background-color: var(--black400);
    color: #fff;
}

.aside__cate.comment li .ment .info {
    color: var(--black400);
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    padding-top: 3px;
}

.aside__cate.comment li .ment .info strong {
    font-weight: normal;
}

.aside__cate.comment li .face {
    width: 100%;
}

.aside__cate.comment li {
    position: relative;
}

.aside__cate.comment li::before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 5px;
    background-image: url(../face/Calm.svg);
    background-size: cover;
    border: 1px solid var(--black);
    position: absolute;
    left: 0;
    top: 1px;
}

.aside__cate.comment li:nth-child(1)::before {
    background-image: url(../face/Calm.svg);
}

.aside__cate.comment li:nth-child(2)::before {
    background-image: url(../face/Cute.svg);
}

.aside__cate.comment li:nth-child(3)::before {
    background-image: url(../face/Cyclops.svg);
}

.aside__cate.comment li:nth-child(4)::before {
    background-image: url(../face/Fear.svg);
}

6.5 게시판 코딩하기

<article class="aside__cate notice">
    <h3>공지사항</h3>
    <ul>
        <li>
            <a href="#">스터디 공지사항입니다.</a>
            <span>2023-10-30</span>
        </li>
        <li>
            <a href="#">업데이트 공지사항입니다.</a>
            <span>2023-10-30</span>
        </li>
        <li>
            <a href="#">면접전 체크리스트입니다.</a>
            <span>2023-10-30</span>
        </li>
    </ul>
</article>
<!-- aside__cate/notice -->

/* aside__cate/notice */
.aside__cate.notice li {
    padding-left: 17px;
    position: relative;
}

.aside__cate.notice li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--black400);
    position: absolute;
    left: 0;
    top: 9px;
}

.aside__cate.notice li a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

.aside__cate.notice li span {
    font-size: 0.8rem;
    color: var(--black400);
    padding-left: 10px;
}

6.6 메인 공지사항, 댓글 코딩하기

메인 페이지에도 사이트 영역과 동일하게 들어갑니다. 코드는 그대로 재사용해도 됩니다.

<section class="main__info">
<div class="left">
    <article class="aside__cate notice">
        <h3>공지사항</h3>
        <ul>
            <li>
                <a href="#">게시판 공지사항입니다. 참고해주세요!.</a>
                <span>2023-12-30</span>
            </li>
            <li>
                <a href="#">이번주에 스터디 모임 장소는 강남 스벅입니다.</a>
                <span>2023-12-24</span>
            </li>
            <li>
                <a href="#">이번 기수 취업 정말 축하합니다.</a>
                <span>2023-12-20</span>
            </li>
            <li>
                <a href="#">10월 웹쓰 스터디 인원 모집합니다.</a>
                <span>2023-12-11</span>
            </li>
            <li>
                <a href="#">이번주 강의는 한주 쉽니다.</a>
                <span>2023-12-10</span>
            </li>
            <li>
                <a href="#">포트폴리오 사이트 만들기 강의 오픈 합니다.</a>
                <span>2023-11-30</span>
            </li>
            <li>
                <a href="#">유튜브 동영상 오픈 및 인프런 강의 오픈합니다.</a>
                <span>2023-11-30</span>
            </li>
            <li>
                <a href="#">이번 년도 기수 포트폴리오 리스트입니다.</a>
                <span>2023-10-01</span>
            </li>
        </ul>
    </article>
</div>
<div class="right">
    <article class="aside__cate comment">
        <h3>최신 댓글</h3>
        <ul>
            <li>
                <a href="#" class="ment">
                    <em>정말 멋있네요!! 멋있네요!! 멋있네요!! 멋있네요!! 멋있네요!!</em>
                    <div class="info">
                        <strong>존남</strong>
                        <span>2023-10-30</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="ment">
                    <em>이런거 저도 작성하고 싶어요!! 어디서 구하나요</em>
                    <div class="info">
                        <strong>xdf</strong>
                        <span>2023-10-30</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="ment">
                    <em>이 정보 너무 좋아요! 줘도 가져갈께요!</em>
                    <div class="info">
                        <strong>맛있다</strong>
                        <span>2023-10-30</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="ment">
                    <em>그렇게 믿어봐봐 나도 할 수 있지롱!</em>
                    <div class="info">
                        <strong>수제비</strong>
                        <span>2023-10-30</span>
                    </div>
                </a>
            </li>
        </ul>
    </article>
</div>
</section>

/* main__info */
.main__info {
    display: flex;
    padding: 80px 0 0;
    justify-content: space-between;
}

.main__info .aside__cate {
    padding: 0;
}

.main__info .left {
    width: 49%;
    border-bottom: 1px dashed var(--black);
}

.main__info .right {
    width: 49%;
    border-bottom: 1px dashed var(--black);
}

완성 화면 소스 보기 영상 보기

예제 목록

1. PHP로 나만의 블로그 만들기

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

[11. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 사이드 영역 코딩하기

풀스택 도전! PHP로 나만의 블로그 만들기

소개

인덱스

디자인

코딩

개발

6. 사이드 영역 코딩하기

6.1 인트로 영역 코딩하기

6.2 카테고리 코딩하기

6.3 인기 포스트 코딩하기

6.4 최신 댓글 코딩하기

6.5 게시판 코딩하기

6.6 메인 공지사항, 댓글 코딩하기

예제 목록

댓글

티스토리툴바

재능은!노력 끝에서 발견된다

[11. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 사이드 영역 코딩하기

풀스택 도전! PHP로 나만의 블로그 만들기

소개

인덱스

디자인

코딩

개발

6. 사이드 영역 코딩하기

6.1 인트로 영역 코딩하기

6.2 카테고리 코딩하기

6.3 인기 포스트 코딩하기

6.4 최신 댓글 코딩하기

6.5 게시판 코딩하기

6.6 메인 공지사항, 댓글 코딩하기

예제 목록

관련글

댓글

티스토리툴바

재능은!
노력 끝에서 발견된다