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 카드 유형 반응형 코딩하기
개발
- 1. 기본 셋팅하기
5. 카드 유형 코딩하기
5.1 메인 카드 유형(column4) 코딩하기
이번에는 메인 페이지 인트로 영역을 코딩하겠습니다. 인트로 영역은 메인, 게시판, 블로그, 로그인 페이지마다 약간식 다릅니다. 이 부분을 미리 작업하여 나중에 편하게 붙이도록 하겠습니다.
- assets
- html
- main.html
- index.html
<section class="card__wrap borderLineStyle">
<h2><a href="#">최신 기술 동향</a></h2>
<div class="card__inner column4 line2 underline">
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-01@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-02@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-03@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-04@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
</div>
</section>
.card__wrap {
padding: 80px 0 30px;
position: relative;
}
.card__wrap h2 a {
display: inline-block;
font-size: 1rem;
border: 1px solid var(--black);
padding: 0.4rem 4rem;
margin-bottom: 1rem;
text-transform: capitalize;
transition: all 0.3s;
}
.card__wrap h2 a:hover {
background-color: var(--black600);
}
.card__inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.card__inner .card {
width: 24%;
margin-bottom: 50px;
}
.card__inner .card:last-child {
margin-bottom: 0;
}
.card__inner .card__text h3 {
display: inline-block;
font-size: 1.2rem;
margin-top: 10px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card__inner .card__text p {
width: 100%;
color: var(--black300);
overflow: hidden;
text-overflow: ellipsis;
}
.card__inner .card__img {
position: relative;
overflow: hidden;
border-radius: 5px;
}
.card__inner .card__img a {
position: relative;
display: block;
}
.card__inner .card__img a img {
filter: saturate(0%);
transition: all 0.3s;
}
.card__inner .card__img a:hover img {
filter: saturate(100%);
}
.card__inner .card__img a::after {
content: '';
width: 30px;
height: 30px;
position: absolute;
right: -50px;
bottom: 10px;
background-color: var(--black);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.646447 8.64645C0.451184 8.84171 0.451184 9.15829 0.646447 9.35355C0.841709 9.54882 1.15829 9.54882 1.35355 9.35355L0.646447 8.64645ZM9.5 1C9.5 0.723858 9.27614 0.5 9 0.5L4.5 0.5C4.22386 0.5 4 0.723858 4 1C4 1.27614 4.22386 1.5 4.5 1.5L8.5 1.5L8.5 5.5C8.5 5.77614 8.72386 6 9 6C9.27614 6 9.5 5.77614 9.5 5.5L9.5 1ZM1.35355 9.35355L9.35355 1.35355L8.64645 0.646447L0.646447 8.64645L1.35355 9.35355Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transform: rotate(760deg);
transition: all 0.6s ease-in-out;
}
.card__inner .card__img a:hover::after {
right: 10px;
transform: rotate(0);
}
5.2 메인 카드 유형(column3) 코딩하기
이번에는 3단으로 보이도록 설정하겠습니다.
기존 소스에 클래스를 추가하여 살짝 변형만 시키겠습니다.
column3이라고 클래스를 추가하고 설명 글도 2줄만 보일 수 있도록 line2를 추가했습니다.
제목에는 라인이 생길 수 있도록 underline도 추가했습니다.
추가된 클래스는 마지막에 정리하겠습니다.
<section class="card__wrap borderLineStyle">
<h2><a href="#">코딩 팁</a></h2>
<div class="card__inner column3 line2 underline">
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card02-01@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card02-02@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card02-03@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
</div>
</div>
</section>
5.3 메인 카드 유형(row2) 코딩하기
2줄로 된 구성은 간격과 폰트 크기가 살짝 다릅니다.
<section class="card__wrap borderLineStyle">
<h2><a href="#">코딩 팁</a></h2>
<div class="card__inner column4 row2">
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-01@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과 점진적으로 강화된 WebGL 효과</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-02@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>가능한 원인을 분석하기에 이어 가능한 원인을 분석하기에 이어</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-03@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>문제에 대한 해결책을 찾기 위해 문제에 대한 해결책을 찾기 위해</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-04@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>휴식과 다시 시도를 통해 다시 안정 휴식과 다시 시도를 통해 다시 안정</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-05@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>문제를 명확하게 이해하는 것이 문제를 명확하게 이해하는 것이</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-06@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>다른 사람들과 의견 나누기를 통해른 사람들과 의견 나누기를 통해</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-07@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>문제 해결 과정 문서화를 통한 문제 문제 해결 과정 문서화를 통한 문제</h3>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card03-08@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>가능한 원인을 분석하기에 이어 가능한 원인을 분석하기에 이어 개</h3>
</div>
</div>
</div>
</section>
column, line, underline, row를 설정하였습니다.
반응형도 추가하여 설정하겠습니다.
/* column */
.card__inner.column2 .card {
width: 49%;
}
.card__inner.column3 .card {
width: 32%;
}
.card__inner.column4 .card {
width: 24%;
}
.card__inner.column6 .card {
width: 16%;
}
/* line */
.card__inner.line1 .card p {
white-space: nowrap;
}
.card__inner.line2 .card p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card__inner.line3 .card p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card__inner.line4 .card p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
/* underline */
.card__inner.underline .card__text h3 {
text-decoration: underline;
text-underline-position: under;
}
/* row */
.card__inner.row2 .card {
margin-bottom: 30px;
}
.card__inner.row2 .card__text h3 {
font-size: 1rem;
margin-top: 5px;
}
/* media */
@media (max-width: 960px) {
.card__inner.column4 .card {
width: 32%;
}
}
@media (max-width: 600px) {
.card__wrap {
padding: 70px 0 20px;
}
.card__inner.column3 .card {
width: 49%;
}
.card__inner.column4 .card {
width: 49%;
}
}
@media (max-width: 400px) {
.card__inner.column2 .card {
width: 100%;
}
.card__inner.column3 .card {
width: 100%;
}
.card__inner.column4 .card {
width: 100%;
}
}
5.4 블로그 카드 유형1 코딩하기
블로그 페이지에서 사용하는 카드 유형입니다. 메인 유형과는 조금 다릅니다.
클래스 subpage를 추가했습니다.
<div class="blog__layout">
<div class="blog__contents">
<section class="card__wrap borderLineStyle">
<div class="card__title">
<h2><a href="#">최신 기술 동향</a></h2>
</div>
<div class="card__inner column3 line2 subpage">
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-01@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-02@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>화살표 함수에서의 단축된 문법: 하나의 표현식만을 반환하는 화살표 함수의 경우 return과 {}를 생략하여 코드를 더욱 간결하게 만들 수
있습니다.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-03@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-04@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-05@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-06@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
<div class="card">
<figure class="card__img">
<a href="#">
<img src="../assets/img/card01-07@2x.jpg" alt="점진적으로 강화된 WebGL 효과">
</a>
</figure>
<div class="card__text">
<h3>점진적으로 강화된 WebGL 효과</h3>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</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>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</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>
<p>CSS 및 React Three Fiber로 구동되는 반응형 WebGL 레이아웃을 만드는 방법을 알아보세요.</p>
</div>
<div class="card__info">
<span class="author">웹쓰</span>
<span class="date">2023.10.10</span>
</div>
</div>
</div>
</section>
</div>
<div class="blog__aside"></div>
</div>
<!-- //blog__layout -->
/* subpage */
.card__inner.subpage .card {
background-color: #E8E8E8;
margin-bottom: 20px;
transition: background-color 0.3s;
}
.card__inner.subpage .card:hover {
background-color: #d7d7d7;
}
.card__inner.subpage .card h3 {
padding: 1rem 1rem 0 1rem;
margin-top: 0;
}
.card__inner.subpage .card p {
padding: 0 1rem;
}
.card__inner.subpage .card .card__info {
padding: 0 1rem 1rem;
margin-top: 10px;
}
.card__inner.subpage .card .card__info .author {
background-color: var(--black500);
padding: 2px 20px;
border-radius: 30px;
}
.card__inner.subpage .card__img {
border-radius: 0;
}
5.5 블로그 카드 유형2 코딩하기
이번에는 column2으로 변경시키겠습니다.
5.6 블로그 카드 유형3 코딩하기
이번에는 row 클래스를 추가했습니다.
/* subpage row */
.card__inner.subpage.row .card {
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
.card__inner.subpage.row .card .card__img {
width: 35%;
}
.card__inner.subpage.row .card .card__text {
width: 65%;
}
.card__inner.subpage.row .card .card__info {
position: absolute;
left: 35%;
bottom: 0;
}
.card__inner.subpage.row .card .card__info .author {
margin-right: 10px;
display: inline-block;
}
.card__inner.subpage.row .card .card__info .date {
display: inline-block;
margin-top: 5px;
}5.7 카드 유형 반응형 코딩하기
css에 반응형을 추가하고 한번에 정리하겠습니다.
.card__wrap {
padding: 80px 0 30px;
position: relative;
}
.card__wrap h2 a {
display: inline-block;
font-size: 1rem;
border: 1px solid var(--black);
padding: 0.4rem 4rem;
margin-bottom: 1rem;
text-transform: capitalize;
transition: all 0.3s;
}
.card__wrap h2 a:hover {
background-color: var(--black600);
}
.card__inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.card__inner .card {
width: 24%;
margin-bottom: 50px;
}
.card__inner .card:last-child {
margin-bottom: 0;
}
.card__inner .card__text h3 {
display: inline-block;
font-size: 1.2rem;
margin-top: 10px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card__inner .card__text p {
width: 100%;
color: var(--black300);
overflow: hidden;
text-overflow: ellipsis;
}
.card__inner .card__img {
position: relative;
overflow: hidden;
border-radius: 5px;
}
.card__inner .card__img a {
position: relative;
display: block;
}
.card__inner .card__img a img {
filter: saturate(0%);
transition: all 0.3s;
}
.card__inner .card__img a:hover img {
filter: saturate(100%);
}
.card__inner .card__img a::after {
content: '';
width: 30px;
height: 30px;
position: absolute;
right: -50px;
bottom: 10px;
background-color: var(--black);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.646447 8.64645C0.451184 8.84171 0.451184 9.15829 0.646447 9.35355C0.841709 9.54882 1.15829 9.54882 1.35355 9.35355L0.646447 8.64645ZM9.5 1C9.5 0.723858 9.27614 0.5 9 0.5L4.5 0.5C4.22386 0.5 4 0.723858 4 1C4 1.27614 4.22386 1.5 4.5 1.5L8.5 1.5L8.5 5.5C8.5 5.77614 8.72386 6 9 6C9.27614 6 9.5 5.77614 9.5 5.5L9.5 1ZM1.35355 9.35355L9.35355 1.35355L8.64645 0.646447L0.646447 8.64645L1.35355 9.35355Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transform: rotate(760deg);
transition: all 0.6s ease-in-out;
}
.card__inner .card__img a:hover::after {
right: 10px;
transform: rotate(0);
}
.card__inner .card__info {
font-size: 14px;
display: flex;
justify-content: space-between;
color: var(--black300);
margin-top: 5px;
}
.card__inner .card__info .author {
color: var(--black);
}
.card__title {
display: flex;
justify-content: space-between;
}
/* column */
.card__inner.column2 .card {
width: 49%;
}
.card__inner.column3 .card {
width: 32%;
}
.card__inner.column4 .card {
width: 24%;
}
.card__inner.column6 .card {
width: 16%;
}
/* line */
.card__inner.line1 .card p {
white-space: nowrap;
}
.card__inner.line2 .card p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card__inner.line3 .card p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card__inner.line4 .card p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
/* underline */
.card__inner.underline .card__text h3 {
text-decoration: underline;
text-underline-position: under;
}
/* row */
.card__inner.row2 .card {
margin-bottom: 30px;
}
.card__inner.row2 .card__text h3 {
font-size: 1rem;
margin-top: 5px;
}
/* subpage */
.card__inner.subpage .card {
background-color: #E8E8E8;
margin-bottom: 20px;
transition: background-color 0.3s;
}
.card__inner.subpage .card:hover {
background-color: #d7d7d7;
}
.card__inner.subpage .card h3 {
padding: 1rem 1rem 0 1rem;
margin-top: 0;
}
.card__inner.subpage .card p {
padding: 0 1rem;
}
.card__inner.subpage .card .card__info {
padding: 0 1rem 1rem;
margin-top: 10px;
}
.card__inner.subpage .card .card__info .author {
background-color: var(--black500);
padding: 2px 20px;
border-radius: 30px;
}
.card__inner.subpage .card__img {
border-radius: 0;
}
/* subpage row */
.card__inner.subpage.row .card {
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
.card__inner.subpage.row .card .card__img {
width: 35%;
}
.card__inner.subpage.row .card .card__text {
width: 65%;
}
.card__inner.subpage.row .card .card__info {
position: absolute;
left: 35%;
bottom: 0;
}
.card__inner.subpage.row .card .card__info .author {
margin-right: 10px;
display: inline-block;
}
.card__inner.subpage.row .card .card__info .date {
display: inline-block;
margin-top: 5px;
}
/* media */
@media (max-width: 1200px) {
.card__inner.subpage.row .card .card__info {
display: none;
}
}
@media (max-width: 960px) {
.card__inner.column4 .card {
width: 32%;
}
.card__inner.subpage.row .card {
display: block;
}
.card__inner.subpage.row .card .card__img {
width: 100%;
}
.card__inner.subpage.row .card .card__text {
width: 100%;
}
.card__inner.subpage.row .card p {
margin-bottom: 1rem;
}
}
@media (max-width: 600px) {
.card__wrap {
padding: 70px 0 20px;
}
.card__inner.column3 .card {
width: 49%;
}
.card__inner.column4 .card {
width: 49%;
}
}
@media (max-width: 400px) {
.card__inner.column2 .card {
width: 100%;
}
.card__inner.column3 .card {
width: 100%;
}
.card__inner.column4 .card {
width: 100%;
}
}
댓글