국비 27일차_2

강지수·2024년 1월 22일

국비교육 국비학원 백엔드 웹개발 자바

국비교육

목록 보기

53/97

오후엔 HTML, CSS, JQUERY

HTML 과 SQL 병행 할 예정

무료 도메인

닷홈 무료 도메인 서비스

닷홈 사이트

가입 후 신청

메뉴 - 웹호스팅 - 무료호스팅 신청

HTML

<html>
<head>
	<title>myhomepage</title>
</head>
<body>
	<h1>Welcome</h1>
	<h5>welcome to my world!!!</h5>
</body>
</html>

메모장에 html 코드 입력
HTML 의 기본 틀

~.html 파일로 저장

webpage 로 실행됨

VSCode 설치

google - vscode 설치 검색 - Windows 다운

다운로드 된 파일 확인

동의

다음-다음-다음-설치

실행 화면

File - Open Folder - welcome.html 있던 폴더 선택

EXPLORER 우클릭 - New Folder - day00, welcome.html drag & drop

<html>
    <head>
        <title>welcome2</title>

    </head>
    <body>
        <h1>Welcome2</h1>
        <h3>welcome to my world!!!</h3>
    </body>
</html>

test 파일 저장

좌측 Extension - live server 검색 - install

Extension - auto rename tag 검색 - install

파일 저장 후 빈 공간 우클릭 - Open with live server

Webpage 로 열림

수정 후 저장하면 바로 적용된다.

test02.html 로 파일을 만들면 (html파일형식으로 만들면)

html 입력 후 바로 기본 폼을 입력할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    
</body>
</html>

h1 ~ h6 : 헤더, 제목

day01 폴더 - link.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 주석처리 -->
    <ul>
        <li>unordered list</li>
        <li>unordered list</li>
        <li>unordered list</li>
        <li>unordered list</li>
        <li>unordered list</li>
    </ul>
</body>
</html>

disk type 이 기본

<ul type="square">

squre type 으로 변경

    <ol>
        <li>unordered list</li>
        <li>unordered list</li>
        <li>unordered list</li>
        <li>unordered list</li>
        <li>unordered list</li>
    </ol>

순서가 있는 정렬 목록

<ol type="a">

abcde 순서로 나온다

<hr>
<img src="../img/lion.PNG" alt="">

<a href="http:://www.naver.com">네이버</a>

a tag : 링크

<a href="http://www.naver.com" target="_blank">네이버2</a>

새 창 열기 링크

<a href="http://www.lion.com" target="_blank">
    <img src="../img/lion.PNG" width="50px" height="50px">

이미지를 링크로 만들기

<p>이것이 하나의 단락입니다.</p>
이것이 하나의 단락입니다.
이것이 하나의 단락입니다.
이것이 하나의 단락입니다.

p 태그 : 단락 태그
p태그 없이 나눠놓아도 웹페이지에서는 한줄로 인식함

<b>이것이 하나의 단락입니다.</b>

b 태그 : 굵게

<strong>이것이 하나의 단락입니다.</strong>

strong 태그 : 굵게

<i>이것이 &lt; 하나의 &gt; 단락 입니다.</i>

꺽쇠 태그 < / >

<b>이것이 하나의 &nbsp;&nbsp;&nbsp; 단락입니다.</b> <br>

: 띄어쓰기 태그

<pre>
    이것이 하나의 단락입니다. 그대로 나타납니다
    hhhh
    ppp
</pre>

pre 태그 : 쓴 그대로 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#section2" id="section1">to section2</a>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>

    <a href="#section1" id="section2">to section1</a>
</body>
</html>

#section1 과 #section2 의 위치로 이동

'같은 문서에서의 링크'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>table</h1>
    <table border="1" width="300">
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
    </table>
</body>
</html>

table 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>table</h1>
    <table border="1" width="300">
        <tr>
            <td rowspan="2" colspan="2">11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
    </table>
</body>
</html>

열 길이 행 길이 조절

rowspan / colspan
길이를 늘린 만큼 table 이 깨짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>table</h1>
    <table border="1" width="300">
        <tr>
            <td rowspan="2" colspan="2">11</td>
            <!-- <td>12</td> -->
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <!-- <td>21</td> -->
            <!-- <td>22</td> -->
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
    </table>
