개발하는 체대생

웹 개발 종합반 - 1주차(1) 본문

웹페이지종합반

웹 개발 종합반 - 1주차(1)

개발하는체대생

[1주차 수업목표]

1주차(1)

1. 서버와 클라이언트의 역할에 대한 이해

2. HTML, CSS의 기초 지식을 이해

-------------------------------------------------------------------------

1주차(2)

(+부트스트랩 활용)

3. Javascript 기초 문법

 

1. 서버와 클라이언트의 역할에 대한 이해

서버(server)란? 

서버(server)는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미한다.

즉, 서버란 '서비스를 제공하는 컴퓨터'로 웹페이지, 사이트, 앱을 저장하는 컴퓨터라고 할 수 있다.

 

서버의 역할?

서버는 주로 클라이언트의 요청을 받아서 처리하고, 이를 다시 클라이언트에 응답을 보내는 역할을 한다.

 

클라이언트(client)란?

클라이언트(client)란 서버와 이어진 모든 단말기와 단말기에서 이용하는, 웹에 접근하는 소프트웨어를 지칭한다.

즉, 클라이언트란 '서비스를 사용하는 컴퓨터(유저)'를 의미한다.

 

클라인언트의 역할?

클라이언트는 주로 사용자의 입력을 주로 처리하며 이를 서버에 요청을 보내는 역할을 한다.

 

1-1. 웹 동작 개념 (HTML을 받는 경우)

1-2. 웹 동작 개념 (데이터만 받는 경우)

 

 

2. HTML과 CSS

1) HTML과 CSS의 개념

HTML 이란? 

HTML(Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.

쉽게 말해서 HTML 은 구역과 텍스트를 나타내는 코드로 '뼈대'라고 생각하면 된다.

 

CSS란? 

CSS(Cascading Style Sheets)는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.

쉽게 말해서 CSS는 잡은 구역을 꾸며주는 코드로 '꾸미기'라고 생각하면 된다.

 

2) HTML과 CSS의 기초

HTML의 기초

HTML은 크게 <head>와 <body>로 구성된다.

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

 

▼HTML 기초

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

* 팁 ->  Pycharm에서 코드 정렬이 제대로 되어 있지 않을 때는 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용할 수 있다. 

 

HTML 실습(로그인 페이지)

로그인페이지

로그인 페이지

ID:

PW: 

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

+HTML의 부모 자식구조

html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받게된다.

 

CSS의 기초

CSS는 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다.

* CSS는 다 외우려고 하지 말고 필요할 때 그때 그때 찾아서 사용하자!

 

CSS 실습(로그인 화면 만들기)

스파르타코딩클럽 | 로그인페이지

로그인 페이지

아이디, 비밀번호를 입력해주세요

ID:

PW: 

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

+ margin 과 padding 의 차이 알기  (→ margin은 바깥 여백을, padding은 내 안쪽 여백을 의미한다.), border는 경계선을 의미한다.

 

'웹페이지종합반' 카테고리의 다른 글

[jQuery] 클래스 토글(Class Toggle) 기능  (0) 2022.09.20
'웹페이지종합반' Related Articles more
Comments