본문 바로가기
국비학원/수업기록

국비 지원 개발자 과정_Day38

by 루팽 2023. 1. 18.

sys와 system계정

바라보는 물리적인 경로가 다름

계정이름은 인증에 필요한 정보이면서 계정이 소유하고 있는 프로시저, 트리거, 함수, 테이블, 인덱스의 소유주

 

sys계정

테이블 정보보다는 View 사용

슈퍼계정 - dba

테이블 생성 권한

 

DML

INSERT, UPDATE, DELETE → commit, rollback의 대상

롤백 세그먼트 메모리 영역 사용 - 수정, 삭제에 대한 찌꺼기값이 남음

I/O 블록에 쌓임 - 4k, 8k 익스텐션 확보 중요

 

DDL

CREATE, ALTER, DROP → DBA언어(알아두기만 할 것)

롤백 세그먼트 메모리 사용 안 함

 

DCL

GRANT, REVOKE → 구조를 정의하는 언어는 메모리를 직접 사용하지 않는다

 

 

HTML(HyperText Markup Language)

웹 페이지 제작을 위한 가장 기본적인 마크업 언어(태그 등을 이용해 문서나 데이터 구조를 명기하는 언어)

문서 및 웹페이지가 표시되는 방법을 규정

웹의 구조를 담당

 

CSS(Cascading Style Sheets)

마크업 언어가 실제로 표시되는 방법을 기술하는 언어

색상, 글꼴, 크기, 레이아웃 등 시각적인 디자인을 위해 사용됨

웹의 시각적인 표현을 담당

 

JavaScript

정적인 화면인 HTML과 CSS에 동작을 추가해 주는 객체 지향 스크립트 언어

웹의 동적 처리를 담당

 

인라인요소

왼쪽에서 오른쪽으로 수평적으로 쌓임

인라인요소 안에 블록요소 불가

 

블록요소

정해진 사이즈를 제외한 나머지가 여백으로 채워짐

상자를 만들기 위한 요소

수직적으로 쌓임 - 자동개행처리

부모의 크기만큼 자동으로 늘어남

세로방향은 콘텐츠 크기만큼 자동으로 줄어듦

블록 안에 블록요소를 담고 인라인 요소도 담을 수 있다

 

앞-시작태그 / 뒤-닫힌태그, 종료태그

<태그>내용</태그>

 

요소(Element)

태그 안에 포함되어 있는 내용까지

 

부모태그와 자식태그 관계

태그 안 내용 부분에 또 다른 요소를 포함하는 것이 가능하다

<태그>

<태그>내용</태그>

</태그>

 

속성

<태그 속성 = “값”>내용</태그>

 

