1주차 강의를 완료하고 마지막 숙제마 남았다.

html, css, js 배운걸 토대로 팬명록을 만드는것이다.

아래는 예시다.

자 그러면 시작해보자!

1. 뼈대만들기

위에 타이틀 박스 한개와
중간에 닉네임, 응원댓글, 버튼 들어가는 박스 한개
마지막으로 댓글 같은 박스 한개
총 3개의 div 만들면 된다.

	<div class="title">
        <h1>이재성 팬 방명록</h1>
    </div>
    <div class="power">
        <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">닉네임</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="mycards" id="comment-list">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>

총 3개 div라고 했지만 마지막 댓글부분은 복사 붙여넣기라서 1개라고 말한거다.
5번째줄 <div class="form-floating mb-3"> mb-3를 안붙여서 안에 박스들이 여백 없이 딱 붙어서 나오더라... 
참고...!

2. 살 붙이기

css 코드 작성에는 딱히 주의할점은 없다.
공통적으로 오는 코드들이 있는대
그 점만 주의하면 된다.

 * {
            font-family: 'Noto Serif KR', serif;
        }
        

        
        .title {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg');
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .power {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .power > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }

---

html, css 과제를 하면서 몇가지 궁금한게 생겼다.
강사님들이 당연하게 생각하는것들이
왜 당연한지 몰랐다...
그래서 내가 직접 검색하고 알아낸 해답들이다.

background-image 관련

https://aboooks.tistory.com/165

diplay 관련

https://heropy.blog/2018/11/24/css-flexible-box/

아주 쉽게 설명이 되어있다. 혹시나 막히면 참고하길 바란다.

---

1주차 강의와 과제를 완료했다.
생각보다 쉬운것도있었으며 또 생각보다 어려운것도 있었다.
강의가 초보자가 듣기에는 매우 빠른편이다.
내 스스로 열심히 공부하고 또 공부해야겠다.
금, 토, 일 가족행사가 많아서 공부를 잘못했지만...
그래도 하는대까지는 해야겠다.

아 그리고 내가만든 과제물이다 ㅎㅎ
좋아하는 가수가 딱히 안떠올라서 그냥 내 방명록 만들었다.
나는 나를 사랑하니까...