안녕하세요!
이번에 팀원분들과 미니 프로젝트로
팀원 소개하기 페이지 만들기
를 진행했어요.
와이어프레임입니다.
피그마를 사용할 줄 모르기도 하고
어려울 거 같아 그냥 파워포인트로 제작했습니다 ㅎㅎ
저는 여기서 팀원들의 개인 사진을 개시하여
그 사진을 클릭하면
개인의 소개가 적힌 각각의 링크로 이동하도록 하는 부분을 담당했습니다.
코드 먼저 보도록 할까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polaroid Picture Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.mycards {
width: 1000px;
margin: 30px auto;
}
.polaroid {
display: block; /* 링크를 블록 요소로 설정 */
border: none;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: #fff;
position: relative;
text-align: left;
transition: transform 0.2s;
border-radius: 0; /* 모서리를 둥글지 않게 설정 */
text-decoration: none; /* 링크 텍스트 데코레이션 제거 */
color: inherit; /* 링크 텍스트 색상 상속 */
}
.polaroid:hover {
transform: scale(1.05);
}
.polaroid .card-img-top {
width: 100%;
height: 275px; /* 원하는 높이로 설정하세요 */
object-fit: cover; /* 이미지가 카드를 벗어나지 않도록 조정 */
border-radius: 0; /* 모서리를 둥글지 않게 설정 */
}
.polaroid .card-body {
padding-top: 10px;
padding-bottom: 10px;
}
.card-title, .card-text {
margin: 5px 0;
}
/* 구체적 선택자 사용 */
.mycards .polaroid:focus,
.mycards .polaroid:active {
outline: none;
box-shadow: none;
}
</style>
</head>
<body>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<a href="https://example.com" class="polaroid">
<img src="areum.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">your name</h5>
<p class="card-text">your mbti</p>
<p class="card-text">your introduction</p>
</div>
</a>
</div>
<div class="col">
<a href="https://example.com" class="polaroid">
<img src="yunseo.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">your name</h5>
<p class="card-text">your mbti</p>
<p class="card-text">your introduction</p>
</div>
</a>
</div>
<div class="col">
<a href="https://example.com" class="polaroid">
<img src="minsu.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">your name</h5>
<p class="card-text">your mbti</p>
<p class="card-text">your introduction</p>
</div>
</a>
</div>
<div class="col">
<a href="https://example.com" class="polaroid">
<img src="kihye.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">your name</h5>
<p class="card-text">your mbti</p>
<p class="card-text">your introduction</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
결과를 보여드리겠습니다!
저는 이렇게 폴라로이드 느낌이 나도록 만들어봤어요!
마우스가 가까이 가면
카드가 살짝 커지면서 글씨가 파란색으로 변해요.
그리고 카드를 클릭하면 이런 창으로 넘어가는데요.
코드에 개인 소개 페이지의 링크를 넣지 않아 그렇답니다!
예시로 유튜* 링크를 걸었더니 잘 연결되는 것을 확인할 수 있었습니다 ㅎㅎ
부트스트랩에서 카드를 가져온 방법을 알려드리면
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
먼저 이 사이트로 접속해주세요.
왼쪽 위의 문서(영어로는 doc)를 눌려주세요!
컴포넌트 중에서 원하시는 것을 눌려주세고
복사를 눌려주세요.
그리고 바디 부분에 입력하세면 됩니다.
부트스크랩을 사용하기 위해서는
헤드 부분에 title 밑에
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
이 부분을 넣어주셔야 합니다!
그럼 코드를 자세히 살펴볼까요?
먼저 카드의 구조를 살펴보겠습니다.
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<a href="https://example.com" class="polaroid">
<img src="areum.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">your name</h5>
<p class="card-text">your mbti</p>
<p class="card-text">your introduction</p>
</div>
</a>
</div>
<div class="col">
...
</div>
<div class="col">
...
</div><
div class="col">
...
</div>>
</div>
</div>
하나의 카드는 이렇게 구성되어 있습니다.
<a> 태그에 href을 통해 클릭을 하면 링크된 사이트로 이동될 수 있도록 하였습니다.
그리고 카드 타이틀은 이름을 넣고
카드 텍스트에 엠비티아이와 짧은 소개를 적도록 했습니다.
그리고 이 카드들이 4개가 있는데 부트스트랩의 원래는
<div class="row row-cols-1 row-cols-md-3 g-4"> 이렇게 되어 있는데요!
이 코드를 <div class="row row-cols-1 row-cols-md-4 g-4"> 이렇게 수정해주셔야 합니다.
3으로 하면 한 줄에 3개밖에 안떠서 나머지 하나가 밑의 줄로 내려가요.
저는 한줄에 다 보이게 하기 위해서 4개로 해주었습니다!
이제 css 부분을 볼까요?
<style>
.mycards {
width: 1000px;
margin: 30px auto;
}
.polaroid {
display: block; /* 링크를 블록 요소로 설정 */
border: none;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: #fff;
position: relative;
text-align: left;
transition: transform 0.2s;
border-radius: 0; /* 모서리를 둥글지 않게 설정 */
text-decoration: none; /* 링크 텍스트 데코레이션 제거 */
color: inherit; /* 링크 텍스트 색상 상속 */
}
.polaroid:hover {
transform: scale(1.05);
}
.polaroid .card-img-top {
width: 100%;
height: 275px; /* 원하는 높이로 설정하세요 */
object-fit: cover; /* 이미지가 카드를 벗어나지 않도록 조정 */
border-radius: 0; /* 모서리를 둥글지 않게 설정 */
}
.polaroid .card-body {
padding-top: 10px;
padding-bottom: 10px;
}
.card-title, .card-text {
margin: 5px 0;
}
/* 구체적 선택자 사용 */
.mycards .polaroid:focus,
.mycards .polaroid:active {
outline: none;
box-shadow: none;
}
</style>
먼저 카드 4개를 전부 감싼 가장 바깥쪽의 클래스인 mycards를
1000px로 해주어서 화면 꽉차는 크기에서 바꿔주었어요.
그리고 margin을 통해 위의 여백은 30px 정도로 주고
auto를 사용하면 양옆의 여백을 페이지의 크기에 맞게 맞춰줍니다.
그리고 polaroid 클래스는 각 카드 하나를 의미하는데요.
박스 뒤에 그림자를 주고 padding을 10px로 설정하며
사진과 카드 간의 간격을 줘서 폴라로이드 느낌을 주었습니다.
그리고
.polaroid:hover {
transform: scale(1.05);
}
hover라는 클래스는 요소가 마우스 포인터 위에 있을 때 적용되는데,
hover된 상태일 때 1.05배 커진다는 의미입니다.
이로써 어떤 카드를 선택하는지 알 수 있게 됩니다!
이렇게 제가 만든 소개 페이지의 사진 부분을 포스팅해봤습니다.
모르시는 부분은 댓글 달아주시면 답해드릴게요!
폴라로이드 모양이 이뻐 여러분도 다음에 한 번 해보셨으면 좋겠네요 ㅎㅎ
감사합니다~!
'HTML CSS' 카테고리의 다른 글
| [HTML/CSS] 파이어베이스(Firebase) 사용법 | 데이터베이스 백엔드 사용하지 않고 구현하기 | 백엔드 쉽게 구현하기 (5) | 2024.07.22 |
|---|---|
| [HTML/CSS] 로그인 페이지 코드 분석하기 (0) | 2024.07.01 |