휴먼교육센터 개발자과정 59일차

조하영·2022년 10월 28일
0

휴먼교육센터 코딩공부

목록 보기
46/66

  1. 서버 클라이언트 구조
    서버와 클라이언트는 네트워크라는 기술로 연결된것
    서버는 서비스를 제공하는 것 우리는 웹서비스를 개발할 목적으로 웹서버를 사용한다.
    클라이언트는 서버를 이용한것 우리는 웹서비스를 이용하므로 웹브라우저를 사용한다.

    IP, Port번호 - IP는 서버한대, Port는 프로그램의 번호
    웹서버는 포트번호 80번을 사용. (참고 오라클: 1521, Mysql :3306)

  2. 클라이언트의 요청 > 서버의 처리 > 클라이언트에게 응답하는 사이클
    공부하는 팁은 사이클을 먼저 이해하고 문법은 검색이나 책을 참고하여 천천히 완성

    요청할때 웹은 http 라는 프로토콜로 통신을 한다.
    개발자는 정해진 프로토콜 기반에서 개발해야하며 웹서비스는 http프로토콜 기반에서 개발.
    프로토콜 : 통신할때 미리 약속을 정의한것(http , ftp 등)
    https - 서버로 파라미터를 전송할때 암호화시켜서 보낸다. (http의 보안버전)

  3. 클라이언트에서 개발하는 주요언어는
    html - 정적인 문서, 화면을 구성하는 것
    css - 정적인 문서 , html에 스타일 적용(색상, 폰트, 배치)
    Js - html element(태그같은 것)을 제어해서 동적인 문서를 만든다.
    Jquery - 자주 사용하는 Js 문법을 사용하기 편하도록 만들어 놓은것.

추가로 네트워크 OSI 7 Layer를 공부하면 좋다.

  1. html form태그
    action 속성 장소에 method속성의 방식으로 데이터 전달

