본문 바로가기

programming/Gukbi

국비 교육 42일차 - PL/SQL, HTML(table, img tag.. etc)

728x90
반응형

본격적으로 오라클과 html병행을 하고 있다. 오전에는 오라클, 오후에는 html을 하는 식으로 수업이 진행되고 있다. 

금요일에는 오라클 마무리 시험을 본다고 하니 아마 이제 html쪽에 집중해서 배우게 될거 같다 

 

--2021-02-24 PL/SQL => 함수를 만들어서 재사용이 가능하게 만든다
/*
    DML (SELECT, INSERT, UPDATE, DELETE) : 주로 사용하는 명령어
    DDL (CREATE, DROP, ALTER, TRUNCATE)
    DCL (GRANT, REVOKE) : DBA
    TCL (COMMIT, ROLLBACK)
    
    PL/SQL
    ==
    프로시저 언어, 제어는 SQL
    = 리턴형을 가지고 있는 함수 : FUNCTION => MAX, MIN, SUBSTR() (사용자 정의=오러쿨애서 지원하지 않는 함수를 만드는 것)
        => AUTO_INCREMENT 
    = 리턴형이 없는 함수 : PROCEDURE (중심 => 포인터(C언어 형식)) *, OUT
    = 조건에 맞으면 자동으로 실행하는 프로그램 (TRIGGER)
    
    1) 형식 (오라클은 {}가 없다)
        자바 => IF(){}, FOR(){}
        오라클 => IF() ~ END IF; FOR LOOP ~~ END LOOP;
        
       DECLARE => CREATE DUNCTION func_name(), CREATE PROCEDUREpro_name(), CREATE TRIGGER tri_name
        선언 => 변수선언 (데이터를 조작)      
       BEGIN
        SQL을 이용해서 데이터 조작
       END;
        / =============> 함수 종료 시작
        
        1. 변수선언 방법 
            = 스칼라 변수 
                name VARCHAR2(34)
                no NUMBER
            = 참조변수 (컬럼한개)
                ename emp.ename%TYPE => %TYPE
            = 참조변수 (테이블에 있는 전체 컬럼)
                emp emp%ROWTYPR => %ROWTYPE
            = 사용자 정의 변수
                RECORD
            = 전체 데이터 모아서 처리
                CURSOR ===========> ResultSet : Spring (댓글 처리=>PL/SQL, 모든 데이터의 테이블을 나눠서 가져옴)
    2) 연산자 : SQL문장은 연산자 사용
    3) 제어문 : 조건문 (단일 조건문, 선택 조건문, 다중 조건문)
                    IF(조건)
                        처리
                    END IF;
                ===============
                    IF(조건)
                        처리
                    ELSE
                        처리
                    END IF;
                ===============
                    IF(조건)
                        처리
                    ELSE IF (조건)
                        처리
                    ELSE
                        처리
                    END IF;
               반복문 : 일반 LOOP, WHILE, FOR
        
        PL/SQL의 구조
            선언부 : 모든 변수나 상수를 선언하는 부분
            실향부 : 제어문, SQL, 연산자를 이용해서 처리
            예외처리부 : 오류방지 
*/
-- 반드시 처리 (화면에 출력
SET SERVEROUTPUT ON;

-- 변수 선언 방법
DECLARE
    vempno NUMBER(4); --스칼라변수
    vename VARCHAR2(20);
BEGIN
    SELECT empno, ename INTO vempno, vename -- 실행한 결과를 변수로 받아옴
    FROM emp
    WHERE empno=7788;
    -- 변수 출력
     DBMS_OUTPUT.PUT_LINE('=======실행 결과======='); -- System.out.printlib()
     DBMS_OUTPUT.PUT_LINE('사번'||vempno);
     DBMS_OUTPUT.PUT_LINE('이름'||vename);
END;
/

DECLARE
    vempno emp.empno%TYPE;
    vename emp.ename%TYPE;
    vjob emp.job%TYPE;
    vhiredate emp.hiredate%TYPE;
    vsal emp.sal%TYPE;
BEGIN
    SELECT empno,ename,job,hiredate,sal INTO vempno, vename, vjob, vhiredate, vsal
    FROM emp
    WHERE ename='KING';
    
    DBMS_OUTPUT.PUT_LINE('=======실행 결과======='); -- System.out.printlib()
    DBMS_OUTPUT.PUT_LINE('사번'||vempno);
    DBMS_OUTPUT.PUT_LINE('이름'||vename);
     DBMS_OUTPUT.PUT_LINE('직위'||vjob);
     DBMS_OUTPUT.PUT_LINE('입사일'||vhiredate);
      DBMS_OUTPUT.PUT_LINE('급여'||vsal);
END;
/

-- 변수 선언 방법 (테이블에 있는 모든 컬럼의 변수를 참조) => %ROWTYPE => ~VO
-- 함수를 만들면 : 컬럼명, 테이블명 => 확인이 안된다 (보안)
DECLARE
    --변수 선언
    vemp emp%ROWTYPE;
    -- 임의로 데이터값 설정
    /*
        vemp (
            empno emp.empno%ROWTYRPE
        )
    */
BEGIN
    -- 기능 처리 => INSERT, UPDATE, DELETE, SELECT, 자동증가번호
     SELECT * INTO vemp
     FROM emp
     WHERE ename='SCOTT';
     -- 결과값을 출력 =>UPDATE, DELETE...
-- PL/SQL => ERP (관리프로그램=금융권, 공기업...)+
 DBMS_OUTPUT.PUT_LINE('=======실행 결과======='); -- System.out.printlib()
 DBMS_OUTPUT.PUT_LINE('사번'||vemp.empno);
 DBMS_OUTPUT.PUT_LINE('이름'||vemp.enmae);
 DBMS_OUTPUT.PUT_LINE('직위'||vemp.job);
     DBMS_OUTPUT.PUT_LINE('입사일'||vemp.hiredate);
      DBMS_OUTPUT.PUT_LINE('급여'||vemp.sal);
END;
/
-- 사용자 정의 변수 (RECORD) => JOIN, SUBQUERY => 테이블 두개이상에서 데이터를 가지고 온다
-- JOIN 이용 => 스칼라 변수 이용
SELECT empno, ename, job, hiredate, sal, dname, loc, grade
FROM emp,dept,salgrade
WHERE emp.deptno=dept.deptno
AND sal BETWEEN losal AND hisal
AND ename='JONES';

-- %ROWTYPE => 한개의 테이블만 사용이 가능 => 사용자가 만들어서 사용 => RECORD => 1ROW
DECLARE 
    vempno emp.empno%TYPE;
    venmae emp.ename%TYPE;
    vjob emp.job%TYPE;
    vhiredate emp.hiredate%TYPE;
    vsal emp.sal%TYPE;
    vdname dept.dname%TYPE;
    vloc dept.loc%TYPE;
    vgrade salgrade.grade%TYPE;
BEGIN
    -- 값을 읽어서 변수에 값대입 => SELECT ~ INTO 변수 설정 => SELECT 컬럼 (변수가 아니라 출력용)
    -- 함수(메소드) => 변수를 이용해서 요청처리
    SELECT empno, ename, job, hiredate, dname, loc, grade
    INTO vempno, vename, vjob, vhiredate, vdname, vloc, vgrade
    FROM emp, dept, salgrade
    WHERE ename='SCOTT'
    AND emp.deptno=dept.deptno
    AND sal BETWEEN losal AND hisal;
    
    DBMS_OUTPUT.PUT_LINE('=====RESULT=====');
     DBMS_OUTPUT.PUT_LINE('사번'||vempno);
    DBMS_OUTPUT.PUT_LINE('이름'||venmae);
    DBMS_OUTPUT.PUT_LINE('직위'||vjob);
     DBMS_OUTPUT.PUT_LINE('입사일'||vhiredate);
      DBMS_OUTPUT.PUT_LINE('급여'||vsal);
      DBMS_OUTPUT.PUT_LINE('부서명'||vdname);
     DBMS_OUTPUT.PUT_LINE('근무지'||vloc);
      DBMS_OUTPUT.PUT_LINE('호봉'||vgrade);
END;
/
-- RECORD 이용하는 방식
/*
    DECLARE 
    => CREATE FUNCTION DUNC_NAME(매개변수..):RETURN VARCHAR2
    IS
    BEGIN
    END;
    /
    => CREATE PROCEDURE pro_name(매개변수)
        IS 
        BEGIN
        END;
    => CREATE TRIGGER tri_name
        BEGIN 
        END;
        /
*/
DECLARE 
    TYPE emp_dept_salgrade IS RECORD
    (
        empno emp.empno%TYPE,
        enmae emp.ename%TYPE,
        job emp.job%TYPE,
        hiredate emp.hiredate%TYPE,
        sal emp.sal%TYPE,
        dname dept.dname%TYPE,
        loc dept.loc%TYPE,
        grade salgrade.grade%TYPE
    );
    --RECORD 변수
    eds emp_dept_salgrade;
BEGIN
    SELECT empno, ename, job, hiredate, sal, dname, loc, grade INTO eds
    FROM emp, dept, salgrade
    WHERE emp.deptno=dept.deptno
    AND sal BETWEEN losal AND hisal
    AND ename='ADAMS';
    
    DBMS_OUTPUT.PUT_LINE('=====RESULT=====');
     DBMS_OUTPUT.PUT_LINE('사번'||eds.empno);
    DBMS_OUTPUT.PUT_LINE('이름'||eds.enmae);
    DBMS_OUTPUT.PUT_LINE('직위'||eds.job);
     DBMS_OUTPUT.PUT_LINE('입사일'||eds.hiredate);
      DBMS_OUTPUT.PUT_LINE('급여'||eds.sal);
      DBMS_OUTPUT.PUT_LINE('부서명'||eds.dname);
     DBMS_OUTPUT.PUT_LINE('근무지'||eds.loc);
      DBMS_OUTPUT.PUT_LINE('호봉'||eds.grade);
END;
/

-- PL/SQL -> SELECT, INSERT, UPDATE, DELETE
DESC member;
CREATE TABLE member_test (
    id VARCHAR2(10),
    name VARCHAR2(20),
    addr VARCHAR2(100)
);

-- INSERT
DECLARE
    vid member_test.id%TYPE:='&id';
    vname member_test.name%TYPE:='&name';
    vaddr member_test.addr%TYPE:='&addr';
BEGIN
    INSERT INTO member_test VALUES(vid, vname, vaddr);
    COMMIT;
END;
/


-- UPDATE
DECLARE 
    --함수 => 매개변수 (JOIN, SUBQUERY) 
     vid member_test.id%TYPE:='&id';
    vname member_test.name%TYPE:='&name';
    vaddr member_test.addr%TYPE:='&addr';
BEGIN
    UPDATE member_test SET
    name=vname,addr=vaddr
    WHERE id=vid;
    COMMIT;
END;
/
SELECT * FROM member_test;

-- DELETE
DECLARE
    vid member_test.id%TYPE:='&id'; -- 값을 받는 경우 :=
BEGIN
    DELETE FROM member_test
    WHERE id=vid;
    COMMIT;
END;
/

 PL/SQL이란 SQL내부에서 함수처럼 사용하는 기능이다. DECLARE BEGIN END 부분으로 나뉘어져 있으며, DECLARE에서는 변수의 선언, BEGIN에서는 SQL문으로 내용을 처리하고, END를 통해서 문장을 종료해준다.

 

 자바에서 배운 문법과 크게 다르지 않다. 조금 다른 점은 %TYPE을 써줘서 테이블에 있는 데이터형을 그대로 받아오는 새로운 변수를 만든다는 점이다. 

 

-- PL/SQL : 제어문 
/*
    오라클 : 대소문자를 구분하지 않는다 (저장된 데이터만 대소문자를 구분한다)
            오라클 개발자 => 약속 (키워드는 대문자로 한다)
    1. 단일 조건문  
         IF(조건문) THEN
           처리
         END IF; 
*/
-- 단일 조건문 
DECLARE
  vename emp.ename%TYPE;
  vjob emp.job%TYPE;
  vhiredate emp.hiredate%TYPE;
  vdeptno emp.deptno%TYPE;
  vempno emp.empno%TYPE:=&empno;
  vdname dept.dname%TYPE;
BEGIN
  SELECT ename,job,hiredate,deptno INTO vename,vjob,vhiredate,vdeptno
  FROM emp
  WHERE empno=vempno;
  -- = 이 같다 
  IF(vdeptno=10) THEN
    vdname:='영업부';
  END IF;
  
  IF(vdeptno=20) THEN
    vdname:='개발부';
  END IF;
  
  IF(vdeptno=30) THEN
    vdname:='기획부';
  END IF;
  
  -- 출력 
  DBMS_OUTPUT.PUT_LINE('======= 결과 =======');
  DBMS_OUTPUT.PUT_LINE('이름:'||vename);
  DBMS_OUTPUT.PUT_LINE('직위:'||vjob);
  DBMS_OUTPUT.PUT_LINE('입사일:'||vhiredate);
  DBMS_OUTPUT.PUT_LINE('부서:'||vdname);
END;
/

-- 다중 조건문
/*
    IF(조건) THEN
        처리
    ELSIF (조건) THEN
        처리
    ELSIF (조건) THEN
        처리
    ELSE 
        처리
    END IF;
*/
SELECT * FROM emp; -- 7902

DECLARE
  vename emp.ename%TYPE;
  vjob emp.job%TYPE;
  vhiredate emp.hiredate%TYPE;
  vdeptno emp.deptno%TYPE;
  vempno emp.empno%TYPE:=&empno;
  vdname dept.dname%TYPE;
BEGIN
  SELECT ename,job,hiredate,deptno INTO vename,vjob,vhiredate,vdeptno
  FROM emp
  WHERE empno=vempno;
  -- = 이 같다 
  IF(vdeptno=10) THEN
    vdname:='영업부';
  ELSIF(vdeptno=20) THEN
    vdname:='개발부';
  ELSIF(vdeptno=30) THEN
    vdname:='기획부';
  END IF;
  
  -- 출력 
  DBMS_OUTPUT.PUT_LINE('======= 결과 =======');
  DBMS_OUTPUT.PUT_LINE('이름:'||vename);
  DBMS_OUTPUT.PUT_LINE('직위:'||vjob);
  DBMS_OUTPUT.PUT_LINE('입사일:'||vhiredate);
  DBMS_OUTPUT.PUT_LINE('부서:'||vdname);
END;
/
-- 선택 조건문 (true/false)
/*
    IF(condition) THEN
        처리 (변수값 대입)
    ELSE
        처리 (변수값 대입)
    END IF;
*/
DECLARE 
    vename emp.ename%TYPE;
    vsal emp.sal%TYPE;
    vcomm emp.comm%TYPE;
    vempno emp.empno%TYPE:=&empno;
BEGIN
    -- 실제 데이터에서 값을 읽은 후에 변수에 값을 대입한다 (SELECT ename, sal, comm)=>출력만 한다
    SELECT ename, sal, comm, INTO vename, vsal, vcomm
    FROM emp
    WHERE empno=vempno;
    
    IF(vcomm>0) THEN
    -- 성과급이 있는 경우 => vcomm이 null이면 => else를 수행한다
        DBMS_OUTPUT.PUT_LINE(vename||'사원의 급여는 '||vsal||'이고 성과급은 '||vcomm||'입니다');
    ELSE
    -- 성과급이 없는 경우
        DBMS_OUTPUT.PUT_LINE(vename||'사원의 급여는 '||vsal||'이고'||'성과급은 없습니다');
    END IF;
        
END;
/
-- 선택문, 반복문
/*
    선택문 
     CASE 값
        WHEN 조건 THEN 결과
        WHEN 조건 THEN 결과
        WHEN 조건 THEN 결과
        WHEN 조건 THEN 결과
        ELSE 기본값
     END
*/
DECLARE 
    vname emp.ename%TYPE;
    vdeptno emp.deptno%TYPE;
    vdname dept.dname%TYPE;
     vempno emp.empno%TYPE:=&empno;
BEGIN 
    SELECT ename, deptno INTO vename, vdeptno
    FROM emp
    WHERE empno=vempno;
    
    vdname:=CASE vdeptno
                WHEN 10 THEN '영업부'
                WHEN 20 THEN '개발부'
                WHEN 30 THEN '자재부'
                ELSE '신입사원'
            END;
    -- 결과 출력
    DBMS_OUTPUT.PUT_LINE('==RESULT==');
    DBMS_OUTPUT.PUT_LINE('이름:' ||vname);
    DBMS_OUTPUT.PUT_LINE('dname:' ||dname);
END;

-- 반복문 
/*
    1. 기본 loop
    2. while
    3. for
*/
DECLARE 
    no NUMBER:=1; -- 변수를 설정한다
    eno NUMBER:=&eno;
BEGIN 
    /*no1 NUMBER:=10; BEGIN에서는 SQL문장이나 출력만 가능하다 (변수 설정이 불가능) */
    LOOP
    DBMS_OUTPUT.PUT_LINE(no||' ');
    no:=no+1;
    EXIT WHEN no>eno; -- 종료할 조건
    
    END LOOP;
END;
/


-- WHILE 
DECLARE
    no NUMBER:=1;
BEGIN
    WHILE no<10 LOOP
        DBMS_OUTPUT.PUT_LINE(no);
        no:=no+1;
        END LOOP;
END;
/

-- FOR (주로 사용하는 LOOP문) 데이터의 갯수가 항상 정해져있다
/*
    DECLARE
        
    BEGIN
    END;
*/
BEGIN
    FOR i IN 1..10 LOOP
    DBMS_OUTPUT.PUT_LINE(i);
    END LOOP;
END;
/

BEGIN
    FOR i IN 1..10 LOOP
        IF (MOD(i,2)=0) THEN
    DBMS_OUTPUT.PUT_LINE(i);
    END IF;
    END LOOP;
END;
/

DECLARE
    hap NUMBER:=0;
    even NUMBER:=0;
    odd NUMBER:=0;
BEGIN
    FOR i IN 1..100 LOOP
        hap:=hap+i;
        IF (MOD(i,2)=0) THEN
        even:=even+i;
        ELSE 
            odd:=odd+i;
        END IF;
        END LOOP;
        
    DBMS_OUTPUT.PUT_LINE('1~100까지의 합:'||hap);
    DBMS_OUTPUT.PUT_LINE('1~100까지의 짝수합:'||even);
    DBMS_OUTPUT.PUT_LINE('1~100까지의 홀수합:'||odd);
END;
/
-- 반대로 출력
BEGIN
    FOR i IN REVERSE 1..10 LOOP
    DBMS_OUTPUT.PUT_LINE(i);
    END LOOP;
END;
/

DECLARE
    dan NUMBER:=&dan;
    result VARCHAR2(100):='';
BEGIN 
    FOR i IN 1..9 LOOP
        result:=dan||'*'||i||'='||dan*i;
        DBMS_OUTPUT.PUT_LINE(result);
        END LOOP;
END;
/
/*
    PL/SQL 구문 PL => PROCEDURAL LANGUAGE => PROCEDURE를 만드는 언어 => 제어 SQL 
                                             =========== 함수 (사용자 정의)
    1) PL/SQL 구문
        선언부 DECLARE 
        구현부 BEGIN ~ END;
    2) 변수 선언
        = 스칼라 변수 : 직접 변수 설정 => 컬럼명 데이터형 
        = 실제 테이블에서 컬럼의 데이터형 읽기(1) => 테이블명.컬럼명%TYPE (이 테이블의 데이터형을 가지고 오는 것)
        = 실제 테이블에서 컬럼의 데이터형 읽기 (전체) => 테이블명%ROWTYPE
        = JOIN(여러개의 테이블 연결) => RECORD (사용자 정의)
    3) 제어문
        조건문 : IF, IF~ELSE , IF~ ELSIF ~ ELSIF ~ ELSE
                CASE
                    WHEN
                    WHEN
                    ELSE
        반복문 : WHILE, FOR
    
*/

 마찬가지로 PL/SQL을 통해서 제어문과 반복문의 형태도 만들어 사용할 수 있다. 원리는 자바와 거의 똑같기 때문에 사용하는 방법인 문법만 제대로 익힌다면 큰 문제는 되지 않을거라 생각한다. 

 

 한가지 주의해야할 점은, DECLARE에서 원래 있던 테이블에서 타입을 가져와서 새로운 데이터를 선언하고 난 뒤 BEGIN 부분에서 SQL문장으로 처리할때 SELECT ~ INTO 구문을 사용해서 꼭 값을 집어 넣어 줘야 한다. 

 

반복문 같은 경우에는 마찬가지로, 반복문이 돌아갈 조건, 수행내용, 종료 조건을 같이 적어서 사용을 해준다. 

 

이정도가 오전에 배운 오라클의 내용이었고, 아래는 HTML 배운 것을 복습하는 시간을 갖도록 하겠다. 

 

주로 웹에서 실제로 많이 쓰이는 태그들을 위주로 배웠는데, table, a, img태그들을 배웠다

<!-- 
     목록 출력 
     =======
     1) <ul> 
     2) <ol>
     3) <dl>
     4) <table> 
     
     이미지출력 , 링크
     <img>     <a>
     
     입력창 
     <input>
     <textarea>
     <select>
     <button>
     
     1. table 태그 (행과 열) 
        =================
          title ============> titlebar
        =================
          값  
        =================
        
        =================
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
   <center>
     <h3>사원 목록</h3>
     <table width=500 border=1 bordercolor=black><!--  HTML은 태그+속성(화면 출력) -->
       <tr bgcolor="#CCCCFF"> <!-- 타이틀 입력 -->
         <th>이름</th> <!-- th (table header) td (table data)-->
         <th>성별</th>
         <th>직위</th>
         <th>부서</th>
         <th>근무지</th><!-- th: bold,center -->
       </tr>
       <!-- 값을 채워준다 (한줄 => 데이터 5개) -->
       <tr>
         <td align="center">홍길동</td> <!--  td: bold(X),left -->
         <td align="center">남자</td>  <!--  align(정렬수 사용하는 속성) : left,center,right -->
         <td align="center">사원</td>  <!--  가운데 정렬 : 동일한 글자수가 있는 경우  -->
         <td align="center">개발부</td>
         <td align="center">서울</td>
       </tr>
       <tr>
         <td align="center">심청이</td> <!--  td: bold(X),left -->
         <td align="center">여자</td>  <!--  align(정렬수 사용하는 속성) : left,center,right -->
         <td align="center">대리</td>  <!--  가운데 정렬 : 동일한 글자수가 있는 경우  -->
         <td align="center">개발부</td>
         <td align="center">부산</td>
       </tr>
       <tr>
         <td align="center">이순신</td> <!--  td: bold(X),left -->
         <td align="center">남자</td>  <!--  align(정렬수 사용하는 속성) : left,center,right -->
         <td align="center">과장</td>  <!--  가운데 정렬 : 동일한 글자수가 있는 경우  -->
         <td align="center">기획부</td>
         <td align="center">서울</td>
       </tr>
     </table>
   </center>
