[스파르타코딩클럽] 나홀로 코딩 1일차

myoyeon·2020년 12월 29일
0

나홀로코딩

목록 보기
1/2
post-thumbnail

디자이너도 코딩이 필수인 시대

나만 없어 코딩 능력...😭

계속 코딩 교육을 검색하다보니 광고 검색에 떴던 무료 크리스마스 나홀로코딩 교육. 정식 수강신청을 하기에 앞서 따라해보았다.

[1일차] html, css 기본 내용을 활용한 로그인 페이지 만들기


수업 예제를 조금 응용하여 input과 button css를 변경해서 숙제를 제출했다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

    <style>
        * {
            @font-face {
                 font-family: 'NEXON Lv1 Gothic OTF';
                 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
                 font-weight: normal;
                 font-style: normal;
}
        }

        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }

        .wrap {
            margin: 10px auto;
            width: 300px;
        }

        .mybtn {
            /* Button/Primary */
            margin: 30px 0px 0px 0px;

            /* button */
            color: white;
            width: 300px;
            height: 50px;

            background-color: red;
            border-radius: 100px;
            border-color: red;

        }
        .line{
            width: 300px;
            align-items: center;
			border: none;
			border-bottom: solid 2px red;
		}
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
        </br> <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
        <div>
            <p>
                ID</br> <input type="text" class="line"/>
            </p>
            <p>
                PW</br> <input type="password" class="line" />
            </p>
        </div>
        <button class="mybtn">로그인하기</button>
    </div>

</body>


</html>

https://spartacodingclub.kr?f_name=%EA%B9%80%EB%AF%BC%EC%A0%95&f_uid=5f8c5ce0fbe84500092ad179

profile
영원히 철들지 않는 성장마인드셋 프로덕트 디자이너

1개의 댓글

comment-user-thumbnail
2020년 12월 29일

디자이너가 퍼블도 공부하시고 대단하십니당!!

답글 달기