method 속성 2가지
get - url에 ? 뒤에 데이터를 입력하여 전달
(예 - http://127.0.0.1:5500/Day02/test?name=12)

post - html 문서내 head에 데이터를 숨겨서 전달
(예 - http://127.0.0.1:5500/Day02/test)

같은 변수명으로 전송할 경우 서버에서 스트링 배열로 저장

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="test" method="get">
    <!--테스트라는 곳으로 get방식으로 전송-->
    이름: <input type="text" name="name">
    <!--변수명과 값을 전달-->
    <input type="submit" value="save">
    <!--submit: 폼태그에 액션 속성으로 이동하라-->
  </form>
  <form action="test" method="post">
    <!--테스트라는 곳으로 post방식으로 전송-->
    이름: <input type="text" name="name">
    <input type="submit" value="save">
  </form>
</body>

</html>



실습

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="joinUser" method="get">
    <table border="1" style="border-collapse: collapse;">
      <tr>
        <th colspan="2"> 회원가입</th>
      </tr>
      <tr>
        <th>아이디</th>
        <td>
          <input type="text" name="id">
          <input type="submit" name="chkId" value="중복검사">
        </td>
      </tr>
      <tr>
        <th>비밀번호</th>
        <td>
          <input type="text" name="pwd">
        </td>
      </tr>
      <tr>
        <th>비밀번호확인</th>
        <td>
          <input type="password" name="chkPwd">
        </td>
      </tr>
      <tr>
        <th>이름</th>
        <td>
          <input type="text" name="name">
        </td>
      </tr>
      <tr>
        <th>성별</th>
        <td>
          <input id="man" type="radio" name="gender" value="m">
          <label for="man">남자</label>
          <input id="woman" type="radio" name="gender" value="w">
          <label for="woman">여자</label>
        </td>
      </tr>
      <tr>
        <th>전화번호</th>
        <td>
          010
          <input type="text" name="tel2" style="width: 60px;">
          <input type="text" name="tel3" style="width: 60px;">
        </td>
      </tr>
      <tr>
        <th>희망등급</th>
        <td style="font-size: 10px;" name="grade">
          <select>
            <option value="1">1등급</option>
            <option value="2">2등급</option>
            <option value="3">3등급</option>
          </select>
          *심사후 등급이 결정됩니다.
        </td>
      </tr>
      <tr>
        <td colspan="2" align="center">
          *약관에 동의합니다.
        </td>
      </tr>
      <tr>
        <th>관심사항</th>
        <td>
          <!--같은 변수명으로 여러개의 값이 전송되면 자동으로 배열로 만들어준다-->
          <input id="checkbox" type="checkbox" name="intr" value="스포츠">
          <label for="checkbox">스포츠</label>
          <input id="checkbox" type="checkbox" name="intr" value="여행">
          <label for="checkbox">여행</label>
          <input id="checkbox" type="checkbox" name="intr" value="독서">
          <label for="checkbox">독서</label>
        </td>
      </tr>
      <tr>
        <th>관심지역</th>
        <td>
          <select multiple="multiple" name="areaIntr">
            <option value="1">경기</option>
            <option value="2">충남</option>
            <option value="3">충북</option>
            <option value="4">대전</option>
            <option value="5">부산</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>첨부파일</th>
        <td>
          <input type="file" name="file" value="file">
        </td>
      </tr>
      <tr>
        <td colspan="2" align="center">
          <input type="reset" value="Reset">
          <input type="submit" value="Save">
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

CSS

  1. style태그 안에 작성
  2. 공간분할태그 - 하나의 화면처럼 보이지만 분할된 영역이 있다.
    기본공간 분할태그 - div(block) span(inline)

블록형식 태그 : div, h1, p, 목록태그, 테이블태그
인라인형식 태그 : span, a, input, 글자형식, 입력양식

블록형식의 특징 : 화면 가로 전체가 영역이 된다. 가로세로 지정 가능. 자동 줄바꿈
인라인형식의 특징: 요소가 차지하는 만큼이 영역이 된다. 가로세로 지정 불가능. 자동 줄바꿈 안됨.
인라인-블록형식의 특징 : 가로세로크기 지정 가능. 자동 줄바꿈 없음.

  1. 스타일 작성요령
    가. body에 있는 스타일을 적용할 태그를 선택자를 통해 선택
    선택자의 대표적인 종류 3가지
    a. 태그선택(태그명)- 해당되는 모든 태그에 적용
    예)p{color: crimson;}
    b. id로 선택(#)- 한페이지 안에서 중복안됨
    예) #p1{background-color: black;}
    c. class로 선택(.) - 한페이지 안에서 중복 가능
    예).s1{background-color: cornflowerblue;}
    선택자의 우선순위 태그 > id > class

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      width: 1024px;
    }
    /* p {
      color: crimson;
    } */

    span {
      color: blueviolet;
    }

    #p1 {
      background-color: black;
      color: white;
      display: inline-block;
      width: 400px;
      height: 300px;
    }

    #p2 {
      background-color: blue;
      color: cadetblue;
      display: inline-block;
      width: 400px;
      height: 300px;
    }

    #p3 {
      background-color: rgb(212, 114, 114);
      color: rgb(19, 17, 17);
      display: inline-block;
      width: 200px;
      height: 300px;
    }

    #p4 {
      background-color: blue;
      color: yellow;
      text-align: center;
    }

    .s1 {
      background-color: cornflowerblue;
    }

    .tc {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="p1" class="c1 tc">
    <!--id와 class가 중복될 경우 id가 우선-->
    <p>
      휴먼교육센터 홈페이지
    </p>
    <p>
      Java 기반 웹 개발자 프로그래밍
    </p>
  </div>
  <div id="p2">
    <p>
      22222222222222
    </p>
    <p>
      22222222222222
    </p>
  </div>
  <div id="p3">
    <p>
      33333333333333
    </p>
    <p>
      33333333333333
    </p>
  </div>
  <div id="p4">
    <p>
      44444444444444
    </p>
  </div>
  <div>
    <p>
      55555555555555
    </p>
  </div>
  <span class="s1">
    aaaaaa
  </span>
  <span class="s1">
    bbbbbb
  </span>
  <span>
    cccccc
  </span>
</body>

</html>

실습

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 1024px;
    }

    #header {
      background-color: aqua;
      text-align: center;
    }

    #nav {
      background-color: rgba(0, 119, 255, 0.582);
      text-align: center;
    }

    #section {
      background-color: rgba(91, 6, 139, 0.808);
      width: 800px;
      height: 150px;
      float: left;
    }

    #aside {
      background-color: rgba(245, 9, 146, 0.808);
      width: 210px;
      height: 150px;
      float: left;
    }

    #footer {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="header">
    <p>휴먼모임</p>
    <p>오늘도 즐거운 하루 입니다.</p>
  </div>
  <div id="nav">
    <a>[홈으로]</a>
    <a>[프론트엔드]</a>
    <a>[백엔드]</a>
    <a>[데이터베이스]</a>
  </div>
  <div id="section">
    <p>오늘의 중요 포인트</p>
    <ol>
      <li>웹프로그래밍</li>
      <li>Html Css Js</li>
      <li>공간분할태그</li>
      <li>블록, 인라인, 인라인-블록</li>
    </ol>

  </div>
  <div id="aside">
    <form action="login" method="get">
      <table>
        <tr>
          <th>
            로그인
          </th>
        </tr>
        <tr>
          <td>
            <input type="text" name="id">
          </td>
        </tr>
        <tr>
          <td>
            <input type="password" name="pwd">
          </td>
        </tr>
        <tr>
          <td align="right">
            <input type="button" value="로그인">
          </td>
        </tr>
      </table>
    </form>
  </div>
  <div id=footer>
    <p>개발자정보: 김티처</p>
  </div>
