풀스택 도전! 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 회원가입 인트로 코딩하기
개발
- 1. 기본 셋팅하기
4. 인트로 유형 코딩하기
4.1 메인 인트로 코딩하기
이번에는 메인 페이지 인트로 영역을 코딩하겠습니다. 인트로 영역은 메인, 게시판, 블로그, 로그인 페이지마다 약간식 다릅니다. 이 부분을 미리 작업하여 나중에 편하게 붙이도록 하겠습니다.
- assets
- html
- main.html
- index.html
<main id="main" role="main">
<div class="container">
<section class="intro__inner borderBomStyle">
<h2 class="blind">개발자 블로그에 오신 것을 환영합니다.</h2>
<div class="intro__img"></div>
<div class="intro__text">
웹스로퍼는 <em>최신 기술 동향</em>, <em>코딩 팁</em>, <em>문제 해결 방법</em> 등을 다루며,<br>
개발자들끼리의 <em>지식 공유</em>를 목표로 합니다.<br>
함께 성장하고 즐거운 경험을 공유하는 <em>공간</em>이 됐으면 좋겠습니다.<br>
</div>
</section>
<!-- //intro__inner -->
</div>
</main>
<!-- //main -->
.intro__inner {
padding: 80px 0;
text-align: center;
}
.intro__img {
max-width: 600px;
height: 300px;
border-radius: 200px;
background-image: url(../img/intro-main01@2x.jpg);
background-size: cover;
background-position: center;
margin: 0 auto;
margin-bottom: 3rem;
}
.intro__text {
font-size: 1.4rem;
word-break: keep-all;
font-weight: 300;
}
.intro__text em {
color: var(--green);
}
.intro__title {
font-size: 1.75rem;
margin-bottom: 1.875rem;
}
4.2 블로그 인트로 코딩하기
이번에는 스타일이 비슷하기 때문에 blogStyle 클래스만 붙이고 추가적으로 작업하겠습니다.
블로그 스타일은 타이틀이 있는 점이 다릅니다.
<main id="main" role="main">
<div class="container">
<section class="intro__inner borderBomStyle">
<h2 class="blind">개발자 블로그에 오신 것을 환영합니다.</h2>
<div class="intro__img"></div>
<div class="intro__text">
웹스로퍼는 <em>최신 기술 동향</em>, <em>코딩 팁</em>, <em>문제 해결 방법</em> 등을 다루며,<br>
개발자들끼리의 <em>지식 공유</em>를 목표로 합니다.<br>
함께 성장하고 즐거운 경험을 공유하는 <em>공간</em>이 됐으면 좋겠습니다.<br>
</div>
</section>
<!-- //intro__inner -->
<section class="intro__inner blogStyle borderBomStyle">
<div class="intro__img"></div>
<h2 class="intro__title">최신 기술 동향</h2>
<div class="intro__text">
최신 웹 <em>개발 기술</em>과 <em>트렌드</em>!<br>
웹 개발에 필요한 다양한 지식을 한눈에 확인해보세요!<br>
</div>
</section>
<!-- //intro__inner blogStyle -->
</div>
</main>
<!-- //main -->
/* blogStyle */
.intro__inner.blogStyle .intro__img {
max-width: 300px;
height: 150px;
}
.intro__inner.blogStyle .intro__text {
font-size: 1.25rem;
}
4.3 회원가입 인트로 코딩하기
이번 스타일은 회원가입 페이지에서 쓸 디자인을 작업해보겠습니다.
<main id="main" role="main">
<div class="container">
<section class="intro__inner borderBomStyle">
<h2 class="blind">개발자 블로그에 오신 것을 환영합니다.</h2>
<div class="intro__img"></div>
<div class="intro__text">
웹스로퍼는 <em>최신 기술 동향</em>, <em>코딩 팁</em>, <em>문제 해결 방법</em> 등을 다루며,<br>
개발자들끼리의 <em>지식 공유</em>를 목표로 합니다.<br>
함께 성장하고 즐거운 경험을 공유하는 <em>공간</em>이 됐으면 좋겠습니다.<br>
</div>
</section>
<!-- //intro__inner -->
<section class="intro__inner blogStyle borderBomStyle">
<div class="intro__img"></div>
<h2 class="intro__title">최신 기술 동향</h2>
<div class="intro__text">
최신 웹 <em>개발 기술</em>과 <em>트렌드</em>!<br>
웹 개발에 필요한 다양한 지식을 한눈에 확인해보세요!<br>
</div>
</section>
<!-- //intro__inner blogStyle -->
<section class="intro__inner joinStyle borderBomStyle">
<div class="intro__img"></div>
<div class="intro__text">
최신 웹 <em>개발 기술</em>과 <em>트렌드</em>!<br>
웹 개발에 필요한 다양한 지식을 한눈에 확인해보세요!<br>
</div>
</section>
<!-- //intro__inner blogStyle -->
</div>
</main>
<!-- //main -->/* joinStyle */
.intro__inner.joinStyle .intro__img {
max-width: 300px;
height: 300px;
}
댓글