본문 바로가기
개발/JSP

[CSS] 로그인 페이지 디자인 CSS

by m_.9m 2022. 6. 29.
*{margin: 0 auto; padding: 30;}

body * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Geogrotesque', 'YoonGothic', sans-serif;
    font-weight: inherit;
    font-size: inherit;
    background-image: url('css/background.jpg');
	background-size: 100%;
}

  a { 
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025rem;
    color: #111;}
    a:visited { text-decoration: none; }
    a:hover { text-decoration: none; }
    a:focus { text-decoration: none; }
    a:hover, a:active { text-decoration: none; color: black;} 


a[login] {
text-align: right; 
margin-left: 20px;
margin-bottom: 10px;
}
    
  
h1
{
    font-size: 3rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
    letter-spacing: -0.075rem;
    text-align: center;
    margin-bottom: 20px;
}
 
.login_box {

    width: 60.5rem;
    margin: 0 auto;
    padding: 50px;
}

input {
    writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field;
    margin: 5px;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}

input[type="text"], input[type="password"]
	{
    height: 5rem;
    width: 100%;
    padding: 1rem 1.1875rem;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
    line-height: 1.2rem;
    letter-spacing: -0.025rem;
    font-family: 'Geogrotesque Md', 'YoonGothic', sans-serif;
}


button {
    width: 100%;
    height: 5rem;
    appearance: auto;
    writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    margin-top: 10px;
    margin: 5px;
    padding: 1px 6px;
    border-width: 0.5px;
}