</body>
</html>

<tr>은 table row로 한줄 한줄이 생긴다. <th>는 table header이다. <td>는 table data로 안에 테이블 내용을 채워준다. 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<!-- 
      <html>
        |
     -------------------------------
     |                             |
   <head>                        <body>
   문서읽기                         브라우저 화면 
   = CSS
   = JavaScript
   = 한글 코드<Meta>
   = 브라우저 제목(title)
   
   <body>
     |
    <table>
       |
      <tr> (여러번 사용이 가능)
       |
     --------
     |      |
    <th>   <td> (여러번 사용이 가능)
========================================    
    <ul>
     |
    <li>
========================================    
    <ol>
     |
    <li>
========================================
    <dl>
     |
   -------
   |     |
  <dt>  <dd>
========================================
태그 => 셋팅 (다른 태그와 혼합, 단독)
브라우저에서는 자바파일 일반 문자열 
 -->
<body>
  <center>
    <h3>게시판</h3>
    <table border=1 bordercolor=black width=700>
      <tr>
        <th width=10%>번호</th><!-- 간격조절: th,td : 한줄 문자열  -->
        <th width=45%>제목</th>
        <th width=15%>작성자</th>
        <th width=20%>작성일</th>
        <th width=10%>조회수</th>
      </tr>
      <tr>
         <td align="center">1</td>
         <td align="left"><a href="table2.html">HTML의 목록을 출력하는 태그(table)</a></td>
         <td align="center">홍길동</td>
         <td align="center">2021-02-24</td>
         <td align="center">3</td>
      </tr>
      <tr>
         <td align="center">2</td>
         <td align="left">HTML태그(table)</td>
         <td align="center">홍길동</td>
         <td align="center">2021-02-24</td>
         <td align="center">3</td>
      </tr>
      <tr>
         <td align="center">3</td>
         <td align="left">HTML의 목록을 출력하는 태그(table)</td>
         <td align="center">홍길동</td>
         <td align="center">2021-02-24</td>
         <td align="center">3</td>
      </tr>
      <tr>
         <td colspan="3">Search:</td>
         <td colspan="2">1 page / 10 pages</td>
         <!-- 
              위 아래 묶는 경우 : rowspan
              좌우 묶는 경우 : colspan
              <td><th>는 반드시 갯수를 동일하게 만든다 
          -->
      </tr>
    </table>
  </center>
