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

조하영·2022년 10월 28일
0

휴먼교육센터 코딩공부

목록 보기
47/66

인터프리터 언어 : JS, python
원시파일(개발자가 작성한 코드) > 컴파일과 실행이 동시에된다.

코드가 변하면 바로 확인
웹은 웹브라우저가 번역

컴파일 언어: Java, C
원시파일(개발자가 작성한 코드) > 컴파일(기계어로 변환) > 실행

목적프로그램으로 만드는 과정이 필요
원시파일을 오픈하지 않으면 소스를 볼 수 없다.(윈도우, 오라클 등)
Maria DB는 오픈소스로 원시파일을 공개함. 개발자가 디비를 튜닝할 수 있음.

선택자란 css, js, jquery에서 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>
    #p1>p:hover {
      color: blueviolet;
    }

    .s1:active {
      background-color: coral;
    }

    #p2 > p {
      color: crimson;
    }
    span p:hover{
      background-color: bisque;
    }

    input:enabled{
      color: aqua;
      background-color: black;
    }

    input:disabled{
      background-color: aquamarine;
    }

    a{
      text-decoration: none;
    }
    a:hover{
      color: rgb(83, 43, 226);
    }

    h1, h4{
      color: darkgreen;
    }


  </style>
</head>

<body>
  <div id="p1" class="c1 tc">
    <p>
      휴먼교육센터 홈페이지
    </p>
    <p>
      Java 기반 웹 개발자 프로그래밍
    </p>
  </div>
  <div id="p2">
    <p>
      22222222222222
    </p>
    <span>
      <p>
        22222222222222
      </p>
    </span>
  </div>
  <div id="p3">
    <a href="https://www.naver.com">
      네이버로 이동
    </a>
    <h1>
      33333333333333
    </h1>
  </div>
  <form action="" method="">
      아이디<input type="text">
      이름<input type="text" value = "Guest" disabled>
  </form>
  <div>
    <p>
      55555555555555
    </p>
  </div>
  <span class="s1">
    aaaaaa
  </span>
  <span class="s1">
    bbbbbb
  </span>
  <span>
    <h4>
      cccccc
    </h4>
  </span>
</body>

</html>


<!DOCTYPE html>
<html>
<head>
    <title>HTML Space Basic Page</title>
</head>
<style>
    body{
        width:1024px;
        margin: 0px 0px 0px 0px;/* 위쪽, 오른쪽, 아래, 왼쪽 */
        background-color: black;
    }
    header{
        width:1024px;
        background-color: aqua;
        display: inline-block;
        border: 2px solid;
        margin-top: 20px;
        padding-left: 10px;

    }
    nav{
        width:1024px;
        background-color: bisque;
        display: inline-block;
        border: 2px solid;
        padding: 20px 0px 0px 50px /*위 우 아래 좌 순서*/
    }
    nav > ul {
        list-style:none;
    }
    nav > ul > li{
        background-color: cadetblue;
        display: inline-block;
    }
    nav > ul > li > a{
        text-decoration-line: none;
    }
    section{
        width:1024px;
        background-color: blue;
        display: inline-block;
    }
    article{
        width:400px;
        background-color: brown;
        float: left;
    }
    footer{
        width:1024px;
        background-color: chartreuse;
        display: inline-block;
    }
    h1:hover{
        color: brown;
    }
    input[type=text]:focus{
        background-color: rebeccapurple;
    }
    input[type=text]:disabled{
        background-color: gray;
    }
    #login[data-a = '3']{
        float:left;
        width: 200px;
        background-color: aqua;
    }

</style>
<body>
    <header>
        <h1>HTML5 기본</h1>
    </header>
    <nav>
        <ul>
            <li><a href="./02.html">Home</a></li>
            <li><a href="#">프론트엔드</a></li>
            <li><a href="#">백엔드</a></li>
            <li><a href="./03.html">회원가입</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
        </article>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
            <p>dd</p>
        </article>
        <div id="login" data-a="4">
            <form>
                <input type="text" >
                <input type="text" >
                <input type="text" disabled>
            </form>

        </div>
    </section>
    <footer>
        <address>서울특별시 강서구 내발산동</address>
    </footer>
</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">
  <style>
    body {
      width: 1024px;
      margin: 0px 0px 0px 0px;
      /* 위쪽, 오른쪽, 아래, 왼쪽 */
      background-color: rgb(0, 0, 0);
    }

    header {
      width: 1024px;
      background-color: aqua;
      display: inline-block;
      border: 2px solid;
      margin-top: 20px;
      padding-left: 10px;
    }

    nav {
      width: 1024px;
      background-color: bisque;
      display: inline-block;
      border: 2px solid;
      padding: 20px 0px 0px 50px
      /*위 우 아래 좌 순서*/
    }

    nav>ul {
      list-style: none;
    }

    nav>ul>li {
      background-color: cadetblue;
      display: inline-block;
    }

    nav>ul>li>a {
      text-decoration-line: none;
    }

    section {
      width: 1024px;
      background-color: blue;
      display: inline-block;
    }

    article {
      width: 400px;
      background-color: brown;
      float: left;
    }

    footer {
      width: 1024px;
      background-color: chartreuse;
      display: inline-block;
    }

    h1:hover {
      color: brown;
    }

    input[type=text]:focus {
      background-color: rebeccapurple;
    }

    input[type=text]:disabled {
      background-color: gray;
    }

    table{
      background-color: azure;
    }

    #login[data-a='3'] {
      float: left;
      width: 200px;
      background-color: aqua;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <header>
    <h1>HTML5 기본</h1>
  </header>
  <nav>
    <ul>
      <li><a href="./02.html">Home</a></li>
      <li><a href="#">프론트엔드</a></li>
      <li><a href="#">백엔드</a></li>
      <li><a href="./03.html">회원가입</a></li>
    </ul>
  </nav>
  <section>
    <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>
  </section>
  <footer>
    <address>서울특별시 강서구 내발산동</address>
  </footer>
</body>

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

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

다음 포스트

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

0개의 댓글