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

Tutorial/Portfolio

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

by @webs 2023. 11. 01.

코딩 10

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 블로그 댓글 영역 코딩하기
• 8. 게시판 페이지 코딩하기
  • 8.1 게시판 코딩하기
  • 8.2 게시판 글쓰기 코딩하기
  • 8.3 게시판 글보기 코딩하기
• 9. 회원가입 페이지 코딩하기
  • 9.1 기본 회원가입 코딩하기
  • 9.2 회원가입 이용약관 코딩하기
  • 9.3 회원가입 정보입력 코딩하기
  • 9.4 회원가입 가입완료 코딩하기
• 10. 로그인 페이지 코딩하기
  • 10.1 로그인 코딩하기
  • 10.2 아이디 찾기 코딩하기
  • 10.3 비밀번호 찾기 코딩하기

개발

• 1. 기본 셋팅하기

10. 로그인 페이지 코딩하기

10.1 로그인 코딩하기

<main id="main" role="main">
<div class="container">
    <section class="login__wrap">
        <h2 class="blind">아이디 찾기 영역</h2>
        <div class="login__inner">
            <div class="login__title borderBomStyle">
                <h3>아이디 찾기</h3>
                <p><em>휴대폰 번호</em>와 <em>이름</em>을 작성하면 아이디를 찾을 수 있습니다.</p>
            </div>

            <div class="login__form borderBomStyle">
                <form action="#" name="#" method="post">
                    <fieldset>
                        <legend class="blind">아이디 찾기 영역</legend>
                        <div>
                            <label for="youPhone" class="required blind">휴대폰 번호</label>
                            <input type="text" id="youPhone" name="youPhone" placeholder="휴대폰 번호"
                                class="input__style" required>
                        </div>
                        <div>
                            <label for="youPass" class="required blind">비밀번호</label>
                            <input type="password" id="youPass" name="youPass" placeholder="비밀번호"
                                class="input__style" autocomplete="off" required>
                        </div>
                        <button type="submit" class="btn__style3 mt30">아이디 찾기</button>
                    </fieldset>
                </form>
            </div>

            <div class="login__footer">
                <ul class="listStyle">
                    <li>회원가입을 하지 않았다면 회원가입을 먼저 해주세요! <a href="#">회원가입</a></li>
                    <li>아이디가 기억이 나지 않는다면! <a href="#">아이디 찾기</a></li>
                    <li>비밀번호가 기억이 나지 않는다면! <a href="#">비밀번호 찾기</a></li>
                </ul>
            </div>
        </div>
    </section>
</div>
</main>
<!-- //main -->

.login__inner {
    max-width: 500px;
    width: 100%;
    padding: 100px 0;
    text-align: center;
    margin: 0 auto;
}

.login__inner h3 {
    font-size: 1.8rem;
    margin-bottom: 1.25rem;
    font-weight: 400;
    font-family: var(--gmarketFont);
}

.login__inner p {
    font-size: 1.25rem;
    margin-bottom: 3rem;
    font-weight: 300;
    word-break: keep-all;
}

.login__inner form {
    padding: 3rem 0;
}

.login__inner input {
    margin-bottom: 10px;
}

.login__footer {
    padding: 20px 0;
    text-align: left;
    color: var(--black200)
}

.login__footer a {
    text-decoration: underline;
    text-underline-position: under;
    color: var(--black200)
}

@media (max-width: 500px) {
    .login__inner {
        padding: 80px 16px;
    }
}

10.2 아이디 찾기 코딩하기

<main id="main" role="main">
<div class="container">
    <section class="login__wrap">
        <h2 class="blind">아이디 찾기 영역</h2>
        <div class="login__inner">
            <div class="login__title borderBomStyle">
                <h3>아이디 찾기</h3>
                <p><em>휴대폰 번호</em>와 <em>이름</em>을 작성하면 아이디를 찾을 수 있습니다.</p>
            </div>

            <div class="login__form borderBomStyle">
                <form action="#" name="#" method="post">
                    <fieldset>
                        <legend class="blind">아이디 찾기 영역</legend>
                        <div>
                            <label for="youPhone" class="required blind">휴대폰 번호</label>
                            <input type="text" id="youPhone" name="youPhone" placeholder="휴대폰 번호"
                                class="input__style" required>
                        </div>
                        <div>
                            <label for="youPass" class="required blind">비밀번호</label>
                            <input type="password" id="youPass" name="youPass" placeholder="비밀번호"
                                class="input__style" autocomplete="off" required>
                        </div>
                        <button type="submit" class="btn__style3 mt30">아이디 찾기</button>
                    </fieldset>
                </form>
            </div>

            <div class="login__footer">
                <ul class="listStyle">
                    <li>회원가입을 하지 않았다면 회원가입을 먼저 해주세요! <a href="#">회원가입</a></li>
                    <li>아이디가 기억이 나지 않는다면! <a href="#">아이디 찾기</a></li>
                    <li>비밀번호가 기억이 나지 않는다면! <a href="#">비밀번호 찾기</a></li>
                </ul>
            </div>
        </div>
    </section>
</div>
</main>
<!-- //main -->

10.3 비밀번호 찾기 코딩하기

<main id="main" role="main">
<div class="container">
    <section class="login__wrap">
        <h2 class="blind">비밀번호 찾기 영역</h2>
        <div class="login__inner">
            <div class="login__title borderBomStyle">
                <h3>비밀번호 찾기</h3>
                <p><em>아이디</em>와 <em>이름</em>을 작성하면 아이디를 찾을 수 있습니다.</p>
            </div>

            <div class="login__form borderBomStyle">
                <form action="#" name="#" method="post">
                    <fieldset>
                        <legend class="blind">비밀번호 찾기 영역</legend>
                        <div>
                            <label for="youID" class="required blind">아이디</label>
                            <input type="text" id="youID" name="youID" placeholder="아이디" class="input__style"
                                required>
                        </div>
                        <div>
                            <label for="youPass" class="required blind">비밀번호</label>
                            <input type="password" id="youPass" name="youPass" placeholder="비밀번호"
                                class="input__style" autocomplete="off" required>
                        </div>
                        <button type="submit" class="btn__style3 mt30">아이디 찾기</button>
                    </fieldset>
                </form>
            </div>

            <div class="login__footer">
                <ul class="listStyle">
                    <li>회원가입을 하지 않았다면 회원가입을 먼저 해주세요! <a href="#">회원가입</a></li>
                    <li>아이디가 기억이 나지 않는다면! <a href="#">아이디 찾기</a></li>
                    <li>비밀번호가 기억이 나지 않는다면! <a href="#">비밀번호 찾기</a></li>
                </ul>
            </div>
        </div>
    </section>
</div>
</main>
<!-- //main -->

---

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

예제 목록

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