</body>
</html>

합쳐진 만큼 주석처리해봄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>table</h1>
    <table border="1" width="300">
        <tr>
            <td rowspan="2" colspan="2">11</td>
            <!-- <td>12</td> -->
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <!-- <td>21</td> -->
            <!-- <td>22</td> -->
            <td rowspan="2" >23</td>
            <td>24</td>
            <td rowspan="4">25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <!-- <td>33</td> -->
            <td>34</td>
            <!-- <td>35</td> -->
        </tr>
        <tr>
            <td colspan="4" bgcolor="#ff00ff">41</td>
            <!-- <td>42</td>
            <td>43</td>
            <td>44</td> -->
            <!-- <td>45</td> -->
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <!-- <td>55</td> -->
        </tr>
    </table>
</body>
</html>

이렇게저렇게 만들 수 있다.

VSCode 미션

mytimetable.html 파일 생성

출력
메일로 제출
메일제목 : 시간표_홍길동
소스는 텍스트로, 실행결과 캡쳐화면 붙여넣기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>table</h1>
    <table border="1">
        <tr height="40" align="center" valign="middle">
            <td width="200">교시</td>
            <td width="200">월</td>
            <td width="200">화</td>
            <td width="200">수</td>
            <td width="200">목</td>
            <td width="200">금</td>
            <td width="200">토</td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">01교시 <br> 09:00~09:30</td>
            <td align="left" valign="top" rowspan="6" bgcolor="#DEFEFD"><b>SW융합코딩1</b><br><b>백수진</b>소프트301</td>
            <td align="left" valign="top" rowspan="3" bgcolor="#FADDFC"><b>금융공학(원어)</b><br><b>황창하</b>미디어403</td>
            <td align="left" valign="top" rowspan="6" bgcolor="#DDDCFC"><b>노동법1</b><br><b>신동윤</b>대학원동216</td>
            <td align="left" valign="top" rowspan="6" bgcolor="#DCFEDC"><b>데이터마이닝(CE)</b><br>2공521</td>
            <td align="left" valign="top" rowspan="6" bgcolor="#FFFFDC"><b>기계학습과인공신경망(SW융합)</b><br><b>윤석현</b>소프트416</td>
            <td align="left" valign="top" rowspan="2" bgcolor="#DEFEFD"><b>관현악실기A</b><br><b>이재준</b></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">02교시 <br> 09:30~10:00</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
        </tr>
        <tr height="55">
            <td align="center" valign="middle">03교시 <br> 10:00~10:30</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top" rowspan="2" bgcolor="#DDDCFC"><b>관현악실기A</b><br><b>이재준</b></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">04교시 <br> 10:30~11:00</td>
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top" rowspan="6" bgcolor="#FADEDD"><b>생산운영관리</b><br><b>임현정</b>상경209</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
        </tr>
        <tr height="55">
            <td align="center" valign="middle">05교시 <br> 11:00~11:30</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top" rowspan="2" bgcolor="#FADDFC"><b>작곡실기A</b><br><b>백영은</b></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">06교시 <br> 11:30~12:00</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
        </tr>
        <tr height="55">
            <td align="center" valign="middle">07교시 <br> 12:00~12:30</td>
            <td align="left" valign="top" rowspan="3" bgcolor="#FFFFDC"><b>경영과학1(원어)</b><br><b>윤승철</b>상경506</td>
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top" rowspan="3" bgcolor="#DCFEDC"><b>수리경제학</b><br><b>선주연</b>상경415</td>
            <td align="left" valign="top" rowspan="3" bgcolor="#DCFEDC"><b>수리경제학</b><br><b>선주연</b>상경415</td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">08교시 <br> 12:30~13:00</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">09교시 <br> 13:00~13:30</td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top" rowspan="5" bgcolor="#FADEDD"><b>게임프로그래밍(SW융합)</b><br><b>정범연</b>소프트310</td>
            <td align="left" valign="top"></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">10교시 <br> 13:30~14:00</td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top" rowspan="3" bgcolor="#FADDFC"><b>금융공학(원어)</b><br><b>황창하</b>미디어403</td>
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top"></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">11교시 <br> 14:00~14:30</td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top"></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">12교시 <br> 14:30~15:00</td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top"></td>
            <!-- <td align="left" valign="top"></td> -->
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top"></td>
        </tr>
        <tr height="55">
            <td align="center" valign="middle">13교시 <br> 15:00~15:30</td>
            <td align="left" valign="top"></td>
            <td align="left" valign="top" bgcolor="#FFFFDC"><b>경영과학1(원어)</b><br><b>윤승철</b>상경506</td>
            <td align="left" valign="top" bgcolor="#FADEDD"><b>파이썬프로그래밍(SW융합)</b><br><b>윤석현</b>소프트303</td>
            <td align="left" valign="top"></td>
            <!-- <td align="left" valign="top"></td> -->
            <td align="left" valign="top"></td>
        </tr>
    </table>
