[웹개발 종합반] 1주차 개발일지 - (1)

zzzzsb·2022년 2월 9일

Sparta

목록 보기

1/15

1주차

수업 목표

서버/클라이언트 역할에 대한 이해
HTML/CSS 기초지식 이해 + 부트스트랩
Javascript 기초문법 이해

01. 1주차에 배울 것

서버/클라이언트/웹의 동작 개념

웹의 동작개념 (HTML을 받는 경우)

우리가 보는 웹페이지는 모두 서버에서 미리 준비된 것을 "받아서" "그려주는" 것.
ex) 새로고침 했을때 재로딩 되는것 -> 서버한테 다시 요청해서 받아옴.

브라우저의 역할

1) 요청을 보냄
-> 누구에게? 서버의 "API"에
ex) https://naver.com/
-> "naver.com" 이라는 이름을 가진 서버에 있는 "/" 창구에 요청을 보낸것!

2) 받은 HTML 파일을 그려줌

웹의 동작개념 (데이터만 받는 경우)
ex) 영화 예매할때 새로고침 하지 않아도 좌석이 실시간으로 보여지는 것

-> 데이터만 주고받는 형태의 예시 (JSON 형식)

1~5주차 학습 내용

1주차: HTML, CSS, Javascript

2주차: jQuery, Ajax, API

Javascript로 서버에 데이터 요청/받는 방법

3주차: Python, 크롤링, mongoDB

파이썬 문법 학습 + 라이브러리 활용해 데이터 가져오기
몽고DB 데이터베이스 다뤄보기

4주차: 미니프로젝트1, 미니프로젝트2

내 컴퓨터가 클라이언트 = 서버 둘다 역할 -> "로컬 개발환경"

5주차: 미니프로젝트3, AWS

AWS로 프로젝트 배포해보기

02. 필수 프로그램 설치

Pycharm 설치
JetBrains 회원가입
AWS 가입 등

03. HTML, CSS 기본 내용

HTML: 뼈대
CSS: 꾸미기

HTML 기초

HTML은 크게 head와 body로 구성됨
head안에는 페이지의 속성 정보, body안에는 페이지의 내용을 담음
head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
- 페이지의 속성을 정의하거나, 필요한 스크립트 등을 부르는 등 눈에 보이지 않는 것들 중 필요한 것을 담는 것.
body 안에 들어가는 대표적인 요소들

<!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>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

html 코드 실행화면

코드 자동정렬(맥): cmd+option+L

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

로그인 페이지 출력 예시

01_login.html

<!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>

💡 <p> 문단태그 이용하면 자동 줄바꿈 됨!

05. CSS 기초

HTML 부모-자식 구조

빨간색 div 안에 초록색/파란색 div가 들어있는 구조
빨간색 div를 옮기면 자식인 초록색/파란색 div도 함꼐 이동함
초록색 div의 글씨색을 바꾸면 자식은 나는버튼1의 글씨색도 변경됨

CSS 기초

CSS는 <head> ~ </head> 안에 <style> ~ </style> 로 공간 만들어서 사용함.

ex. 로그인 페이지 글씨 색을 red로 바꾸고 싶다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <style>
        .mytitle {
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

꾸며줄 대상을 가리키기 위해 mytitle 클래스를 만들어준다.
style 태그에서 mytitle 클래스를 꾸며주는 내용은 .mytitle {...} 이렇게 써줌.

CSS 예제

배경관련

background-color

background-image

background-size

사이즈

width

height

폰트

font-size

font-weight

font-famliy

color

간격

margin

padding

06. 자주 쓰이는 CSS 연습하기

[연습할 것들]

h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding

CSS로 로그인 페이지 꾸미기 예시

margin / padding

margin: 바깥여백

padding: 안쪽여백

.mytitle 클래스

👉 배경 컬러 넣기

background-color: green;

👉 영역 가로/세로 크기 지정

width: 300px;
height: 200px;

👉 배경 커버로 이미지 넣기 (+이미지 중앙정렬)

background-image: url('이미지 주소');
background-position: center;
background-size: cover;

👉 테두리 곡선 주기

 border-radius: 10px;

👉 텍스트 중앙정렬

text-align: center;

👉 top(위쪽)에 padding(안쪽 여백) 주기

padding-top: 40px;

로그인 화면을 가운데로 가져오려면?

로그인 화면을 div태그로 묶고, css로 width 설정한뒤 margin: auto;로 양쪽 여백을 동등하게 해준다.

👉 양쪽 여백 동등하게

margin: auto;

버튼을 가운데로 가져오려면?

버튼은 margin: auto; 적용해도 가운데 위치하지 않음
html에는 글속성/박스속성이 있는데, 박스속성은 가로/세로 개념이 존재하지만 글속성은 가로/세로 개념이 존재하지 않음 -> 글속성을 박스속성으로 변경해준 후 옮겨줘야함.

👉 박스속성으로 강제변환

display: block;

👉 버튼 가운데로 가져오기

.mybtn {
	display: block;
	margin: auto;
}

01_login.html

<!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 {
            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;
        }
    </style>
</head>

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

</html>

클래스 중첩

<button class = "mybtn red-font"> ~ </button>

mybtn 클래스와 red-font 클래스를 button에 둘다 적용

zzzzsb

성장하는 developer

다음 포스트

[웹개발 종합반] 1주차 개발일지 - (1)

Sparta

1주차

수업 목표

01. 1주차에 배울 것

서버/클라이언트/웹의 동작 개념

1~5주차 학습 내용

02. 필수 프로그램 설치

03. HTML, CSS 기본 내용

HTML 기초

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

로그인 페이지 출력 예시

01_login.html

05. CSS 기초

HTML 부모-자식 구조

CSS 기초

CSS 예제

06. 자주 쓰이는 CSS 연습하기

CSS로 로그인 페이지 꾸미기 예시

.mytitle 클래스

로그인 화면을 가운데로 가져오려면?

버튼을 가운데로 가져오려면?

01_login.html

[웹개발 종합반] 1주차 개발일지 - (2)

0개의 댓글