본문 바로가기
배운내용 정리

내배캠 로그인 페이지 만들기

코린이star 2023. 9. 27. 22:08

사전캠프 1주 차 웹개발 강의에서는 웹 브라우저 작동원리, css, css에 필요한 폰트를 어떻게 사용하는지에 대해 공부하면서 간단한 프로젝트를 만들어 보았다.

 

1. 웹 브라우저 작동

작동 이미지

중요한 3가지를 간단하게 표현하면
html은 뼈대

css는 꾸미기

JS는 움직이기

 

2. 웹페이지 만들기 시작 개발환경

개발환경 VS Code(Visual studio Code)

 

HTML tag기초 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

기초코드 실행화면

위 코드를 통해 간단하게 어떤 식으로 기능을 할 수 있는지 확인했다.

 

head 안에는 페이지의 속성정보 body에는 페이지의 내용을 담는다.

  • head 안에 들어가는 대표적인 요소들: meta, script, style, link, title 등
  • body 안에 들어가는 대표적인 요소들: span, img, input, textarea 등

 

 

3. 간단한 로그인 페이지 만들기

 

실행코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>로그인페이지</title>
    </head>
    <body>
        <h1>로그인 페이지</h1>
        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <button>로그인하기</button>
    </body>
</html>

title을 통해 사이트 제목을 넣어주고 body로 넘어가서 h1태그를 통해 가장 큰 페이지 제목을 만들어준다. 그다음 ID와 PW 부분을 작성하기 위해 p태그를 통해 문단 구역을 만들어 주고 input 기능을 사용하여 입력가능 하도록 했다. 그다음 버튼을 통해 마무리하면 끝!

 

로그인 페이지 실행 결과

 

4. CSS로 페이지 꾸미기

기본적으로 알아두면 좋은 CSS문법

        배경관련 background-color
background-image
background-size 
         사이즈 width
height
           폰트 font-size
font-weight
font-family
color
           간격 margin
padding

 

위에서 만든 간단한 ID PW 입력 페이지에서 CSS의 기초를 적용해 보았다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <style>
        .mytitle {
            color: red;
            font-size: 40px;
        }

        .mybtn {
            font-size: 12px;
            color: white;
            background-color: green;
        }

        .mytxt {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text" /></p>
    <p class="mytxt">PW: <input type="text" /></p>
    <button class="mybtn">로그인하기</button>
</body>

</html>

CSS 기초는 style태그를 만드는 것부터 시작!

h1태그에 class명찰 mytitle을 달아주고 style부분에  mytitle에 대한 꾸미기 시작! 꾸미는 것은 위의 표를 참고해 작성했다.

나머지 p태그에 있는 input과 button도 마찬가지로 작성!

CSS 적용 후 로그인 페이지 실행 결과

 

5. 로그인 페이지에 이미지 넣어보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mytitle {
            width:300px;
            height:200px;
            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <p>ID : <input type="text" /></p>
    <p>PW : <input type="text" /></p>
    <button>로그인하기</button>
</body>
</html>

이미지를 넣기전 들어갈 이미지의 공간을 만들어야 한다. 따라서 div태그를 통해 레이아웃을 나눠 공간을 나눠준다.

h1 태그에 있던 class 명찰 mytitle를 div태그에 옮겨 주면 div에 대한 꾸미기가 가능!

추가적으로 공간에 대한 width, height를 설정해 주고 background-color를 통해 색을 입혀주면 아래 사진과 같이 초록색으로  변경되며, 글자 색과 text의 위치를 옮겨주면 끝! 여기서 align은 수평으로 정렬할 때 사용한다.

padding은 안쪽여백으로 padding-top을 통해 위쪽기준으로 여백을 확보 후 

박스의 모서리를 둥글게 하기 위해 border-radius를 사용하여 크기 설정후 실행해 보면 아래 사진과 같은 결과가 나온다.

div 설정과 이미지 넣기전 공간 확인 및 위치 정렬

        .mytitle {
            width:300px;
            height:200px;
            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-position: center;
            background-size: cover;
        }

추가적으로 마지막 이미지가 들어갈 background-image에 url을 입력해주고 이미지의 위치 background-position 이미지 사이즈 background-size를 위 코드와 같이 설정해 주면 끝!

이미지추가후 결과 사진

6. 이미지 위치 옮기기 & 폰트

마지막으로 내가 만든 로그인페이지의 위치를 중앙으로 옮겨보기 & 폰트사용해보기!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>
    <style>
        *{
            font-family: 'Dongle', sans-serif;
        }
        .mytitle{
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-position: center;
            background-size: cover;
        }
        .wrap{
            width: 300px;
            margin: 50px auto 0px auto;


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

body부분에서 div태그를 통해 로그인페이지에 대한 전체 레이아웃을 만들고, class="wrap" 태그를 달고 style에서. wrap에 대해서 width와 margin을 설정해 주면 위치 설정 끝! 여기서 margin 값은 순서대로 top, right, bottom, left 순이다.

 

폰트는 구글 폰트를 사용했다.

사이트 url: https://fonts.google.com/ 

들어가서 마음에 드는 폰트 클릭!

다음 Remove Regular 400 클릭!

 

@import클릭 후 <style> 사이에 있는 코드 복사!  </style> 

그다음 코드에서 style시작 부분 바로 아래에 추가하기

<style>
        *{
            font-family: 'Dongle', sans-serif;
        }
        .mytitle{
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-position: center;
            background-size: cover;
        }
        .wrap{
            width: 300px;
            margin: 50px auto 0px auto;
        }
       
    </style>

추가 후에 font-family: 'Dongle', sans-serif 추가하면 완성!

완성 이미지

 

'배운내용 정리' 카테고리의 다른 글

스파르타 플릭스 JQuery 적용하기  (0) 2023.10.05
JQuery 및 추억앨범에 적용하기  (0) 2023.10.05
Javascrip  (1) 2023.10.05
스파르타 플릭스 만들기  (1) 2023.10.04
나만의 추억앨범 만들기  (2) 2023.10.04

'배운내용 정리' Related Articles

티스토리툴바