</body>
</html>

소스

실행결과 캡쳐

SQL 미션

emp dept 테이블 초기화하시고

-- 1번 부서번호가 10번인 부서의 사람 중 사원번호, 이름, 월급을 출력하라.

-- 2번 사원번호가 7369인 사람 중 이름, 입사일, 부서번호를 출력하라.

-- 3번 이름이 ALLEN인 사람의 모든 정보를 출력하라.

-- 4번 입사일이 83/01/12인 사원의 이름, 부서번호, 월급을 출력하라.

-- 5번 직업이 MANAGER가 아닌 사람의 모든 정보를 출력하라.

-- 6번 입사일이 81/04/02 이후에 입사한 사원의 정보를 출력하라.

-- 7번 급여가 $800 이상인 사람의 이름, 급여, 부서번호를 출력하라.

-- 8번 부서번호가 20번 이상인 사원의 모든 정보를 출력하라.

-- 9번 이름이 K로 시작하는 사람보다 높은 이름을 가진 사람의 모든 정보를 출력하라.

-- 10번 입사일이 81/12/09 보다 먼저 입사한 사람들의 모든 정보를 출력하라.

조회하셔서 잘 저장해두세요

-- 미션
-- emp dept 테이블 초기화하시고
-----------------------------------
select * from empPK;
select * from dept;

-- 1번 부서번호가 10번인 부서의 사람 중 사원번호, 이름, 월급을 출력하라.
select empno "사원번호", ename "이름", sal "월급" from empPK where deptno=10;
-- 2번 사원번호가 7369인 사람 중 이름, 입사일, 부서번호를 출력하라.
select ename "이름", hiredate "입사일", deptno "부서번호" from empPK where empno=7369;
-- 3번 이름이 ALLEN인 사람의 모든 정보를 출력하라.
select * from empPK where ename='ALLEN';
-- 4번 입사일이 83/01/12인 사원의 이름, 부서번호, 월급을 출력하라.
select ename "이름", deptno "부서번호", sal "월급" from empPK where hiredate='83/01/12';
-- 5번 직업이 MANAGER가 아닌 사람의 모든 정보를 출력하라.
select * from empPK where job<>'MANAGER';
-- 6번 입사일이 81/04/02 이후에 입사한 사원의 정보를 출력하라.
select * from empPK where hiredate>'81/04/02';
-- 7번 급여가 $800 이상인 사람의 이름, 급여, 부서번호를 출력하라.
select ename "이름", sal "급여", deptno "부서번호" from empPK where sal>=800;
-- 8번 부서번호가 20번 이상인 사원의 모든 정보를 출력하라.
select * from empPK where deptno>=20;
-- 9번 이름이 K로 시작하는 사람보다 높은 이름을 가진 사람의 모든 정보를 출력하라.
select * from empPK where ename>'K%';
-- 10번 입사일이 81/12/09 보다 먼저 입사한 사람들의 모든 정보를 출력하라.
select * from empPK where hiredate<'81/12/09';
-- 조회하셔서 잘 저장해두세요

Query

강지수

개발자 준비의 준비준비중..

이전 포스트

국비 27일차_1

다음 포스트

국비 27일차_2

국비교육

무료 도메인

HTML

VSCode 설치

emp dept 테이블 초기화하시고

국비 27일차_1

국비 28일차_1

0개의 댓글