</body>
</html>

 위의 table 태그의 경우는 width 퍼센트를 정해서 나눠줬다. 그리고 rowspan이나 colspan을 이용해서 테이블의 영역을 합쳐줘야 할때를 잘 생각해서 코드를 적어줘야 한다. 

 

위의 html 코드를 실행하면 위와 같은 코드를 얻을 수 있다. 

 

<!-- 
   <table> => colspan , rowspan
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
  <center>
    <h3>내용보기</h3>
    <table border=1 width=600 bordercolor=black cellpadding=0 cellspacing=0>
      <tr>
        <th width=20%>번호</th>
        <td width=30%>1</td>
        <th width=20%>작성일</th>
        <td width=30%>2021-02-24</td>
      </tr>
      <tr>
        <th width=20%>이름</th>
        <td width=30%>홍길동</td>
        <th width=20%>조회수</th>
        <td width=30%>100</td>
      </tr>
      <tr>
        <th width=20%>제목</th>
        <td colspan="3">table에서 rowspan,colspan작업중</td>
      </tr>
      <tr>
        <td colspan="4" height=200 valign="top">
          table속성을 보면 width속성과 height속성이 있습니다. 
          이 속성을 설정해주어야 커다란 빈 공간으로 셀이 생성됩니다.
          width속성과 height속성을 사용하지 않으면 아주 작은 셀로 표가 생성됩니다. 
          다음은 결과 화면입니다.
        </td>
      </tr>
      <tr>
        <td colspan="4" align="right">
          <a href="table1.html">목록</a>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>

연습해봤는데 여기까지 쓰는건 별로 안 어려울것 같다. 

 

 

 

 

 

 

 

 

 

 

728x90
반응형