<!DOCTYPE html>
<html lang="ko">
  <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>
    <!-- 글자는 자체 크기가 없다(width, heigh를 주어도 효과 없음) -->
    <!-- 줄바꿈 일어나지 않음 인라인요소 -->
    여기에 작성하는 <b>내용</b>이 화면에 출력됩니다.
    <br />
    <!-- 줄바꿈 -->
    부모와 자손태그
    <hr />
    <!-- 선을 하나 그어줌 -->
    <img src="../images/google.png" alt="구글로그" />구글이미지
    <img
      src="http://focusrite.iptime.org:55000/day1/images/google.png"
      alt="구글로그"
    />구글이미지
  </body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
  <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>인라인 요소와 블록 요소</title>
    <style>
      * {
        margin: 0; /* 4군데 마진이 모두 0 */
        padding: 0;
        box-sizing: border-box;
        border: 1px solid red;
      }
      div {
        width: 300px;
        height: 300px;
        background-color: aquamarine;
        border: 2px solid black;
      }
      span {
        width: 300px; /* span은 사이즈 지정 불가 */
        height: 300px;
        background-color: blanchedalmond;
        border: 2px solid black;
      }
      .s1 {
        /* 밑에서 지정한 클래스를 불러올때 .지정한이름 */
        display: block; /* display를 이용해 속성을 block으로 바꾸면 크기할당 가능 */
        width: 300px;
        height: 300px;
        background-color: violet;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div>div1</div>
    <div class="d1">div2</div>
    <span>span1</span>
    <span class="s1">span2</span>
  </body>
</html>

<!-- 
  span 태그는 높이와 폭을 주어도 적용되지 않음
  자체적으로 크기가 없으니 크기를 지정할수도 없다

  블록요소는 크기를 변경할 수 있다

  display: inline or block ir inline-block
  none을 주면 화면에 안 보임 -> jf.setVisible(false);
-->

 

<!DOCTYPE html>
<html lang="ko">
  <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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
		<!-- 만약 숫자가 3개오면 시계방향으로 지정됨 -->
    <!--마진(외부여백)을 지정하는 CSS속성 - 탑바텀20, 왼쪽오른쪽30 -->
    <span style="margin: 20px 30px">인라인요소1</span>
    <!-- 패딩(내부여백)을 지정하는 CSS속성 - 탑바텀20, 왼쪽오른쪽50 -->
    <span style="margin: 20px 50px">인라인요소2</span>
    <span style="width: 100px">인라인요소3</span>
    <span style="height: 100px">인라인요소4</span>
  </body>
</html>

<!-- 
  span*4 -> span 4개 만들어줌
  span{내용$}*4 -> 내용을 채우고 $는 자동으로 숫자붙여줌
-->

 

<!DOCTYPE html>
<html lang="ko">
  <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>
      div {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        position: relative;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <!-- div가 이동하기 전 위치에 태그가 출력된다 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
  </body>
</html>

<!-- 
  relative
  요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
  오프셋은 다른 요소에는 영향을 주지 않기에 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같음

  div아래 p태그를 붙이면 보라색 상자가 있는 원래 위치에서,
  (top 100, left 100을 이동하기 전에 있던 위치 아래에서) p태그가 출력되는 것
-->

 

<!DOCTYPE html>
<html lang="ko">
  <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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid red;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        border: 2px solid black;
      }
      .abs {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div>
      <div class="abs"></div>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
    </div>
  </body>
</html>

<!-- 
  absolute
  요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음
  대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
  단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 함
-->

 

<!DOCTYPE html>
<html lang="ko">
  <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>
    <link rel="stylesheet" href="./coordinate.css" />
  </head>
  <body>
    <div class="line horizontal"></div>
    <div class="line vertical"></div>
    <img class="target" src="../images/target.png" alt="target" />
    <span class="loc">좌표값</span>
    <script type="text/javascript">
      //변수 선언시에는 var를 쓰지 않음
      // let(변수), const(자바final 상수)를 써야함
      // window 객체의 자손객체 document -> 여기서는 coordinate1.html 전체
      // 자바스크립트 언어로 html문서의 태그를 접근하려면 document객체가 제공하는
      // querySelector 함수를 사용한다(문서에서 해당 클래스를 찾아줌)
      const vertical = document.querySelector(".vertical");
      const horizontal = document.querySelector(".horizontal");
      const target = document.querySelector(".target");
      const loc = document.querySelector(".loc");
      document.addEventListener("mousemove", (e) => {
        const x = event.clientX;
        const y = event.clientY;
        console.log(`${x} ${y}`);
        vertical.style.left = `${x}px`;
        horizontal.style.top = `${y}px`;
        target.style.left = `${x}px`;
        target.style.top = `${y}px`;
        loc.style.left = `${x}px`;
        loc.style.top = `${y}px`;

        loc.innerHTML = `${x},${y}`;
      });
    </script>
  </body>
</html>

 

body {
  background-color: black;
}

.line {
  position: absolute;
  background-color: white;
}

.horizontal {
  width: 100%;
  height: 1px;
  top: 50%;
}

.vertical {
  width: 1px;
  height: 100%;
  left: 50%;
}

.loc {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(30px, 20px);
}

.target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

<!DOCTYPE html>
<html lang="ko">
  <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>
      li {
        list-style: none; /* 리스트 앞 동그라미 제거 */
      }
      ul {
        display: flex; /* 수직방향을 수평방향으로 변경 */
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
      <li>메뉴4</li>
      <li>메뉴5</li>
    </ul>
  </body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
  <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>
    <!-- 
      절대경로 - 처음부터 끝까지 다 적음
      상대경로 - 권장사항, 현재 내 위치를 기준으로 찾음
      .이면 현재 내가 바라보는 경로
      ..이면 현재 내 위치의 상위 경로
    -->
    <script
      src=""
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="./terrGYM.css" />
  </head>
  <body>
    <!-- 메뉴바 구성(Navbar) -->
    <header>
      <h1>TerrGYM</h1>
      <ul class="gnb">
        <li><a href="https://www.youtube.com" , target="_blank">COMPANY</a></li>
        <li><a href="https://naver.com" , target="_blank">BRAND</a></li>
        <li><a href="https://www.coupang.com" , target="_blank">GALLERY</a></li>
        <li>
          <a href="https://github.com/bananachat" , target="_blank"
            >COMMUNITY</a
          >
        </li>
        <li>
          <a href="https://iei.or.kr/main/main.kh" , target="_blank">NEWS</a>
        </li>
        <li>
          <a
            href="http://127.0.0.1:5500/day3/coordinate1.html"
            ,
            target="_blank"
            >LOCATION</a
          >
        </li>
      </ul>
      <ul class="sns">
        <li>
          <a href="#"><i class="fas fa-search"></i></a>
        </li>
        <li>
          <a href="#"><i class="fab fab fa-discord"></i></a>
        </li>
        <li>
          <a href="#"><i class="fab fa-facebook-square"></i></a>
        </li>
      </ul>
    </header>
    <hr />
    <!-- 콘텐츠 구성(figure 태그) -->
    <div>
      <video src="../images/forest.mp4" autoplay muted loop></video>
      <article class="txt">
        <p>Back-End / Front-End<br />Development</p>
      </article>
    </div>
    <hr />
    <!-- 바닥글(footer태그) -->
    <footer>2023 TerrGYM &copy; ALL RIGHTS RESERVED</footer>
  </body>
</html>

 

@charset "UTF-8";
@import url("<https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Noto+Serif+KR&family=Roboto+Mono&display=swap>");

* {
  margin: 0px; /* 화면 좌측 상단 기준 외부 여백 0(top, right, bottom, left)으로 초기화 */
  padding: 0px; /* 화면 좌측 상단 기준 내부 여백 0(top, right, bottom, left)으로 초기화 */
  box-sizing: border-box; /* 여백을 포함하는 사이즈 계산 */
  /* border: 1px solid red; */
}

body {
  background-color: black; /* 전체 화면을 검정색으로 */
}

ul {
  list-style: none; /* 리스트 앞의 동그라미 없앰 */
}

a {
  text-decoration: none; /* 링크걸렸을 때 밑줄 제거 */
}

header {
  width: 100%; /* 반응형 웹을위해 %로 설정 */
  display: flex; /* inline, block, inline-block, flex(justify-content 사용가능, 메뉴바구성에 자주쓰임) */
  border-bottom: 1px solid #aaa; /* 바닥에 1px 실선 그리기, 점선은 dotted */
  justify-content: space-between; /* flex일때만 사용 */
  align-items: center; /* 중앙에 배치 */
  top: 0px; /* 시작점에서의 y축 좌표 */
  left: 0px; /* 시작점에서의 x축 좌표 */
  font: normal 20px/1 "Roboto Mono";
  color: #fff; /* 글자색 */
  z-index: 2; /* 레이어 계층 번호 */
}

header h1 {
  font: normal 30px/1 "Fredericka the Great";
  z-index: 2;
}

.gnb {
  display: flex; /* ul태그 아래 li태그는 수직방향 배치 -> 수평방향으로 바꿔줌 */
  z-index: 2;
}

header .gnb li {
  /* headet태그 아래 ul태그 class=gnb의 li 자손태그 */
  margin: 0px 20px; /* 메뉴이름 오른쪽, 왼쪽 20px씩 띄움 */
}

header .gnb li a {
  /* a태그(앵커태그) - 링크기능 */
  color: #fff;
}

.sns {
  /* 폰트어썸의 이미지 */
  display: flex; /* ul태그 아래 li태그는 수직방향 배치 -> 수평방향으로 바꿔줌 */
  z-index: 2;
}

header .sns li {
  margin: 0px 10px; /* top, bottom은 0이고 left, right는 10 */
}

header .sns li a {
  font-size: 16px; /* a태그 안에 내용 글자 크기 조정 - 이미지 크기가 조정됨 */
  color: #ffffff; /* 색상값을 16진수로 표현 */
}

div {
  /* 비디오 태그 컨텐츠 */
  width: 100%; /* 폭은 가득 채움 */
  height: 100vh; /* v는 뷰포트를 의미 - 보이는 화면의 높이값 */
  position: absolute; /* 이것을 주어야 좌표값에 따라서 배치됨 */
  top: 0px;
  left: 0px;
  overflow: hidden; /* 스크롤바 숨김 */
  z-index: 1; /* 레이어의 값 - 이 위에 메뉴 글씨가 2임 */
}

div video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 영상이 비디오에 꽉 차게 해줌 */
}

.txt {
  position: absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.txt p {
  font: normal 8vw/1 "Fredericka the Great";
  color: #fff;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  font: 12px/1 "Roboto Mono"; /* 글자크기/로우높이값 "글꼴" */
  text-align: center; /* 글자의 위치 - 정중앙에 배치 */
  letter-spacing: 2px; /* 알파벳과 알파벳 사이의 간격 */
  padding: 5vh 5vw; /* v는 뷰포트, 보여지는 공간에서의 내부 여백 값 */
  color: white;
  z-index: 2;
}

 

<!DOCTYPE html>
<html lang="ko">
  <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>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
    <!-- 
  부트스트랩에서 제공하는 Nabvar 시작
-->
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">회사소개</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Front-End
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">HTML5</a></li>
                <li><a class="dropdown-item" href="#">NODEJS</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">REACT</a>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
              Back-End
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">JAVA</a></li>
                <li><a class="dropdown-item" href="#">ORACLE</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">SPRING</a>
                        </li>
          </ul>
        </li>
          <form class="d-flex" role="search">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>
    <!-- 
  부트스트랩에서 제공하는 Nabvar 끔
-->
  </body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'국비학원 > 수업기록' 카테고리의 다른 글

국비 지원 개발자 과정_Day40  (0) 2023.01.20
국비 지원 개발자 과정_Day39  (0) 2023.01.19
국비 지원 개발자 과정_Day37  (0) 2023.01.17
국비 지원 개발자 과정_Day36  (0) 2023.01.16
국비 지원 개발자 과정_Day35  (0) 2023.01.13

관련글

댓글

티스토리툴바