Tutorial/Portfolio

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

by @webs 2023. 11. 01.

코딩 07

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 메인 공지사항, 댓글 코딩하기
7. 블로그 뷰 페이지 코딩하기
- 7.1 블로그 뷰 영역 코딩하기
- 7.2 블로그 인덱스 영역 코딩하기
- 7.3 블로그 관련글 영역 코딩하기
- 7.4 블로그 댓글 영역 코딩하기

개발

1. 기본 셋팅하기

7. 블로그 뷰 페이지 코딩하기

7.1 블로그 뷰 영역 코딩하기

블로그 글을 클릭하면 보여주는 부분을 코딩하겠습니다.

<section class="blog__view">
    <h3 class="title">2023년 웹 디자인의 미래 : 새로운 트렌드와 기술</h3>
    <div class="info">
        <span class="author">웹쓰</span>
        <span class="date">2023.10.23</span>
        <a href="#" class="modify">수정</a>
        <a href="#" class="delete">삭제</a>
    </div>
    <div class="contents">
        <img src="../assets/img/card03-02@2x.jpg" alt="새로운 트렌드와 기술">
        <p>
            안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의
            기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를
            가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고,
            활용해보는 것을 목표로 합니다. 그럼 한번 시작해볼까요? 🥳
        </p>
        <p>
            Plotting regular polygons
            A regular polygon is a polygon with all equal sides and all equal angles. An equilateral
            triangle is one, so too is a pentagon, hexagon, decagon, and any number of others that
            meet the criteria. We can use trigonometry to plot the points of a regular polygon by
            visualizing each set of coordinates as points of a triangle.
        </p>
        <p>
            안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의
            기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를
            가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고,
            활용해보는 것을 목표로 합니다. 그럼 한번 시작해볼까요? 🥳
        </p>
        <p>
            Plotting regular polygons
            A regular polygon is a polygon with all equal sides and all equal angles. An equilateral
            triangle is one, so too is a pentagon, hexagon, decagon, and any number of others that
            meet the criteria. We can use trigonometry to plot the points of a regular polygon by
            visualizing each set of coordinates as points of a triangle.
        </p>
    </div>
</section>
<!-- //blog__view -->

/* blog__view */
.blog__view {
    padding: 40px 0 200px;
}

.blog__view .title {
    font-size: 2rem;
    line-height: 1.4;
}

.blog__view .info {
    color: var(--black400);
    padding-top: 5px;
    font-size: 14px;
    border-bottom: 1px solid var(--black500);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.blog__view .info .author {
    color: var(--black100);
}

.blog__view .info .modify {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--black400);
}

.blog__view .info .delete {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--black400);
}

.blog__view .contents img {
    margin-bottom: 20px;
}

.blog__view .contents p {
    padding: 10px 0;
    color: var(--black200);
    line-height: 1.8;
}

7.2 블로그 인덱스 영역 코딩하기

블로그 페이지에서 이전 페이지 다음 페이지를 볼 수 있는 영역입니다.

<section class="blog__index">
    <h4 class="blind">이전글과 다음글 선택</h4>

    <a href="#" class="prev">
        이전글: Menu and Thumbnail S...
    </a>

    <a href="#" class="next">
        다음글 : Scroll-Based Layout ...
    </a>
</section>
<!-- //blog__index -->

