지난 일요일 제출했던 숙제 리뷰를 해보려 한다
강의자료의 템플릿과 bootstrap을 활용해 사진과 같은 형식의 홈페이지를 만드는 과정이다
기본적으로 앞서 진행한 강의를 충실히 했다면 충분히 만들 수 있다고 생각했다
코드
<!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>스파르타코딩클럽 | homework</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://newsimg.sedaily.com/2022/09/01/26AWMC2CUV_3.jpg");
background-position: center 10%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mypost > button {
margin-top: 20px;
}
.cards {
max-width: 500px;
width: 95%;
margin: 20px auto 20px auto;
}
.cards > div {
margin: 10px auto;
}
</style></head>
<body>
<div class="mytitle">
<h1>이강인(kangin-lee) 팬명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="cards">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>이강인 선수 응원합니다! 27일 평가전 선발 가자!</p>
<footer class="blockquote-footer">새벽의 축구 전문가</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>이강인 선수 응원합니다! 27일 평가전 선발 가자!</p>
<footer class="blockquote-footer">새벽의 축구 전문가</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>이강인 선수 응원합니다! 27일 평가전 선발 가자!</p>
<footer class="blockquote-footer">새벽의 축구 전문가</footer>
</blockquote>
</div>
</div>
</div></body>
</html>
리뷰
지난 강의의 index를 참고하였다
거의 비슷한 형태이니 코드를 그대로 복사하고 약간의 수정만 해주면 된다
페이지의 제목쯤 되는 "mytitle" class 구분하고
<button>영화 기록하기🎦</button> 부분은 필요없으니 빼주고
이강인 팬 페이지를 만들고 싶으니 사진을 하나 구한다
이렇게 바꿔준 다음 지난 코드를 참고
<style>텝에 .mytitle { 만들고 image url을 바꿔준다
변경점: background-position: center 10%;, 이미지 url()
이유: 원본사진이 페이지에 딱 맞지않아 페이지 크기에 따라 얼굴이 잘린다
background 코드를 이리저리 만져보다가 10% 수치를 도출했다워낙 정보가 많다보니 일지작성이든 코드작성이든
경험 하나하나가 소중하다
페이지로 보이는 흡사한 모습
<body> 코드도 거의 비슷하다별점<class>은 필요 없으니 1, 3, 4번을 활용한다
<style> .mypost 코드 참고
<body>내용만 페이지에 맞게 바꿔준다
응원 남기기
너무 붙어있으니 조금 띄워준다
요래요래
20px 윗부분이 띄어졌다
이부분은 처음 보는 형식인 만큼 강의자료의 quote 를 참고했다
bootstrap을 활용한다
불필요한 부분은 지우고 페이지 형식에 맞는 부분만 남기면
작성시 class 이름을 card 3개를 묶어주는 cards로 정의한다
box-shadow: 0px 0px 3px 0px gray;, padding: 20px; 부분 제외하고 붙여넣기
마찬가지로 너무 붙어있으니까 좀 띄워주자
class cards 안에 있는 <div class="card"> 를 수정하는 코드
div를 지정하든 .card를 지정하든 같은 동작을 한다
나는 div를 지정했다마지막으로 폰트 https://fonts.google.com/?subset=korean
지난번 강의에 쓰였던 폰트를 참고했다
소감
코드를 갖다가 복사 + 붙여넣는 과정은 쉽다
하지만 코드를 적재적소에 활용하려면
어떤 상황에 어떤 코드가 적절한지 경험적으로 이해되야 하고
생각(언어)을 논리적으로 나열하는 행위이기 때문에
언어의 논리와 나의 논리를 일치시키는 것도 중요하다
앞으로 구조적으로 배울게 많고
생각할것도 많고 이해해야 하는것도
정말 많을것 같다..
