Tutorial/Portfolio
풀스택 도전! 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 게시판 글보기 코딩하기
개발
- 1. 기본 셋팅하기
8. 게시판 페이지 코딩하기
8.1 게시판 코딩하기
<main id="main" role="main">
<div class="container">
<section class="intro__wrap blogStyle borderBomStyle">
<h2 class="blind">웹스로퍼 블로그에 오신 것을 환영합니다.</h2>
<div class="intro__inner">
<div class="intro__img"></div>
<h2 class="intro__title">공지 사항</h2>
<div class="intro__text">
최신 웹 <em>개발 기술</em>과 <em>트렌드</em>!<br>
웹 개발에 필요한 다양한 지식을 한눈에 확인해보세요!<br>
</div>
</div>
</section>
<!-- //intro__wrap joinStyle -->
<section class="board__wrap">
<h2 class="blind">공지사항</h2>
<div class="board__inner">
<div class="board__search">
<div class="left">
* 총 <em>100</em>건의 게시물이 등록되어 있습니다.
</div>
<div class="right">
<form action="#" name="#" method="get">
<fieldset>
<legend class="blind">게시판 검색 영역</legend>
<input type="search" name="searchKeyword" id="searchKeyword"
placeholder="검색어를 입력하세요!" required>
<select name="searchOption" id="searchOption">
<option value="title">제목</option>
<option value="content">내용</option>
<option value="name">등록자</option>
</select>
<button type="submit" class="btn__style">검색</button>
</fieldset>
</form>
</div>
</div>
<!-- //board__search -->
<div class="board__table">
<table>
<colgroup>
<col style="width: 5%;">
<col style="width: 63%;">
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 7%;">
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>등록자</th>
<th>등록일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="boardView.html">회원가입 안내</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">블로그 작성 및 내용 확인 방법</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>4</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>7</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>8</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>9</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
<tr>
<td>10</td>
<td><a href="#">게시판 제목</a></td>
<td>웹쓰</td>
<td>2023-04-04</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<!-- //board__table -->
<div class="board__pages">
<ul>
<li class="first"><a href="#">처음으로</a></li>
<li class="prev"><a href="#">이전</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li class="next"><a href="#">다음</a></li>
<li class="last"><a href="#">마지막으로</a></li>
</ul>
</div>
<!-- //board__pages -->
</div>
</section>
</div>
</main>
<!-- //main -->.board__inner {
padding: 100px 0;
}
/* board__search */
.board__search {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.board__search .left em {
color: var(--red);
}
.board__search .right input {
padding: 12px 20px;
border: 0;
border-radius: 5px;
width: 270px;
font-size: 1rem;
}
.board__search .right select {
width: 100px;
padding: 11px;
border: 0;
border-radius: 5px;
color: var(--black300);
font-size: 1rem;
}
.board__search .right button {
display: inline-block;
font-size: 1rem;
padding: 0.7rem 2rem;
border-radius: 5px;
}
.board__search .right a {
display: inline-block;
background-color: var(--black);
color: var(--white);
font-size: 1rem;
padding: 0.5rem 2rem;
border-radius: 5px;
}
/* board__table */
.board__table {
margin-top: 15px;
border-top: 2px solid var(--black);
border-bottom: 1px solid var(--black);
}
.board__table th {
background-color: var(--black500);
}
.board__table td,
.board__table th {
padding: 15px 5px;
border-bottom: 1px solid var(--black300);
text-align: center;
}
.board__table tr:hover {
background-color: var(--black600);
}
/* board__pages */
.board__pages {
margin-top: 60px;
}
.board__pages ul {
display: flex;
align-items: center;
justify-content: center;
}
.board__pages li a {
display: inline-block;
border: 1px solid var(--black500);
padding: 10px 12px;
margin-left: -1px;
}
.board__pages li a:hover,
.board__pages li.active a {
background-color: var(--black);
color: var(--white);
}
8.2 게시판 글쓰기 코딩하기
<main id="main" role="main">
<div class="container">
<section class="intro__wrap blogStyle borderBomStyle">
<h2 class="blind">웹스로퍼 블로그에 오신 것을 환영합니다.</h2>
<div class="intro__inner">
<div class="intro__img"></div>
<h2 class="intro__title">공지 사항 수정하기</h2>
<div class="intro__text">
최신 웹 <em>개발 기술</em>과 <em>트렌드</em>!<br>
웹 개발에 필요한 다양한 지식을 한눈에 확인해보세요!<br>
</div>
</div>
</section>
<!-- //intro__wrap joinStyle -->
<section class="board__wrap">
<h2 class="blind">공지 사항 수정하기</h2>
<div class="board__inner">
<div class="board__write">
<form action="#" name="#" method="post">
<fieldset>
<legend class="blind">게시글 작성하기</legend>
<div>
<label for="boardTitle">제목</label>
<input type="text" id="boardTitle" name="boardTitle" class="input__style">
</div>
<div>
<label for="boardContents">내용</label>
<textarea id="boardContents" name="boardContents" rows="40"
class="input__style"></textarea>
</div>
<div class="board__btns">
<button type="submit" class="btn__style2">저장하기</button>
</div>
</fieldset>
</form>
</div>
</div>
</section>
</div>
</main>
<!-- //main -->/* board__write */
.board__write label {
width: 100%;
font-size: 1.25rem;
margin-bottom: 5px;
display: block;
}
.board__write input {
margin-bottom: 50px;
}
.board__write textarea {
resize: none;
}
.board__write .board__btn {
text-align: right;
padding-top: 10px;
}
8.3 게시판 글보기 코딩하기
<main id="main" role="main">
<div class="container">
<section class="intro__wrap blogStyle borderBomStyle">
<h2 class="blind">웹스로퍼 블로그에 오신 것을 환영합니다.</h2>
<div class="intro__inner">
<div class="intro__img"></div>
<h2 class="intro__title">공지 사항 글 보기</h2>
<div class="intro__text">
최신 웹 <em>개발 기술</em>과 <em>트렌드</em>!<br>
웹 개발에 필요한 다양한 지식을 한눈에 확인해보세요!<br>
</div>
</div>
</section>
<!-- //intro__wrap joinStyle -->
<section class="board__wrap">
<h2 class="blind">공지 사항 보기</h2>
<div class="board__inner">
<div class="board__view">
<table>
<colgroup>
<col style="width: 20%">
<col style="width: 80%">
</colgroup>
<tbody>
<tr>
<th>제목</th>
<td>프론트 앤드 개발자 취업 노하우</td>
</tr>
<tr>
<th>등록자</th>
<td>웹쓰</td>
</tr>
<tr>
<th>등록일</th>
<td>2023-10-30</td>
</tr>
<tr>
<th>조회수</th>
<td>100</td>
</tr>
<tr>
<th>내용</th>
<td>
프론트 앤드 개발자 취업 노하우
프론트엔드 개발자로 취업을 준비하는 분들에게는 다음과 같은 노하우가 도움이 될 수 있습니다.
기본기를 탄탄하게 다지기 HTML, CSS, JavaScript 등의 기본 기술을 제대로 이해하고 활용할 수 있어야 합니다.
특히 HTML과CSS는 디자인을 구현하는 핵심 기술이기 때문에 충분히 연습해보는 것이 좋습니다.
또한, 최신 기술 동향에 대한 관심과 학습도 중요합니다.
프로젝트를 경험해보기 개인 프로젝트나 오픈 소스 프로젝트에 참여하면서 프론트엔드 개발의 전반적인 경험을 쌓아보는 것이 좋습니다.
이를 통해 실제 개발 과정을 경험하고, 자신의 역량을 향상시킬 수 있습니다.
포트폴리오 작성하기 자신이 진행한 프로젝트나 작업물을 체계적으로 정리하여 포트폴리오를 작성하는 것이 좋습니다.
이를 통해 자신의 역량과 경험을 보여줄 수 있으며, 면접에서도 도움이 됩니다.
적극적인 커뮤니케이션 프론트엔드 개발자는 디자이너나 백엔드 개발자와 긴밀하게 협업해야 합니다.
따라서, 소통과 협력 능력이 중요합니다.
특히, 어려움이나 문제점을 발견했을 때 적극적으로 의견을 제시하고 해결책을 모색하는 자세가 도움이 됩니다.
지속적인 학습과 성장 프론트엔드 개발 분야는 기술의 변화가 빠르기 때문에 지속적인 학습과 성장이 필요합니다.
새로운 기술이나 프레임워크를 학습하고, 개발자
커뮤니티에 참여하여 정보를 공유하는 것도 좋은 방법입니다.
</td>
</tr>
</tbody>
</table>
</div>
<div class="board__btns">
<a href="#" class="btn__style2">수정하기</a>
<a href="#" class="btn__style2">삭제하기</a>
<a href="#" class="btn__style2">목록보기</a>
</div>
</div>
</section>
</div>
</main>
<!-- //main -->/* board__view */
.board__view {
border-top: 2px solid var(--black);
border-bottom: 2px solid var(--black);
}
.board__view table th {
background-color: var(--black500);
}
.board__view table th,
.board__view table td {
padding: 15px;
border-bottom: 1px solid var(--black400);
white-space: pre-line;
}
.board__view table tr:last-child td {
height: 500px;
vertical-align: top;
}
.board__btns {
text-align: right;
padding-top: 10px;
}
댓글