/* blog__index */
.blog__index {
    border-top: 1px solid var(--black500);
    border-bottom: 1px solid var(--black500);
    padding: 30px 0;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.blog__index::before {
    content: '';
    width: 90px;
    height: 1px;
    background-color: var(--black);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
}

.blog__index::after {
    content: '';
    width: 90px;
    height: 1px;
    background-color: var(--black);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -1px;
}

.blog__index .prev {
    padding-left: 100px;
    position: relative;
}

.blog__index .prev::before {
    content: '';
    width: 8px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 9px;
    transform: rotate(-30deg);
}

.blog__index .prev::after {
    content: '';
    width: 8px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 13px;
    transform: rotate(30deg);
}

.blog__index .next {
    padding-right: 100px;
    position: relative;
}

.blog__index .next::before {
    content: '';
    width: 8px;
    height: 1px;
    background-color: #000;
    position: absolute;
    right: 0;
    top: 9px;
    transform: rotate(30deg);
}

.blog__index .next::after {
    content: '';
    width: 8px;
    height: 1px;
    background-color: #000;
    position: absolute;
    right: 0;
    top: 13px;
    transform: rotate(-30deg);
}

.blog__index a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

7.3 블로그 관련글 영역 코딩하기

블로그 페이지에서 관련된 글을 보여주는 영역입니다.

<section class="blog__relate">
    <h4>관련글</h4>
    <div class="card__inner column3">
        <div class="card">
            <figure class="card__img">
                <a href="#">
                    <img src="../assets/img/card01-10@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
                </a>
            </figure>
            <div class="card__text">
                <h3>점진적으로 강화된 WebGL 효과</h3>
            </div>
        </div>
        <div class="card">
            <figure class="card__img">
                <a href="#">
                    <img src="../assets/img/card01-09@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
                </a>
            </figure>
            <div class="card__text">
                <h3>점진적으로 강화된 WebGL 효과</h3>
            </div>
        </div>
        <div class="card">
            <figure class="card__img">
                <a href="#">
                    <img src="../assets/img/card01-08@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
                </a>
            </figure>
            <div class="card__text">
                <h3>점진적으로 강화된 WebGL 효과</h3>
            </div>
        </div>
    </div>
    </section>

/* blog__relate */
.blog__relate h4 {
    border-top: 2px solid var(--black);
    border-bottom: 1px dashed var(--black);
    text-align: center;
    padding: 10px 0;
    margin-bottom: 20px;
}

.blog__relate .card__inner .card__text h3 {
    font-size: 1rem;
    margin-top: 5px;
}

7.4 블로그 댓글 영역 코딩하기

블로그 페이지에서 관련된 댓글을 보여주는 영역입니다.

<section class="blog__comment" id="blogComment">
    <h4>관련 댓글</h4>
    <div class="comments">
        <div class="comment__view">
            <div class="avata" aria-hidden="true"></div>
            <div class="text">
                <p>이건 정말 너무 한거 아니예요!!!! </p>
                <span>
                    <span class="author">웹쓰</span>
                    <span class="date">23-10-26 17:29</span>
                    <a href="#" class="modify">수정</a>
                    <a href="#" class="delete">삭제</a>
                </span>
            </div>
        </div>

        <div class="comment__view">
            <div class="avata" aria-hidden="true"></div>
            <div class="text">
                <p>혹시 홍박사님을 아세요! 그 분 좀 만나고 싶은데! </p>
                <span>
                    <span class="author">웹쓰</span>
                    <span class="date">23-10-26 17:29</span>
                    <a href="#" class="modify">수정</a>
                    <a href="#" class="delete">삭제</a>
                </span>
            </div>
        </div>

        <div class="comment__view">
            <div class="avata" aria-hidden="true"></div>
            <div class="text">
                <p>그 분은 여기 없어요!! 다른데가서 찾으세요!</p>
                <span>
                    <span class="author">웹쓰</span>
                    <span class="date">23-10-26 17:29</span>
                    <a href="#" class="modify">수정</a>
                    <a href="#" class="delete">삭제</a>
                </span>
            </div>
        </div>

        <div class="comment__view">
            <div class="avata" aria-hidden="true"></div>
            <div class="text">
                <p>어디에 있는데요?</p>
                <span>
                    <span class="author">웹쓰</span>
                    <span class="date">23-10-26 17:29</span>
                    <a href="#" class="modify">수정</a>
                    <a href="#" class="delete">삭제</a>
                </span>
            </div>
        </div>


        <div class="comment__input">
            <form action="#">
                <fieldset>
                    <legend class="blind">댓글쓰기</legend>
                    <label for="commentName" class="blind">이름</label>
                    <input type="text" id="commentName" name="commentName" placeholder="이름"
                        required="required">
                    <label for="commentPass" class="blind">비밀번호</label>
                    <input type="password" id="commentPass" name="commentPass" placeholder="비밀번호"
                        required="required">
                    <label for="commentWrite" class="blind">댓글쓰기</label>
                    <input id="commentWrite" name="commentWrite" placeholder="댓글을 써주세요!"
                        required="required">
                    <div class="button">
                        <button type="button" id="commentWriteBtn"
                            class="btn__style2 mt10">댓글쓰기</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</section>

/* blog__comment */
.blog__comment {
    padding-bottom: 80px;
}

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

.comment__view {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 30px;
}

.comment__view.right .img {
    left: auto;
    right: 0;
    margin-right: 0;
    margin-left: 10px;
    transform: rotateY(180deg);
}

.comment__view.right .text {
    text-align: right;
}

.comment__view.right .text p {
    border-radius: 10px 0 10px 10px;
    text-align: left;
}

.comment__view .avata {
    width: 50px;
    height: 50px;
    background-image: url(../face/Concerned.svg);
    background-size: cover;
    border: 2px solid var(--black);
    border-radius: 50%;
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 0;
}

.comment__view:nth-child(even) .avata {
    left: auto;
    right: 0;
    margin-right: 0;
    margin-left: 10px;
    transform: rotateY(180deg);
}

.comment__view:nth-child(even) .text {
    text-align: right;
}

.comment__view:nth-child(even) .text p {
    border-radius: 10px 0 10px 10px;
    text-align: left;
}

.comment__view .text {
    margin-left: 60px;
    margin-right: 60px;
    width: 100%;
}

.comment__view .text>p {
    background-color: var(--black500);
    padding: 13px 20px;
    border-radius: 0 10px 10px 10px;
    display: inline-block;
}

.comment__view .text>span {
    color: var(--black400);
    font-size: 14px;
    display: block;
}

.comment__view .text>span .author {
    text-decoration: underline;
    text-underline-position: under;
    margin-top: 3px;
    display: inline-block;
}

.comment__view .text>span .modify {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--black400);
}

