TIL 2024-09-06 (Web - 3주차 HomeWork)

오늘은 Web 3주차 숙제에 대해 작성해보자.

(물론 숙제를 완벽하게 하지 못했다...)

 

먼저 숙제 결과 사진 먼저 보고 가자...

 

결과 사진이다.

일단 나는 왠지 모르겠지만 사이즈조절이 다 뜻대로 안되어 매우 슬펐다..

 

해상도의 차이인지.. 화면 크기의 차이인지.. 알 수 없으나.. 크기 조절이 뜻대로 되지 않았다.

 

숙제에서 제공해주는 기본 뼈대 코드가 있는데 거의 대부분의 <style>이 다 적혀있기에 이걸 수정해야하나..? 라고 생각하다가 수정하는데도 postbox는 어떠한 값을 주어도 아무런 변화가 없기에 포기하였다...

 

일단 숙제에서 내게 요구한 것은 

1. Bootstrap을 활용해서, jumbotron을 완성하세요.
2. Bootstrap을 활용해서, cards를 추가해보세요.
3. 구글 폰트를 내 HTML에 적용해보세요.

이 3가지 였고 어렵지 않게 할 수 있었는데...

 

먼저 첫번째 과제부터 차례대로 수행하였다.

 

jumbotron에서 저번에 설명했듯이 마우스 우클릭 후 검사하기 한 다음 내가 원하는 디자인의 범위를 div를 천천히 눌러보며 확인한 후에 다시 그 div를 마우스 우클릭하여 HTML 이라고 적힌 것을 클릭하면 개발자 도구창에서 boxf로 표시해준다.

 

그 박스 부분을 복사하여 body에 붙여준 다음 미리 작성된 코드에 이미지가 이미 class = "header"에 다 적혀있었기에 class = "header"로 묵어주었고 숙제 사진을 보면 포스팅 박스도 바로 같이 있는 것을 보아 같이 묶어주었다.

<div class="header">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5-fw-bold">스파르타 푸드파이터</h1>
                <p class="col-md-8 fs-4">본인만의 맛집을 소개하는 사이트입니다. <br>맛집을 소개해주세요.</p>
                <div class="post" id="input-card">
                    <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 mb-3">
                        <input type="text" class="form-control" id="foodTitle" placeholder="영화 제목">
                        <label for="foodTitle">음식명</label>
                    </div>
                    <div class="input-group mb-3">
                        <button class="btn btn-outline-secondary" type="button">별점</button>
                        <select class="form-select" id="inputGroupSelect03"
                            aria-label="Example select with button addon">
                            <option selected>별점 선택</option>
                            <option value="1">⭐</option>
                            <option value="2">⭐⭐</option>
                            <option value="3">⭐⭐⭐</option>
                            <option value="4">⭐⭐⭐⭐</option>
                            <option value="5">⭐⭐⭐⭐⭐</option>
                        </select>
                    </div>
                    <div class="form-floating">
                        <textarea class="form-control" placeholder="Leave a comment here"
                            id="floatingTextarea"></textarea>
                        <label for="floatingTextarea">추천 이유</label>
                    </div>
                    <div class="button2">
                        <button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

 

포스팅 박스 코드는 미리 작성되어있었기에 그대로 복사해서 내용 아래에 이어서 붙여주기만 했다.

하지만 여기서 문제가 발생했다(해결하지 못함...)

 

 

포스팅 박스의 위치가 잘못되어있는 것을 보고

수정하기위해 .post의 margin값을 수정하였는데 움직이지 않고 다른 값들을 수정했을 땐 모두 정상적으로 수정되었지만 위치만큼은 절대 변하지 않았다.

 

이 부분의 원인은 추후에 더 알아본 다음에 글을 작성하겠다.

 

사진을 보면 '스파르타 푸드파이터' 제목이 되는 폰트만 다른데 이것도 따로 설정해줄 수 있다.

 

이미 저번에도 설명했듯이 @import... 은 <style> 처음에 적어주는 것이 보기 편하고, font-family 코드를 내가 바꾸고 싶은 부분의 넣어주면 된다.

 

제목이 <h1>에 있었지만, 이것도 수정이 잘 안되어,

제목 부분의 클래스명을 확인하여 클래스명 css를 따로 작성해주었다.

 

 .header>h1 {
            margin: 0;
            font-size: 40px;
        }

 .display-5-fw-bold {
            font-family: "Black Han Sans", sans-serif;
        }

 

처음엔 header>h1에 font-family 코드를 넣으니 적용이 되지 않아 클래스명을 확인한 후 따로 작성해주었다.

 

첫번째 과제는 끝냈으니 이제 card를 추가하자.

 

카드 또한 Bootstrap에서 "Grid cards"를 검색하여 원하는 디자인의 코드를 복사한다.

 

복사를 하면 여러개의 카드가 나올텐데 우리는 여기서 카드 하나만 냅두고 모두 삭제한 후 카드 하나 코드를 복사하여 3개를 만들어 줄 것이다.

 

결과 사진에 있는 음식 이미지 url은 따로 제공하지 않은 것 같아 구글에서 적당한 이미지로 대처했다.

 

<div class="mycards">
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://upload2.inven.co.kr/upload/2017/02/28/bbs/i13521376162.jpg?MW=800"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">하와이안 피자</h5>
                        <p class="card-text">⭐⭐⭐⭐</p>
                        <p class="card-text">이건 꼭 먹어야 해!</p>
                        <button class="card-button">추천하기</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6ChMDt8R4InJ42sZ0zThGGZJ2eKzgJ48kPg&s"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">수제 버거</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">최고의 수제버거</p>
                        <button class="card-button">추천하기</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://cdn.wadiz.kr/ft/images/green001/2018/1114/20181114172039368_32.jpg/wadiz/format/jpg/quality/80/optimize"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">해물라면</h5>
                        <p class="card-text">⭐⭐⭐⭐⭐</p>
                        <p class="card-text">국물이 아주 시원해요</p>
                        <button class="card-button">추천하기</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

보면은 원래 없던 버튼을 추가해주었고 버튼의 클래스명을 추가해주었다.

 

내용도 다 수정해주고 이미지 url로 따로 가져와 넣어주었다.

 

 

이렇게 결과가 나오는 것을 쉽게 확인할 수 있었고

 

마지막으로 전체 폰트만 바꾸어주면 된다.

 

숙제에서 요구하는 폰트는 고운돋움(Gowun Dobum)이기에 구글폰트 사이트에 들어가서 검색한 다음 똑같이 @import를 하나 더 적어주고 이 폰트는 전체에 적용하는 것이기 때문에

* {
            font-family: "Gowun Dodum", sans-serif;
        }

 

*을 이용해서 전체에 적용시켜준다.

---

 

상세히 적혀 있는 가이드에 따라 숙제를 진행하였는데 크게 어려운 부분은 없었고 그저 원래 하던 것들에서 몇 가지 내용만 수정하고 진행하면 되었는데 post 부분이 뜻대로 되지 않는 것들 보아 아직 더 열심히 해야할 것 같다.

 

그리고 굳이 post 부분을 계속 건들지 않은 이유는 숙제를 진행하면 자연스레 디자인이 만들어지게끔 뼈대 코드를 주셨기에 post 부분 또한 원래는 자연스레 위치가 잡혔을 것 같다는 생각이 들었다.

 

나중에 알아보고 스스로 수정해야한다면 수정할 예정이다.

 

이번 TIL은 내용이 적고 크게 안 한게 없어보이지만...

대부분의 시간을 post에 사용했다 ㅠㅠ