스파르타 코딩 1주차 복습겸 만든 웹페이지 (html,css)

스파르타 코딩 웹페이지 개발 5주 차 강의 완강 후 이제는 복습 겸 1주 차부터 만들어 가고 있습니다. 

이번엔 단  순히 html과 css만을 이용해서 만들기를 먼저 시작했어요.

<div class="banner">
    <h1>하 루 한 줄 감정 기록</h1>
    <button type="button" class="btn btn-outline-danger">기록하기</button>
</div>

<div class="write">
    <div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon1">기록하는 날짜</span>
        <input type="text" class="form-control" placeholder="2022/12/25 일요일" aria-label="Username"
               aria-describedby="basic-addon1">
    </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>
    <div class="input-group mb-3 top">
        <label class="input-group-text" for="inputGroupSelect01">감정 이모티콘</label>
        <select class="form-select " id="inputGroupSelect01">
            <option selected></option>
            <option value="angry">🤬</option>
            <option value="Despair">😱</option>
            <option value="awkward">🤔</option>
            <option value="sad">😂</option>
            <option value="smile">😀</option>
        </select>
    </div>
</div>

<div class="note">
    <div class="card text-white bg-dark mb-3 box-white" style="max-width: 500px;">
        <div class="card-header">2022/12/25</div>
        <div class="card-body">
            <p class="card-text">케이크와 와인으로 따뜻한 크리스마스 보냄.</p>
        </div>
</div>

-html 완성본 

<style>
    .banner{
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("https://i.pinimg.com/564x/9d/7a/64/9d7a64553fc9a0f56548aaa0b690fac8.jpg");
        background-size: cover ;
        background-position: center;


        height: 300px;
        color: white;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .banner>button{
        color: white;
        margin-top: 10px;
        width: 150px;
    }

    .write{
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0 auto;
        padding: 20px;

        box-shadow: 0px 0px 3px 0px gray;
    }
    .top{
        margin-top: 10px;
    }

    .note{
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0 auto;
    }

</style>

-style 완성본

 

사실 이때 까지 만든 코드의 내용들을 가져와다가  붙여 넣기 하고 수정해서 만든 것이어서 어렵지 않게 만들었습니다.

 

부트스트랩 css코드 적용하기.

"감정기록"을 입력받을 박스는 부트스트랩을 가져와서 사용했는데요. 이미 적용되어 있는 class의 이름을 이용해 내 코드에서 css 수정이 잘 안 되더라 고요. 대신에 class를 하나 더 추가해서 적용할 수 있었습니다.

"top"이라는 class를 제 코드에서 만들어 css를 적용 하니,

적용이 잘되는군요. "감정 기록"과  "감정 이모티콘" 상자가 서로 딱 붙어가지고.. 안 떨어졌었는데 보기 좋게 떨어졌습니다. 

 

감정 이모지 추가

스파르타 코딩에서 알려준 이모티콘 페이지에서 가져와 붙여 넣었습니다. 지금은 쉽지만 나중에 이 이모티콘 이미지들을 어떻게 받아 올지 조금 머리가 아프네요. 

이런 식으로 고를 수 있습니다.

 

width를 설정하지 않으면 가운데 설정이 먹히지 않는다.

 

처음엔 margin으로만 설정해 놓았더니.. 가운데로 가지 않았습니다. 알고 보니 width를 설정해야 하네요. 

강의를 잘 봤다고 생각했지만 역시 ㅋㅋ 이런 놓치는 부분들이 존재합니다. 

-width설정하기 전 card의 모습. 

-width설정 후 card의 모습. 

 

그리고 지금까지의 완성본

지금까지 html과 css만을 사용하여 완성한 모습입니다. "크리스마스 분위기"를 내보았습니다.  기존에 배웠던 코드를 인용하고 수정하고 부트스트랩을 이용하니 어렵지 않았습니다. 이제 2주 차를 적용해 봐야겠죠~