</body>

</html>


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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 1024px;
    }

    header {
      text-align: center;
      outline: solid 1px;
      border-radius: 4px;
    }

    nav {
      background-color: antiquewhite;
      outline: solid 1px;
      border-radius: 4px;
      height: 30px;
    }

    nav ul li {
      list-style: none;
      float: left;
      margin-left: 20px;
      margin-top: 5px;
    }

    aside ul li {
      list-style: none;
    }

    aside {
      outline: solid 1px;
      border-radius: 4px;
      height: 300px;
      width: 15%;
      float: left;
      margin-top: 5px;
    }

    section {
      background-color: rgba(221, 119, 82, 0.918);
      outline: solid 1px;
      border-radius: 4px;
      height: 300px;
      width: 69%;
      float: left;
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 5px;
    }

    article {
      margin-left: 10px;
    }

    .left {
      background-color: rgb(134, 221, 134);
    }

    .right {
      background-color: rgb(211, 113, 203);
    }

    footer {
      width: 100%;
      background-color: rgba(126, 8, 90, 0.918);
      outline: solid 1px;
      border-radius: 4px;
      height: 40px;
      float: left;
      margin-top: 5px;
    }
    footer p{
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <header>
    <img src="./img/main.PNG">
  </header>
  <nav>
    <ul>
      <li>
        메인메뉴1
      </li>
      <li>
        메인메뉴2
      </li>
      <li>
        메인메뉴3
      </li>
    </ul>
  </nav>
  <aside class="left">
    <ul>
      <li>
        사이드메뉴1
      </li>
      <li>
        사이드메뉴2
      </li>
      <li>
        사이드메뉴3
      </li>
    </ul>
  </aside>
  <section>
    <article>
      <h2>
        HTML5와 CSS3를 이용한 웹사이트 개발<br>
        Article에 해당하는 내용이 들어갑니다.
      </h2>
      <p>
        HTML5와 CSS3를 이용해서 다양한 웹페이지를 구성해보겠습니다.
      </p>
      <h2>
        Section의 내용입니다.
      </h2>
      <p>
        HTML5의 시멘틱 태그는 다음과 같습니다.
      </p>
    </article>
  </section>
  <aside class="right">
    <p>여기는 배너가 들어가는 자리입니다.</p>
  </aside>
  <footer>
    <p>휴먼교육센터~~!!</p>
  </footer>
</body>

</html>
profile
조하영
공부하는 개발자
이전 포스트

휴먼교육센터 개발자과정 58일차

다음 포스트

휴먼교육센터 개발자과정 60일차

0개의 댓글