멋사 프론트엔드 스쿨 5기 TIL - HTML & CSS - 3월 15일

크롱·2023년 3월 15일

멋쟁이사자처럼 프론트엔드 스쿨 5기 - HTML & CSS

목록 보기

10/11

Following your bliss is a recipe for paralysis if you don’t know what you are passionate about. A better motto for most youth is “master something, anything”. Through mastery of one thing, you can drift towards extensions of that mastery that bring you more joy, and eventually discover where your bliss is.

📒 두근두근 웹사이트 3종 세트

🌈 로그인 페이지

-> max-width: 1224px;

HTML

<header>
        <div class="header-wrap">
            <h1>
                <a href="#"><img src="./img/logo.svg" class="logo"></a>
            </h1>
            <div>
                <a href="#" class="btn-join">회원가입</a>
            </div>
        </div>
</header>

CSS

<style>

body {
    margin: 0;
    background: #fffaf0;
}

h1, p {
    margin: 0;   기본 마진값을 없애주면 h1 안 이미지 위에 여백이 없어짐
}

header {
    background: white;
}

.header-wrap {
    display: flex;   
    justify-content: space-between;
    align-items: center;  /* height가 있어서 여백이있는채로 가운데정렬됨 */
    width: 1224px; /* 마진 오토로 가운데 배치하려고 정해줌 */
    max-width: calc(100% - 60px);
    margin: auto; 
    height: 120px;
}

.logo {
    height: 75px;
}

.btn-join {
    display: inline-block; /* 인라인블록 한 이유는 줄바꿈안일어나게하려고 */
    font-size: 14px;
    text-decoration: none;
    color:#5a6a72;
    background: url("/img/icon-join.svg") no-repeat 0.8em center / 2em ;  
    padding: 1em 1em 1em 2.8em;  마지막을 1em으로 주면 겹침.
}

</style>

회원가입 옆에 아이콘을 넣어주기 위해 background속성 하고 padding을 줘서 사용자가 클릭할때 여유롭게!

Main & Footer

HTML

<main>
        <h2 class="img-title">
            <img src="../img/logo.svg" alt="">
            <strong class="line">로그인</strong>
        </h2>
        <form class="form-wrap">
            <label class="label-style" for="email">이메일</label>
            <input class="input-style" type="email" id="email" required>
            <label class="label-style" for="pw">비밀번호</label>
            <input class="input-style" type="password" id="pw" required>
            <button class="btn" type="submit">로그인</button>
        </form>
</main>
<footer>
        <p>Copyright 2023. WENIV ALL rights reserved.</p>
</footer>

CSS

<style>
main {
    width: 392px; /*메인태그에 width를 먼저 정해줌! 
    input&button width:100% 해서 딱맞게*/
    margin: 71px auto 52px;
}

.img-title {
    text-align: center;
    font-size: 24px;
  }
.img-title img {
    /* 브라우저 width가 줄어도 항상 가운데에 */
    display: block;
    margin: auto;
    height: 120px;
    margin-bottom: 29px;
  }
  .line {
    box-shadow: inset 0 -0.6em rgba(255, 79, 110, 0.2);
    border-bottom: 2px solid #ff4f6e;
  }

/* form */

.form-wrap {
    margin-top: 40px;
}

.label-style, .input-style{
    display: block; /*줄바꿈*/
    width: 100%;
    box-sizing: border-box;
}

.label-style {
    margin-bottom: 8px;
    font-size: 14px;
    color: #29363d;
}

.input-style {
    height: 48px;
    font-size: 16px;
    transition: box-shadow 0.2s;
    border: none;
    background: #FFFFFF;
    margin-bottom: 24px;
    border-bottom: 1px solid #677880;
    border-radius: 4px 4px 0px 0px;
}

.input-style:hover {
    box-shadow: 0 2px 0 0 #2e6ff2;
}
.input-style:focus {
    outline: none;
    box-shadow: 0 0 0 2px #2e6ff2;
    border-radius: 4px;
}


/* button */

.btn {
    width: 100%;
    background: #29363D;
    border-radius: 4px;
    display: block;
    height: 48px;
    border: 0;
    /* padding: 0; */
    font-size: 16px;
    color: white;
    font-weight: bold;
}

.black-btn:not(:disabled) {
    cursor: pointer;
}


.black-btn:disabled {
    opacity: 0.2;
}

/*footer*/

footer p {
    text-align: center;
    font-size: 12px;
    color: #677880;
  }
</style>

회원가입 페이지랑 거의 똑같다.

🌈 메인 페이지

`<main>`

<style> 

.container main {
    flex-shrink: 0; 
    /*줄어들게안할거야 */
    flex-basis: 456px;
    border-right: 1px solid #ff4f6e;
    padding-right: 40px;
    padding-top: 56px;
    box-sizing: border-box; 
    /*flex-basis 에서 40px더한 이유 padding-right 에 40px먹었으니까 인듯 */
    min-height: calc(100vh - 120px);  
    /* 헤더 높이 뻄 스크롤생기는거막음 */
}
</style>

제목 옆에 하트아이콘

.heart {
    background: url(../img/heart.svg) no-repeat 0 center / 1.4em;
    padding-left: 1.4em;
    font-size: 16px;
}

`<section>`

가상요소로 음표이미지 넣기

<style>
/*음표 이미지*/
.diary-article::before,
.diary-article::after {
    content:"";
    display: block;
    width: 80px;
    height: 40px;
/*  background: royalblue; */
    position: absolute;
}

.diary-article::before {
   top:-20px;
   left: 30px;
   background: #fffaf0 url("../img/quote-start.svg") no-repeat 0 0 / contain ;
}

.diary-article::after {
    bottom: -20px;
    right: 30px;
    background: #fffaf0 url("../img/quote-end.svg") no-repeat 0 0 / contain ;
}

</style>