.comment__view .text>span .modify:hover {
    color: var(--black);
}

.comment__view .text>span .delete {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--black400);
}

.comment__view .text>span .delete:hover {
    color: var(--black);
}

.comment__view:nth-child(2) .avata {
    background-image: url(../face/Awe.svg);
}

.comment__view:nth-child(3) .avata {
    background-image: url(../face/Blank.svg);
}

.comment__view:nth-child(4) .avata {
    background-image: url(../face/Cyclops.svg);
}

.comment__view:nth-child(5) .avata {
    background-image: url(../face/Hectic.svg);
}

.comment__view:nth-child(6) .avata {
    background-image: url(../face/Old.svg);
}

.comment__view:nth-child(7) .avata {
    background-image: url(../face/Rage.svg);
}

.comment__view:last-child {
    border-bottom: 3px solid #000;
}

.comment__input {
    border-top: 1px dashed var(--black);
    margin-top: 60px;
}

.comment__input fieldset {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
}

.comment__input form {
    width: 100%;
}

.comment__input #commentPass {
    width: 49.5%;
    border-bottom: 1px solid var(--black400);
}

.comment__input #commentName {
    width: 49.5%;
    border-bottom: 1px solid var(--black400);
}

.comment__input #commentWrite {
    width: 100%;
    margin-top: 10px;
    border-bottom: 1px solid var(--black400);
}

.comment__input input {
    font-size: 1rem;
    background-color: var(--white300);
    border: 0;
    padding: 0.8rem;
    width: calc(100% - 50px);
}

.comment__input .button {
    width: 100%;
    text-align: right;
}

.comment__input .button button {
    background-color: var(--black);
    cursor: pointer;
    color: var(--white);
    font-size: 1rem;
    padding: 15px 40px;
}

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

예제 목록

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

WEBSTORYBOY

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

[12. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 블로그 뷰 페이지 코딩하기

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

소개

인덱스

디자인

코딩

개발

7. 블로그 뷰 페이지 코딩하기

7.1 블로그 뷰 영역 코딩하기

7.2 블로그 인덱스 영역 코딩하기

7.3 블로그 관련글 영역 코딩하기

7.4 블로그 댓글 영역 코딩하기

예제 목록

댓글

티스토리툴바

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

[12. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 블로그 뷰 페이지 코딩하기

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

소개

인덱스

디자인

코딩

개발

7. 블로그 뷰 페이지 코딩하기

7.1 블로그 뷰 영역 코딩하기

7.2 블로그 인덱스 영역 코딩하기

7.3 블로그 관련글 영역 코딩하기

7.4 블로그 댓글 영역 코딩하기

예제 목록

관련글

댓글

티스토리툴바

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