본문 바로가기
백엔드 과정(2023)

1주차

by Enzo.enzo 2023. 11. 14.

 1) 개발의 기본 웹개발

       세가지 구성 요소 HTML, CSS, java script + bootstrap

       각각 웹의 뼈대와 시각화 인터렉션 을 담당

 

       코드 스니펫/ VS code 다운

           Open in browser,korean 다운 실시간 live server

       

 

       파일 경로 설절 후 새파일생성. 코드입력 

        파일명.html

        코드입력 html:5 

        제목과 내용 입력 

        ctrl s 로 저장 후 alt b 로 창열기

 

      뼈대: 헤드, 바디

       헤드/ 제목 파비콘 검색엔진 link style script meta

       바디/ span img input textarea 태그

 

      로그인 만들기

       h1 로그인 페이지

      줄바꿈<br> or <p> </p>구역설정

      버튼, 인풋텍스트

 

     스타일

      색바꾸기

      헤드-스타일- 이름지정 . 이름{color:red;}

       해당 이름의 글자샛이 바디에서 변경됨 class="이름"

문단별 선택영역, 빨간 다이브로 문단 전체 옮기기 가능

     

      Text align, padding(안쪽여백) border radius(배경 공구르기)

margin: top right bottom left px;

      그림

       background image :url('')

                             Position: center

                             Size: cover

 

    드래그 +  alt shift f 줄정리 / ! 기본코드 불러오기 / 비밀번호 type="passward"

  

로그인 페이지 

더보기

      

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>
    <style>
        .mytitle {
            width: 300px;
            height: 200px;
            background-color: green;
            color: white;
            text-align: center;

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

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

        .wrap {
            margin: 50px auto 0px auto;
            width: 300px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력하시오</h5>
        </div>
        <p>ID : <input type="text"></p>
        <p>PW : <input type="password"></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

 

 

       

'백엔드 과정(2023)' 카테고리의 다른 글

코틀린 2주차  (2) 2023.12.08
미니 프로젝트 . 팀별 홈페이지 제작  (2) 2023.12.05
3주차  (2) 2023.12.05
2주차  (0) 2023.12.04
1주차- 2 앨범만들기  (0) 2023.11.27

관련글

티스토리툴바