JAVA를 잡아라!...

HTML, CSS_NAVER 로그인 페이지_(진행중...) 본문

Front

HTML, CSS_NAVER 로그인 페이지_(진행중...)

onivv 2024. 1. 2. 22:56

login.html

<!DOCTYPE html>
<html lang="ko">
<!-- head: 파일경로 -->
<head>
<meta charset="UTF-8">
<title>네이버:로그인</title>
<!-- 현재 html파일에 css파일을 <style>로 적용, css경로 알려줌 
     ../가 현재 폴더를 나가서 CSS폴더를 찾아 login.css 파일 찾기 -->
<link rel="stylesheet" href="../CSS/login.css">

</head>
<!-- body: 페이지 내용 -->
<body>
    <div id="login-main">
        <!-- 영역: header, contents, footer -->
    	<div id="header">
            <div id="select-language">
                <select title="언어선택">
                    <option value="ko_KR">한국어</option>
                    <option value="en_US">English</option>
                    <option value="zh-Hans_CN">中文(简体)</option>
                    <option value="zh-Hant_TW">中文(台灣)</option>
                </select>
            </div>
            <div id="naver-logo">
                <a href="https://www.naver.com">
                    <h1>NAVER</h1>
                </a>
            </div>
        </div>

        <div id="contents">
            <div id="contents-1">
                <div>
                    <span>ID 로그인</span>
                </div>
                <div>
                    <input type="text" placeholder="아이디"/>
                    <input type="password" placeholder="비밀번호"/>
                </div>
                <div></div>
                <div></div>

            </div>
            <div id="contents-2"></div>
            <div id="contents-3"></div>
        </div>

        <div id="footer"></div>
    </div>
</body>
</html>

 

login.css

/* login-main이라는 id를 가진 요소에게 적용 */
#login-main{
    width: 458px;
    margin: 0 auto;
    background-color: rgb(245, 250, 243);
}

#header{
    text-align: center;
}

#select-language{
    text-align: right;
}

#select-language > select{
    border-radius: 0;
    border-color: #ccc;
    height: 30px;
    width: 95px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    padding: 4px 10px 6px 8px;
}

#naver-logo{
    display: inline;
}

#naver-logo > a{
    text-decoration-line: none;
}

#naver-logo > a > h1{
    color: rgb(37, 188, 37);
    font-size: 40px;
}

#contents-1{
    border: solid 1px #e3e3e3;
    height: 400px;
    border-radius: 6px;
}
/* 첫번째 div : 배경 베이지색, 높이 60, 자식 inline요소 가운데정렬 */
#contents-1 > div:first-child{
    background-color: beige;
    height: 60px;
    text-align: center;
}
/* inline요소 : 배경 핑크색, 위 아래 간격 블록요소와 동일 */
#contents-1 > div:first-child > span{
    background-color: pink;
    line-height: 60px;
    font-size: 16px;
    font-weight: 500;
}

#contents-1 > div:nth-child(2){
    background-color: rgb(162, 225, 13);
    height: 95px;
    padding: 20px 28px 5px 28px;
}

#contents-1 > div:nth-child(2) > input{
    display: block;
    width: calc(100% - 20px);
    height: 43.5px;
    border: solid 1px #e3e3e3;
    padding-left: 20px;
    font-size: 15px;
}

#contents-1 > div:nth-child(2) > input:first-child{
    border-radius: 6px 6px 0 0;
}

#contents-1 > div:nth-child(2) > input:nth-child(2){
    border-radius: 0 0 6px 6px;
}

#contents-1 > div:nth-child(2) > input::placeholder{
    color: #e3e3e3;
}

 

 

'Front' 카테고리의 다른 글

비동기 처리_ID 중복검사  (0) 2024.01.15
비동기 처리_개념  (0) 2024.01.15
JavaScript_회원가입 폼 만들기  (1) 2024.01.04
JavaScript_개념  (2) 2024.01.03
HTML_개념  (1) 2023.12.27
'Front' Related Articles more