제가 만들었던 HTML 파일을 스스로 코드 리뷰하는 일지입니다.
완성본
HTML
이 빨간 네모칸은 모두 HTML로 작성되었다. 이렇듯, HTML은 모든 웹사이트의 뼈대라고 해도 과언이 아니다. 지금부터 이 코드는 어떻게 작성되었는지 리뷰하겠다.
이 부분은 큰 div에 h1태그와 p태그를 넣었다. 이렇게 했던 이유는 큰 div는 전체적인 크기 등의 CSS를 관리하기 위함이었다. 사용했던 코드를 보겠다.
<div class="bugs_title">
<h1>당신의 최애곡을 알려주세요!</h1>
<p>이 페이지는 벅스와 함께 합니다.</p>
</div>정말 간단하다. 단지 div는 박스 형태로 되어있다는 것 정도만 기억하면 될 것 같다.
이제 이 부분을 보자. 이 부분은 div를 두 개 사용하였다. 제목 div 한개와 기록을 남길 수 있는 div로 구성했다. 또한, 기록을 남길 수 있는 div에는 button 태그도 함께 넣었다.
기록을 남길 수 있는 div 태그의 구성은 bootstrap을 이용하였다. 이런 프레임워크에 대해서는 따로 글을 구성하였으니 이를 참고하자.
<div class="bugs_record">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="bugs_title" placeholder="name@example.com">
<label for="floatingInput">노래제목</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="bugs_comment" placeholder="name@example.com">
<label for="floatingInput">코멘트</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="bugs_nickname" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<button onclick="bugs_input()" type="button" class="btn btn-outline-success">기록하기!</button>
<button type="button" class="btn btn-secondary">닫기</button>
</div>
마지막 부분이다. 이 부분도 다른 HTML과 크게 다를 것 없다. div를 두 개 사용하였고 첫번째 div는 p태그의 제목, 두번째 div는 테이블을 사용하였다.
<table class="bugs_table">
<thead>
<tr>
<th scope="col">노래제목</th>
<th scope="col">코멘트</th>
<th scope="col">닉네임</th>
</tr>
</thead>
<tbody id="bugs_record">
</tbody>
</table>뼈대는 이 정도로 구성되어 있음을 알 수 있다. HTML 관련 태그들은 모두 외우기에는 너무 지나치다. 따라서 필요한 태그는 구글링을 통해 알아가는 것이 좋다.
CSS
사실 위의 예시는 모두 CSS로 스타일링이 되어있다. CSS를 제거하면 어떤 모양일까?
내가 설정했던 글씨체, 글의 위치 등등.. 모든 것이 사라지고 앙상한 뼈대 그 자체만 남은 것을 확인할 수 있다. 다시 돌아와서 어떻게 스타일링을 했는지에 대해 리뷰를 하겠다.
녹색 박스와 글씨체를 먼저 알아보자. 글씨체는 구글폰트를 사용하여 가져왔다.
여기서 주목해야할 것들을 짚어주겠다.
근데 하다보니 이상하게 폰트가 적용이 되지 않을 때가 상당히 많았다. 대부분의 구글폰트 관련 구글링에서는 아랫줄만 가져가라고 한다. HTML의 마지막 줄 부분을 보자.
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&family=Single+Day&family=Yeon+Sung&display=swap" rel="stylesheet">참고로 내가 가져오려고 했던 글씨체의 이름은 Yeon Sung이다. Noto Serif KR, Single Day는 뭐지? 라는 생각을 했었는데 다시 보니 내가 예전에 확인했던 글씨체 이름이다. 그래서 그런지 CSS 부분에서도 그 글씨체가 있음을 알게 되었다.
구글 폰트를 사용할 때, 내가 사용하는 폰트 이름과 맞는지 확인 해야 된다는 것을 배웠다. 다음에는 이런 실수를 하지 않도록 주의하자.
여하튼 두 개로 나뉜 것 중 위에는 HTML의 head 부분에, 아랫줄은 CSS 부분에 넣는다.
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&family=Single+Day&family=Yeon+Sung&display=swap"
rel="stylesheet">* {
font-family: 'Yeon Sung', cursive;
height: auto;
}참고로 * 은 모든 부분에 적용한다는 뜻이다.
여기까지 했으면 이제 녹색 배경색으로 된 div를 건들여보자. 
일단 눈여겨 볼 것은 배경색, 그리고 글씨의 위치이다. 위의 HTML 코드를 살펴보면 각 태그마다 class를 붙인 것이 있다. CSS는 class나 id로 지정하여 색, 위치 등을 변경시킬 수 있다.
참고로 class는 '.' , id는 '#'으로 구분 짓는다.
.bugs {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}가장 큰 div에 대한 부분이다. 나는 div 박스의 위치, 그리고 글자의 위치를 담당하도록 설계하였다. 코드에 대한 해석은 이 일지가 아닌 구글링으로 하는 것이 최고이다.
.bugs_title {
background-color: greenyellow;
max-width: 1200px;
width: 95%;
margin: 10px auto 30px auto;
padding: 80px;
border-radius: 10px;
font-weight: bold;
}.bugs_title > h1 {
font-size: 70px;
}
.bugs_title > p {
color: coral;
}여기서 눈여겨 볼것은 width : 95%, margin, padding, 그리고 자식 지정이다. width를 95%로 지정한 이유가 무엇일까? 바로, 모바일에 대한 배려라고 생각하면 된다. width를 웹에만 맞출 경우 앱에서는 제대로 동작하지 않을 수 있기 때문이다.
margin과 padding은 각자 반대 성향이라고 생각하면 된다. margin은 박스를 기준으로 바깥과의 거리 조절, padding은 안쪽 거리조절이라고 생각하면 된다.
마지막으로 자식 지정인데 큰 의미는 아니고 지금처럼 div 안에 h1 태그 등이 있다면 굳이 h1 태그에 class나 id를 지정하지 않고 .class > p 라고 불러올 수 있다. 이는 코드를 조금 더 깔끔하게 쓸 수 있는 방법이라고 생각한다.
이 부분에 대해서는 딱히 설명할 게 없다. div 안의 h1 태그는 위의 방식과 유사하다. 또한, 그 다음 기록을 남기고 이를 클릭하는 버튼 객체는 모두 부트스트랩이라는 프레임워크를 사용하고 이에 대해 글씨 크기만 수정했다. 따라서 크게 이 일지에서 다룰 부분은 없다고 생각하고 넘어가자.
이 부분도 개인적으로 다룰 부분이 없다. 부트스트랩 table 객체를 사용했다.
사실 HTML과 CSS에 대해서 정리하는 것은 상당히 애매하다고 본다. 그래서 내가 선택했던 방법은 스스로 짰던 코딩에 대해 한 번 더 복습하는 겸 리뷰를 하고 추가될 부분이 뭐가 있었으면 좋겠는지 생각해보는 것이었다.
가장 먼저 떠올랐던 것은 div에 대한 경계선을 추가해야겠다고 생각했다. 만들고보니 조금 복잡하다고 느끼는 경우가 생겼고 이를 구분지어 준다면 다른 사람들이 보기에도 더 편하게 보고 이용할 수 있지 않을까? 라는 생각을 했다.
후에 더 많은 기능들을 추가하며 HTML, CSS 부분을 손 보는 것도 하나의 공부가 될 거라고 본다.
