포트폴리오 페이지
이미지 자르기
- 이미지를 감싸는 div 태그를 만든다.
- 1.에서 만든 태그의 width와 height를 정의한다.
- 이미지의 width와 height를 100%로 설정한다.
- 이미지의 object-fit을 cover로 설정한다.
Transition
이 프로젝트에서는 버튼에 transition을 줬다. 버튼에 마우스를 올릴 경우 버튼 색이 바뀌고 그림자가 생긴다.
- hover 했을 때의 나타날 스타일을 설정한다. (ex: background-color)
- hover 말고 기본 스타일에 transition: 속성 시간; 을 설정한다. 여러 개를 입력할 때는 콤마 하고 띄어쓰기하면 된다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>김그렙의 포트폴리오</h1>
<hr>
<p class="description">안녕하세요,<br>
늘 고민하는 개발자 <b>김그렙</b>입니다.<br>
제 프로젝트들을 소개합니다.
</p>
<div class="card_list">
<div class="card">
<div class="img_box">
<img class="card_img"
src="https://images.unsplash.com/photo-1622163642998-1ea32b0bbc67?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Tennis Image">
</div>
<p class="card_title">테니스 마켓</p>
<button class="card_btn">자세히 보러가기</button>
</div>
<div class="card">
<div class="img_box">
<img class="card_img"
src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Book Image">
</div>
<p class="card_title">도서 구매 사이트</p>
<button class="card_btn">자세히 보러가기</button>
</div>
<div class="card">
<div class="img_box">
<img class="card_img"
src="https://images.unsplash.com/photo-1453090927415-5f45085b65c0?q=80&w=1696&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Show Image">
</div>
<p class="card_title">공연 예매 사이트</p>
<button class="card_btn">자세히 보러가기</button>
</div>
</div>
</body>
</html>style.css
body {
text-align: center;
background-color: #FAF8FF;
}
.description {
margin: 3rem 0;
font-size: large;
}
.card_list {
display: flex;
flex-direction: row;
justify-content: center;
}
.card {
margin: 0 2rem;
}
.img_box {
width: 400px;
height: 400px
}
.card_img {
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.card_title {
font-size: large;
}
.card_btn {
padding: 0.5rem 1.5rem;
border: 0;
background-color: #2b2d42;
color: white;
font-size: large;
border-radius: 10px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.card_btn:hover {
background-color: #565875;
box-shadow: 0 0.5em 0.25em -0.4em #a29fa8;
cursor: pointer;
}
데이터베이스 모델링
공연 테이블
보통은 공연 id가 있겠지만 여기서는 공연의 회차가 1회라고 해서 공연 이름을 기본키로 설정했다.
예시에는 이미지가 별도의 테이블로 분리되어 있던데 나도 처음에는 이행적 종속때문에 분리해야 된다고 생각했다.
근데 이행적 종속을 제거해야 한다는 것은 알겠는데 왜 해야하는지는 몰라서 찾아봤다.
| 수강 코드 | 과목 이름 | 수강료 |
| 1000 | 웹 프로그래밍 | 20000 |
| 1200 | 운영체제 | 30000 |
| 1400 | 데이터베이스 | 40000 |
과목 이름이 같으면 동일한 수업이라고 가정한 상태에서 수강 코드 1000의 과목 이름이 데이터베이스로 바꿔보자. 데이터베이스 수강료가 20000인 것도 있고 40000인 것도 있다. 데이터의 일관성이 없어졌다. 이게 이행적 종속을 제거해야 하는 이유다.
근데 지금 과제에는 모든 공연은 1회차만 진행한다고 했다. 공연이 다르면 이미지도 다를 것이다. 그럼 이미지 URL을 다른 공연의 이미지 URL과 동일하게 수정할 경우가 발생하는가? 그런 경우는 발생하지 않을 것이라고 생각해서 별도의 테이블로 빼내지는 않았지만 이행적 종속인 것은 맞다고 생각한다.
예매 테이블
왜 공연 이름과 예매자 이메일을 복합키로 설정하지 않고 예매 번호를 기본키로 설정해야 하는지 설명하려니까 이렇다 할 이유가 처음에는 떠오르지 않았다. 천천히 생각해 보니 동일한 회원이 같은 공연을 여러 번에 나눠서 예매를 하는 경우가 발생할 수 있어서 예매 번호를 기본키로 써야 한다.
계산해서 나올 수 있는 값은 테이블에 넣는 게 아니라고 배워서 예매 가격도 테이블에 넣을까 말까 고민을 많이 했는데 조회할 때마다 예매 가격 칼럼을 계산하게 되면 그것도 시간 낭비일 것 같아서 넣었다.
회원 테이블
회원가입 시 아이디를 입력하는 칸이 없길래 아이디가 아닌 이메일을 기본키로 설정했다.
'데브코스' 카테고리의 다른 글
| [3주차 - DAY4] Express.js 기반의 웹 서버 구축 및 응용(1) (0) | 2024.03.14 |
|---|---|
| [3주차 - DAY3] API (0) | 2024.03.13 |
| [2주차 - DAY5] 웹 실습(2) (0) | 2024.03.08 |
| [2주차 - DAY4] 웹 실습(1) (0) | 2024.03.07 |
| [2주차 복습 발표] Git branch (0) | 2024.03.06 |
