개발 공부 일지/웹

숙제 아이유 팬명록 만들어 보자

1주차 강의 내용을 바탕으로 숙제를 해야 한다.

위 스샷처럼 팬명록을 만들어야 한다.

아이유 팬명록을 한번 만들어 보자!

<body>
    <div class="mytitle">
        <h1>아이유 팬명록</h1>
    </div>
</body>

<style>
    .mytitle {
        width: 100%;
        height: 250px;

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://cdn.updownnews.co.kr/news/photo/201709/72328_46492_3517.jpg');
        background-position: center;
        background-size: cover;

        color: white;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

여기까지는 미리 알려주셔서 이제부터 하나씩 만들어 보세!

<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">닉네임</label>
</div>

닉네임 box를 만들어 주고 정렬을 해주고 그림자까지 만들어 주었다.

.mypost {
    width: 95%;
    max-width: 500px;
    margin: 20px auto 20px auto;
    box-shadow: 0px 0px 3px 0px black;
    padding: 20px;
}

<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
              style="height: 100px"></textarea>
    <label for="floatingTextarea2">응원댓글</label>
</div>

응원 댓글도 추가해주고~

<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&family=Noto+Serif+KR&display=swap" rel="stylesheet">
<style>
    * {
        font-family: 'Noto Serif KR', serif;
    }

폰트도 설정해주었다.

<div class="mybtns">
    <button type="button" class="btn btn-dark">응원남기기</button>
</div>

.mybtns {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;

    margin-top: 15px;
}

<div class="mycards">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">세균맨</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">세균맨</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">세균맨</cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>

.mycards {
    width: 95%;
    max-width: 500px;
    margin: auto;
}
.mycards > .card {
    margin-top: 10px;
    margin-bottom: 10px;
}

제대로 된 건지... ㅠ,.ㅠ

'개발 공부 일지 > 웹' 카테고리의 다른 글

Javascript 복습 - 홀짝 판별 onclick 함수 만들어보기 (0)	2022.09.03
1주차 숙제하기 (1)	2022.09.02
Javascript 기초 문법 배우기 (1) (0)	2022.09.01
포스팅 박스 만들기 (0)	2022.09.01
부트스트랩 활용하기 (0)	2022.09.01

Contents

새소식

인기 검색어

숙제 아이유 팬명록 만들어 보자

'개발 공부 일지 > 웹' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바