스파르타코딩캠프 미니프로젝트 진행과정
- 개인 소개 페이지 제작
우리 A-11팀(리코더 팀)은 팀 소개 페이지를 만들기 위해 팀 소개 메인페이지 및 발표 영상 제작 등의 역할은 팀원들에게 임의로 배정하여 나눠서 진행하기로 하였고 각자 개인 소개페이지 또한 개인이 책임지고 작성해서 한곳에 모으기로 하였다.
그래서 오늘은 개인 소개페이지를 작성하기로 하였고 그 진행과정을 남기려고 한다.
HTML 코드 작성
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>리코더 팀 | 정형빈 소개페이지</title>
</head>
<body>
<div class="mytitle">
<div class="card-0">
<div class="row g-0">
<div class="col-md-4">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbjskhd%2FbtrKHc237dN%2FF3TWqFn3eEAJKi7HAxZ22k%2Fimg.jpg"
class="img-fluid rounded-start" alt="..."">
</div>
<div class="col-md-8">
<div class="card-body">
<h1 class="card-title">정형빈</h1>
<h3 class="card-subtitle">A-11(리코더)｜팀장</h3>
<p class="card-text">생년월일 : 1998년 2월 26일</p>
<p class="card-text">거주지 : 경상남도 김해시</p>
<p class="card-text">취미 : 게임, 유튜브시청, 독서</p>
<p class="card-text">좋아하는음식 : 고기</p>
<p class="card-text">싫어하는음식 : 해산물</p>
<p class="card-text"><small class="text-muted">Blog : <a href="https://velog.io/@gudqls369"
target="_black">
https://velog.io/@gudqls369 </a></small></p>
</div>
</div>
</div>
</div>
<div class="card-0">
<div class="row g-0">
<div class="col-md-4">
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fa2%2Fdd%2Fd3%2Fa2ddd3b549f7d5905b3f2f3726fc64ee.jpg&type=sc960_832"
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h1 class="card-title">MBTI : ISTP</h1>
<h3 class="card-subtitle">만능 재주꾼</h3>
<p class="card-text">효율충(적은 노력으로 최대의 능률을 선호함)</p>
<p class="card-text">관심있는 분야에 몰입을 잘하지만 관심없는 분야는 쳐다도 안봄</p>
<p class="card-text">남한테 관심없고 본인 이야기도 잘 안함</p>
<p class="card-text">간섭 받는거 매우 싫어함</p>
<p class="card-text">남의 감정에 공감이 어려움</p>
<p class="card-text">호불호와 자기주관이 지나치게 강함</p>
<p class="card-text">마이웨이인데다 혼자만의 시간을 좋아함</p>
</div>
</div>
</div>
</div>
<div class="card-1">
<div class="card-body">
<h2 class="card-title">객관적으로 살펴본 자신의 장점</h2>
<p class="card-text">사소한 일에 스트레스를 잘 안받는 편이고 스트레스를 받더라도 금방 해소되는 편이다.</p>
<p class="card-text">관심있는 분야에 몰입을 잘 하며 지금은 코딩과 웹개발에 대해 관심이 매우 많다.</p>
<p class="card-text">눈치가 빠르고 상황파악능력이 좋다.</p>
<p class="card-text">일을 효율적으로 처리하는데 능하다.(잔머리가 좋다.)</p>
<p class="card-text">일처리가 꼼꼼한 편이다.</p>
</div>
</div>
<div class="card-1">
<div class="card-body">
<h2 class="card-title">협업을 하는 과정에서의 자신의 스타일</h2>
<p class="card-text">주도적으로 일을 진행하려 하지는 않지만 아무도 나서지않아 일처리가 답답하면 직접 나서는 편이다.</p>
<p class="card-text">자신이 맡은 일에만 집중하고 타인이 하는 일은 '알아서 잘하겠지' 마인드이다.</p>
<p class="card-text">문제가 생겼을 때 본인이 직접 해결하려는 경향이 강하고 도저히 안되겠다 싶을 때만 도움을 청한다.</p>
<p class="card-text">연락과 소통은 꼭 필요한 경우에만 하고 업무적인 부분 외에는 하지 않는다.</p>
<p class="card-text">여유를 가지고 일을 하는 편이지만 너무 여유를 부리다 발등에 불이 떨어져 급하게 하는 경우도 많다.</p>
<p class="card-text">계획을 세우고 일을 하기보다는 즉흥적으로 일을 처리한다.</p>
</div>
</div>
</body>
</html>부트스트랩의 Card에서 양식을 가져와 사용하였고 내용입력을 우선적으로 하였다.
블로그 주소에 하이퍼링크를 설정하고 잘 되는지 확인해보니 보고있는 현재 페이지가 블로그로 바뀌어서 불편했고 새 창에서 열리게 하려면 어떻게해야 하는지 인터넷을 검색하여 알아보았고
참고한 블로그주소
위 블로그의 게시물을 참고하여 코드를 작성했더니 쉽게 해결되었다.
<p class="card-text"><small class="text-muted">Blog : <a href="https://velog.io/@gudqls369">
https://velog.io/@gudqls369 </a></small></p>에서 하이퍼링크 주소 옆에 target="_black"만 추가하면 되는 아주 간단한 작업이었다.
<p class="card-text"><small class="text-muted">Blog : <a href="https://velog.io/@gudqls369"
target="_black">https://velog.io/@gudqls369 </a></small></p>CSS코드 작업
.card {
max-width: 900px;
margin : 10px auto 10px auto;
padding: 10px auto 10px auto;
width: 95%;
box-shadow: 0px 0px 3px 0px black;
border-radius: 10px;
background-color: greenyellow;
}우선 "card"의 값을 모두 이렇게 주었는데 배경색이 너무 밝은것 같았다. 그래서 투명도를 낮추기 위해 인터넷을 검색해 투명도를 조정하는 코드를 찾아 opacity : 0.6으로 값을 주었더니 배경색뿐만 아니라 card안에 있는 글자들까지 투명해져서 당황스러웠다.
그래서 다시 인터넷을 검색하여 정보를 찾아보니 친절하게 설명해주신 분이 계셨다.
참고한 블로그주소
opacity는 선택한 요소의 내용과 배경을 모두 투명하게 만들기 때문에 배경색만 투명하게 하고 싶다면 rgba()를 사용하여 RGB값을 가져와 해당 값 뒤에 투명도값을 입력하면 되는 것이었다. 나는 적용하려는 색상의 RGB값을 그림판에서 확인하여 입력하고 투명도를 0.6으로 주어서 값을 적용하였다.
.card {
max-width: 900px;
margin : 10px auto 10px auto;
padding: 10px auto 10px auto;
width: 95%;
box-shadow: 0px 0px 3px 0px black;
border-radius: 10px;
background-color: greenyellow;
background-color: rgba( 173, 255, 47, 0.6 );
}다음으로 좀 더 보기 좋도록 이미지와 글자의 배치 및 간격을 조정하였다.
.img {
width: 250px;
height: 100%;
max-height: 350px;
margin : 0 auto;
display: flex;
}
.card-text {
margin: 10px;
}
.card-title2{
text-align: center;
}마지막 작업은 폰트바꾸기였다. 구글폰트에서 배포중인 폰트 중 Do Hyeon체를 사용하였다.
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">를 head에 추가하고
* {
font-family: 'Do Hyeon', sans-serif;
}를 style에 추가하여 페이지 전체에 적용하여서 최종적으로 완성!
최종적으로 만들어진 페이지의 모습이다.
딱 봐도 초보가 만든 티가 팍팍나고 예쁘게 꾸미지도 못했지만 누군가의 도움없이 순전히 혼자 만든 첫번째 작품이라는 것에서 뿌듯함을 느끼고 앞으로 더 성장할 나 자신의 모습이 기대된다.
스파르타 내일배움캠프 3기 수강생 정형빈