* 테이블 생성

view sourceprint?
1.create table test (

2. idx number not null;

3.);

* 테이블테이블 명 변경

view sourceprint?
1.rename after_table to before_table;

* 테이블 정보

view sourceprint?
1.desc test;

* 테이블에 addField 컬럼 추가

view sourceprint?
1.alter table test add(addField number(10));
(추가될 COLUMN 의 위치는 지정할 수 없다. 새로운 COLUMN 은은 마지막 위치에 생성된다.)* 테이블 addField 컬럼명을 modifyField 컬럼명으로 변경

view sourceprint?
1.alter table test rename column addField to modifyField;
COLUMN 의 크기를 확장할 수 있다.
데이타가 들어있지 않으면않으면 COLUMN 의 크기를 줄일 수 있다.
데이타가 들어있지 않다면 COLUMN 의의 타입을 수정할 수 있다.
COLUMN 에 NULL 값이 없다면 NOT NULLNULL CONSTRAINT 를 지정할 수 있다.
DEFAULT VALUE 를 변경할 수 있다.있다.
이미 생성되어 있는 COLUMN 을 변경한다

* Constraint 추가추가
이미 생성되어 있는 TABLE 에 CONSTRAINT 를 추가한다.

view sourceprint?
1.ALTER TABLE table_name 2.ADD (table_constraint); 3.ALTER TABLE S_EMP ADD (CONSTRAINT S_EMP_MANAGER_ID_FK FOREIGN KEY(MANAGER_ID) 4.REFERENCES S_EMP(ID));

* Constraint 삭제
이미 생성되어 있는 TABLE 의의 CONSTRAINT 를 삭제한다.

view sourceprint?
1.ALTER TABLE table_nameDROP PRIMARY KEY |

2.UNIQUE(column_name) |

3.CONSTRAINT constraint_name [CASCADE];

4.ALTER TABLE S_EMP 5.DROP CONSTRAINT S_EMP_MANAGER_ID_FK;

* 테이블 modifyField의 컬럼컬럼 데이터 타입 변경

view sourceprint?
1.alter table test modify(modifyField varchar(10));

* 테이블 modifyFieldmodifyField 컬럼 삭제

view sourceprint?
1.alter table test drop(modifyField);

출처:http://bluebreeze.co.kr/entry/%EC%98%A4%EB%9D%BC%ED%81%B4-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%AC%EB%9F%BC-%EC%B6%94%EA%B0%80-%EB%B3%80%EA%B2%BD-%EC%82%AD%EC%A0%9C-alter-table


-- 제약조건 확인
SELECT *
FROM ALL_CONSTRAINTS
WHERE TABLE_NAME = 'PCBOPM03'


-----------------------------
-- PCBOPM02 수정 쿼리
-----------------------------

-- 제약조건 삭제
ALTER TABLE PCBOPM02 DROP CONSTRAINT SYS_C0021685 CASCADE;

-- 컬럼 추가
ALTER TABLE PCBOPM02
ADD
(
PO_VER VARCHAR2(3)
);

COMMENT ON COLUMN PCOS_NEW.PCBOPM02.PO_VER IS '개정차수';

--PK 삭제
ALTER TABLE PCBOPM02 DROP CONSTRAINT SYS_C0021685;

-- INDEX 생성
CREATE UNIQUE INDEX PK_PCBOPM02 ON PCBOPM02 (PO_NUM, PO_VER);

-- PK 생성
ALTER TABLE PCBOPM02 ADD (
CONSTRAINT PK_PCBOPM02 PRIMARY KEY (PO_NUM, PO_VER)
);

-----------------------------
-- PCBOPM03 수정 쿼리
-----------------------------
ALTER TABLE PCBOPM03
ADD
(
PO_VER VARCHAR2(3)
);

COMMENT ON COLUMN PCOS_NEW.PCBOPM03.PO_VER IS '개정차수';

CREATE UNIQUE INDEX PK_PCBOPM03 ON PCBOPM03 (PO_NUM, MLB_CODE, PPI_CODE, PO_VER);

ALTER TABLE PCBOPM03 ADD(
CONSTRAINT PK_PCBOPM03 PRIMARY KEY (PO_NUM, MLB_CODE, PPI_CODE, PO_VER)
);

ALTER TABLE PCOS_NEW.PCBOPM03 ADD (
FOREIGN KEY (PO_NUM, PO_VER)
REFERENCES PCOS_NEW.PCBOPM02 (PO_NUM, PO_VER)
ON DELETE CASCADE);









--PK추가 하기

ALTER TABLE 테이블이름 ADD CONSTRAINT 인덱스_이름 PRIMARY KEY(field1, field2);

(인덱스_이름 이 제약조건 이름인데, PK 는 오라클이 자동으로 인덱스 생성을 해 주며 이 제약조건 이름으로 인덱스를 생성한다)

-- PK 제거하기

ALTER TABLE 테이블이름 DROP primary key cascade;

--일반적인 제약 조건 삭제..

ALTER TABLE 테이블이름 DROP 제약조건_이름;

(CASCADE 옵션은 제약조건이 걸린 다른 모든 참조 조건들 모두 에게 영향을 준다. 즉, 여기서는 drop 했으므로 참조 조건(다른 테이블의 FK 등에 대한)을 모두 다 삭제 시켜 버린다.)


데이터 딕셔너리 에서 PK 설정 이 잘 되었는지 컬럼 타입 확인..


SQL> l
1 SELECT a.constraint_type as c, a.constraint_name constnm, b.column_name
2 FROM user_constraints a, user_cons_columns b
3 WHERE a.table_name = '테이블 이름' AND a.constraint_name = b.constraint_name ;


뒤에 조건절 AND a.constraint_type = 'P'

를 붙이면 PK 만 확인....,


P 는 PK

R 은 Reference.... FK

U 는 Unique

C 는 Check ( null 등을 포함한 여러 제약 조건이 걸렸다 고 이해 함 될 듯...)


사실 위 쿼리는 급조 된거고... user_constraints a, user_cons_columns b 이 두 테이블로 활용 하면 될듯...



[참고]

1. 일반 필드 수정은...

http://blog.naver.com/neat98/120022441120

2. 데이터 딕셔너리...

http://blog.naver.com/neat98/120022848499

3. 외래키는..

CREATE TABLE 테이블이름

(

col1 number(4),

col2 varchar2(100),

...

CONSTRAINT FK_외래키명 FOREIGN KEY( col1 ) REFERENCES 부모_테이블명(부모_테이블_필드)

);



 // 테스트 (다이얼로그 띄우기)
 public void testMI() {
  JDialog testJD = new JDialog(this, "진행중...", true);
  JPanel testJP = new JPanel(new BorderLayout(5, 5));
  ImageIcon ii = new ImageIcon("./img/loading.gif");
  testJP.add(new JLabel(ii));
  testJD.add(testJP);
  point(testJD);
 
  testJD.setSize(200, 140);
 
  testJD.setVisible(true);
 
  // 진행 끝나면 (testJD 멤버로) 버튼을 사용해도 좋다
  testJD.dispose();
 }



// JDialog 좌표 설정
 public void point(JDialog jd) { 
  // PointerInfo사용, 좌표값을 얻어 사용자가 클릭한 곳에 화면을 출력
  PointerInfo pointerInfo = MouseInfo.getPointerInfo();
  pointerInfo.getLocation();
  Dimension my = jd.getSize();
  jd.setLocation(pointerInfo.getLocation().x - my.width / 2,
    pointerInfo.getLocation().y - my.height / 2);
 }

/*
Title : 대화상자 
File Name : DialogDemo.java
Main File : DialogDemo.java
Programmer : 김경호
Contact : cbr600f3@hanmail.net
Date : 2001-05-23
Update :
Note : The JFC Swing Tutorial (java.sun.com) 참조
● 대화상자 JDialog
	프레임보다는 제한적인 기능을 가진 윈도우
	JOptionPane - 단순하고 표준적인 대화상자
	ProgressMonitor - 진행상태를 보여주고자 할때
	JColorChooser - 색상선택상자
	JFileChooser - 파일 선택상자
	Toolkit.getPrintJob() - 인쇄대화상자(JDK 2 Java Printing API 사용)

	모든 대화상자는 하나의 프레임에 종속된다. 그 프레임이 소멸되면 그에 종속적인 대화상자도 사라지고 부모프레임이 아이콘화되면
	그에 종속된 대화상자들도 화면에서 사라진다. 프레임이 원래 크기로 돌아오면 그에 종속된 대화상자들도 다시 화면에 나타난다.

	■ Modal 과 Modeless
	JOptionPane 이 제공하는 대화상자는 모달이다. 모달로 뛰운 대화상자가 화면에 표시되어 있으면 그 프로그램의 다른 윈도우들은 사용자의
	입력을 받지 못한다. Modeless 대화상자를 만들려면 JDilog 클래스를 사용해야한다.
	모달이 아닌 대화상자를 만들려면 JOptionPane 의 인스턴스를 직접 생성한 다음, 그것을 JDialog 의 인스턴스에 추가해야 한다. 그런다음
	JDialog 의 setVisible(true) 를 호출한다.

	JOptionPane.
		showMessageDialog - 하나짜리 간단한 메시지 표시
		showOptionDialog - 커스텀화된  대화상자를 표시
		나머지 2개는 잘 사용안함
		showConfirmDialog - 사용자에게 먼가를 확인받기 위해 사용 YES / NO 로케일에 따라 다름. 한국 예 / 아니오 이 메세지는 변경안된다.
		showInputDialog - 사용자로 부터 문자열을 입력받는 모달 대화상자. 텍스트필드나 수정할수 없는 콤보박스로 사용.
	이 4개중 하나다

	■ showMessageDialog
	JOptionPane.showMessageDialog(frame, "입력완료", "제목", JOptionPane.PLAIN_MESSAGE)
		showMessageDialog(부모콤포넌트, 메시지, 제목, 메시지종류, 대화상자아이콘)
	
	■ showOptionDialog
	Object[] options = {"변경확인","변경취소","기본값입력"};
	int n = JOptionPane.showOptionDialog(frame, "변경완료,\n적용하시겠습니까?", "제목", JOptionPane.YES_NO_CANCEL_OPTION, JOption.QUESTION_MESSAGE, null, option, option[2]);
		showOptionDialog(부모컴포넌트, 메시지, 제목, 선택종류, 메시지종류, 아이콘, 선택항목들, 대화상자의기본선택값)

	○ 첫번째 인자는 
		Component parentComponent 는 부모컴포넌트를 지정하는 것으로 반드시 프레임이나 프레임안의 컴포넌트 아니면 null 이어야 한다.
		프레임을 지정하면 프레임의 중앙에 대화상자가 나타나고 프레임의 행동에 의존한다. null 일때는 외양에 따라 적절한 화면위치에 
		설정된다. 대화상자는 표시되어 있는 어떤 프레임에도 의존하지 않는다.
	○ 두번째 인자는
		역시 필수인자로 대화상자의 메인영역에 지정되는 문자열.
		줄바꿈 시는 \n 을 사용하고 " 문자 사용시는 \" 사용한다
	○ int OptionType
		대화상자 아래쪽에 나타나는 버튼들의 집합을 지정하는 인자.
		DEFAULT_OPTION
		YES_NO_OPTION
		YES_NO_CANCEL_OPTION
		OK_CANCEL_OPTION
	○ int MessageType
		대화상자에 표시할 아이콘을 설정한다
		PLAIN_MESSAGE - 아무설정없음.
		ERROR_MESSAGE
		INFORMATION_MESSAGE
		WARNING_MESSAGE
		QUESTION_MESSAGE
	○ Object[] options
		대화상자 아래쪽에 나타나는 옵션버튼들의 문자열을 지정.
	○ Object initialValue
		선택될 기본값을 지정한다.
	

	■ 대화상자로 부터 사용자입력내용을 얻기
	showMessageDialog
	showOptionDialog
	showConfirmDialog
	메서드는 사용자의 선택 정수값을 돌려준다.

	해당 상수값은
	YES_OPTION
	NO_OPTION
	CANCEL_OPTION
	OK_OPTION
	CLOSED_OPTION

	CLOSED_OPTION 은 사용자가 대화상자를 눌렀다는 것이 아니고 대화상자의 윈도우의 닫기버튼을 클릭해서 대화상자를 닫았다는것을 뜻함.
	이외의 값들은 모든 사용자가 버튼을 눌렀다는 것을 의미한다. 표준대화상자의 버튼들이 표시하는 문자열을 변경했더라도 반환값은 
	항상 미리 정해진 정수값들 중 하나이다.

다이얼로그를 생성시 Modal 옵션을 주고 생성을 하면 됩니다.

예제)

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;

class DLG extends JDialog {
private JTextField jtf = null;
private String result = "";

public DLG(Frame owner, boolean modal) {
super(owner, modal);

final JDialog dlg = this;

jtf = new JTextField();
jtf.addKeyListener(new KeyAdapter() {
public void keyPressed(KeyEvent ke) {
if(ke.getKeyCode() == 10) {
result = jtf.getText();
dlg.setVisible(false);
}
}
});


getContentPane().add(jtf);

setSize(130, 60);
}

public String open() {
setVisible(true);
return result;
}
}

public class MainFrame extends JFrame {
private JButton btnInput = null;

public MainFrame() {
super("Test Main");

final Frame mainFrame = this;

btnInput = new JButton("INPUT");
btnInput.addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent e) {
String s = new DLG(mainFrame, true).open();
System.out.println(s);
}
});

getContentPane().add(btnInput);
setSize(200, 200);
setVisible(true);
}

public static void main(String[] args) {
new MainFrame();
}
}

오라클 SQL Loader

(엑셀 파일의 내용을 db에 입력하기)

엑셀 파일에 있는 내용을 그대로 DB에 있는 테이블에 insert 시키는 방법이다.

SQL Loader란 오라클이 제공하는 외부 데이터를 DB에 로드하는 프로그램이다.

순서는 다음과 같다.

1. 엑셀 파일에 데이터를 입력시키고 저장시킨다.

(각 열마다 쉼표로 구분되어 있는 CSV로 저장해도 되지만 다른 확장자도 상관이 없다)

저장된 파일은 하드디스크에 저장한다. (ex. c:\test.csv)

2. SQL Loader를 실행할 수 있는 Control 파일을 만든다.

메모장을 열어 다음과 같이 입력한다.

LOAD DATA
INFILE 'c:\퍄일명.csv'
APPEND
INTO TABLE 테이블명
FIELDS TERMINATED BY ','
(열1, 열2)

파일 확장자는 *.CTL 로 저장한다. (ex. c:\test.ctl)

3. DB에 테이블을 생성한다.

엑셀에서의 데이터와 같은 같은 데이터 타입으로 열의 갯수도 정확하게 맞추어서

테이블을 만든다.

4. CMD 창을 열고 다음과 같이 입력한다.

c:\>sqlldr userid=오라클id/pw control='c:\파일명.ctl'

만일, DB가 다른 원격지에 있을 경우는 '@DSMS IP주소'를 입력하면 된다.

즉, DB가 로컬영역에 있다면

c:\>sqlldr userid=오라클id/pw@localhost control='c:\파일명.ctl' 이고,

DB가 원격지에 있다면(다른 컴퓨터에 있다면) localhost 대신 dsms를 써주고 ip주소를

입력해 주면 된다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


ORACLE SQL 구문

Ⅰ.SQL 기본 명령어

1. DDL(Data Definition Language) 명령어


1-1. 테이블 생성

create table 테이블명(

칼럼명1 datatype default 형식,

칼럼명2 datatype default 형식,

칼럼명3 datatype default 형식,

);

1-2. 생성된 테이블 확인

select table_name from tabs;


1-3. 생성된 테이블 구조 확인

desc 테이블명;

1-4. 테이블 구조 변경

① column 추가

alter table 테이블명 add (추가할 칼럼명 데이터타입);

② column 삭제

alter table 테이블명 drop column 삭제할 칼럼명;

③ column 사용불가 상태로 표시(삭제는 아님)

alter table 테이블명 set unused column 칼럼명;

unused column 삭제

alter table 테이블명 drop unused columns;

⑤ modify : 칼럼의 데이터타입, 크기, 디폴트값, not null 제약조건등 변경

alter table 테이블명 modify (칼럼명 데이터타입 [default식] [not nul],

칼럼명 데이터타입...);

⑥ column명 변경

alter table 테이블명 rename column 변경할 컬럼명 to 새로운 컬럼명;

⑦ 제약조건 추가

alter table 테이블명 add constrain 제약조건명 제약조건 (칼럼명);

⑧ 제약조건 삭제

alter table 테이블명 drop constraint 제약조건명;

⑨ 테이블 삭제

drop table 테이블명 cascade constraint;

(해당 테이블과 관계가 있던 제약조건도 삭제)

⑩ table truncate (로그파일에 기록하지 않고 바로 삭제, 빠르다)

truncate table 테이블명;

⑪ table rename

rename 변경될테이블명 to 새로운테이블명;



2. DML (Data Manipulation Language) 명령어- 트랜잭션에 관련


2-1. INSERT

원하는 칼럼에 데이터입력 :

insert into 테이블명 (컬럼명, 컬럼명, ...) values (데이터, 데이터, ...);


모든 칼럼에 맞춰 데이터입력해야함 :

insert into 테이블명 values (데이터, 데이터, ...);

2-1-1. SELECT

select 보고싶은 칼럼명, 보고싶은 칼럼명, ... from 해당 칼럼들이 있는 테이블명

select * from 테이블명;

2-1-2. ALIAS(별명) 부여

select 칼럼명1 별명1, 칼럼명2 별명2, 칼럼명3 별명3 from 테이블명;

2-1-3 산술연산 (+, - , *, /, ( ) ) : number 와 date 자료형에 적용

select 조회할 컬럼명 “별명” from 테이블명;

ex) select height + weight "키와 몸무게의 합“ from player_t;

2-1-4 합성 연산자( || ): 칼럼과 문자 또는 다른 칼럼과 연결

문자 표현식의 결과에 의해 새로운 칼럼 생성.

select player_name || '선수‘ from 테이블명;

결과 player_name || '선수‘

우성용선수

이영표선수

2-2. UPDATE

update 테이블명 set 수정되어야 할 칼럼명 = 수정되기를 원하는 새로운 값;

ex) update player_t set weight = 100;

2-3. DELETE

delete from 삭제하기를 원하는 정보가 들어있는 테이블명; (모든 데이터 삭제)

ex) delete from player_t; 데이터 삭제



3. TCL (Transaction Control Language) 명령어

Transaction ? : 계좌이체 같은 하나의 논리적인 작업 단위를 구성하는

세부적인 연산들의 집합(All or Nothing의 개념)

3-1. Commit 명령어

: insert문, update문, delete문을 사용 후에 이런 변경작업이 완료되었음을

데이터베이스에 알려 주기 위해 사용.

ex) update player_t set height = 100;

10개의 행이 수정

commit;

커밋이 완료

3-1-1. Commit 이나 Rollback 이전의 데이터 상태

•데이터 이전상태 복구 가능(buffer에만 영향)

•현재 사용자는 select 문으로 결과 확인 가능

•다른 사용자는 현재 사용자가 수행한 명령의 결과 확인 불가

•변경된 행은 잠금이 설정(다른 사용자가 변경 불가)

3-1-2. Commit 후의 데이터 상태

•데이터 변경사항 데이터베이스에 반영

•이전 데이터는 복구 불가

•모든 사용자는 결과확인 가능

•관련된 행에 대한 잠금 풀리고 다른 사용자들이 행조작 가능


3-2. Rollback 명령어

: 데이터 변경사항이 취소되어 데이터의 이전 상태로 복귀되며, 관련된 행에 대한

잠금(Locking)이 풀리고 다른 사용자들이 데이터 변경을 할 수 있게 됩니다.

ex) delete from player_t;

10개의 행이 삭제되었습니다.

rollback;

롤백이 완료되었습니다.


3-2-1. Rollback 후의 데이터 상태

•데이터 변경사항 취소됨.

•이전 데이터는 다시 재저장 됨.

•모든 사용자는 결과확인 가능


3-3. Savepoint 명령어

: savepoint를 정의하면 rollback 할 때 트랜잭션에 포함된 전체 작업을 롤백하는 것이

아니라 현 시점에서 savepoint 까지 트랜잭션의 일부만 롤백할 수 있습니다.


ex) savepoint sp1;

저장점이 생성되었습니다.

update player_t set weight = 100;

10개의 행이 수정되었습니다.

rollback to sp1;

롤백이 완료되었습니다.


4. 조건절(Where) 사용하기



4-1. where 절에서 사용 가능한 연산자

4-1-1. 비교 연산자


4-1-2. SQL 비교 연산자

연산자

연산자의 의미

between a and b

a와 b의 값 사이(a, b값 포함)

in(list)

list에 있는 값 중에서 어느 한 개라도 일치 하면 됨(or 의 의미)

like '비교문자열‘

비교문자열과 형태가 일치( % or _ )

is null

null값

ex) select player_name, position, back_no, height

from player_t

where team_id in ('K02', 'K07);


ex) select player_name, position, back_no, height

from player_t

where player_name like '고%‘;

ex) select player_name, position, back_no, height

from player_t

where height between 170 and 180;


ex) select player_name, position, back_no, height

from player_t

where height is null;


4-1-3. 논리 연산자

연산자

연산자의 의미

and

앞, 뒤 조건 동시 만족해야함

or

앞, 뒤 조건 중 하나만 만족해도 됨

not

뒤에 오는 조건의 반대의 결과가 나타남


ex) select player_name, position, back_no, height

from player_t

where tema_id = 'K02'

and height >= 170;


ex) select player_name, position, back_no, height

from player_t

where (tema_id = 'K02' or team_id = 'K07')

and position = 'MF'

and height >= 170;

and height <= 180;


4-1-4. 조건의 부정

종류

연산자

연산자의 의미

부정 논리연산자

!=

같지않다.(unix, pc)

<>

같지않다.(모든운영체제)

not 칼럼명 =

~와 같지 않다.

not 칼럼명 >

~보다 크지 않다.

부정 SQL연산자

not between a and b

a와 b의 값 사이에 있지 않다.

not in (list)

list 값과 일치하지 않는다.

is not null

null 값을 갖지 않는다.


ex) select player_name, position, back_no, height

from player_t

where team_id = 'K02'

and not position = 'MF'

and not height between 175 and 185;

연산 우선순위 : 괄호() > not 연산자 > 비교연산자, SQL연산자 > and > or

▷ null 값이란 ?

• null 값은 존재하지 않는 것이라는 미확정 값을 표현할 때 사용.

• 어떤 값과 비교할 수도 없다.

• null 값과의 비교연산은 False를 리턴.

• null 값과의 수치연산은 null 값을 리턴.


5. GROUP BY절 사용하기

: group by절은 sql문에서 from절 뒤에 오며, 데이터들을 작은 그룹으로 분류하여 그룹에 대한

항목별로 통계 정보를 얻기 위해 사용됨.

스타일시트를 이용하여 테이블 만들기 /웹접근성/CSS/DIV코딩/웹표준코딩/테이블/table/웹디자인/소스/

스타일시트를 이용해서 테이블 만들기

이거 잘 만들어놓으면 활용도가 높아요! 왜냐면,, 컨트럴 씨 컨트럴 브이 ㅋㅋㅋㅋ

쟈 - 스타일시트로 요렇게 테이블을 만들어봅니다.

이건, 게시판 느낌이 물씬 풍기게,,ㅎㅎ 아마도 이렇게 스타일시트를 만들어놓고

프로그래머한테 넘겨주면, 게시판 리스트는 요렇게 보이겠죠..

다양하게활용해서, 표를 예쁘게 꾸며봅시다!!

그러고보니,, 18 18 18 18..수정을 안했네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 왜그랫으까..ㅠㅠ

CSS에 넣을 소스입니다.

/*테이블*/
table.t_01 {width:98%; border-top:2px solid #eb235c; border-bottom:1px solid #dfe0e0; table-layout:fixed; margin:10px auto; border-collapse:collapse;}
table.t_01 tr th {padding:7px 0px 7px 0px; border:none; border-bottom:3px solid #dfe0e0; background: url(/img/sub/bg.gif) repeat-x top; color:#7a7a7a; font-weight:bold; text-align:center; vertical-align:middle;}
table.t_01 tr td {padding:6px 0px 6px 0px; border:none; border-bottom:1px solid #dfe0e0; border-top:none; color:#454545; text-align:center; vertical-align:middle;}
table.t_01 tr th.left_b {border-left:1px solid #dfe0e0 !important;} /*왼쪽선*/
table.t_01 tr th.right_b {border-right:1px solid #dfe0e0 !important;} /*오른쪽선*/
table.t_01 tr td.left {text-align:left !important; padding:6px 0px 6px 15px !important;} /*왼쪽정렬*/
table.t_01 tr td.bold {font-weight:bold !important; color:#7a7a7a !important;} /*글씨두껍게*/
table.t_01 tr td.red {color:#ff0000 !important;} /*빨간글씨*/

테이블이름과, th, td로 구분지어주면 스타일넣기도 편하고, 쓰기도 편해요.

각 th와td마다 다른 스타일을 적용할 수 있어요.

주석처리하면 나중에도 어떤 스타일인지 한눈에 알아보기 쉽겠죠.

테이블 작성을 해볼까요~

- 원래 웹접근성검사에 100% 맞출려면,, 넓이도 지정해줘야 하는데요.. 우선 패스합니다..

- 테이블에 스타일시트만 적용했어요^^ 웹접근성100% 홈페이지 만들땐 요렇게 하면 안돼요,,아니..저렇게 해놓고 테이블에 추가를 더 해줘야 합니다.

- 그건 추후에 계속 추가하도록 하지요!

<table class="t_01">
<tr>
<th class="left_b">No.</th>
<th width="60%">제목</th>
<th>작성일</th>
<th class="right_b">조회수</th>
</tr>
<tr>
<td class="bold">22</td>
<td class="left">심지네 심지네 심지네</td>
<td>2011-08-30</td>
<td class="red">9898</td>
</tr>
<tr>
<td class="bold">21</td>
<td class="left">심지네 테이블 만들기2</td>
<td>2011-08-29</td>
<td class="red">2151</td>
</tr>
<tr>
<td class="bold">20</td>
<td class="left">심지네 웹디자인</td>
<td>2011-08-26</td>
<td class="red">8855</td>
</tr>
<tr>
<td class="bold">19</td>
<td class="left">심지네 새창열기</td>
<td>2011-08-26</td>
<td class="red">1235</td>
</tr>
<tr>
<td class="bold">18</td>
<td class="left">심지네 행복한일탈</td>
<td>2011-08-27</td>
<td class="red">4565</td>
</tr>
<tr>
<td class="bold">17</td>
<td class="left">심지네 간단한 퀵메뉴</td>
<td>2011-08-25</td>
<td class="red">67844</td>
</tr>
<tr>
<td class="bold">16</td>
<td class="left">심지네 한화이글스 홈페이지 </td>
<td>2011-08-20</td>
<td class="red">78426</td>
</tr>
<tr>
<td class="bold">15</td>
<td class="left">심지네 테이블 만들기1</td>
<td>2011-08-15</td>
<td class="red">98555</td>
</tr>
<tr>
<td class="bold">14</td>
<td class="left">심지네 웹접근성이란?</td>
<td>2011-08-10</td>
<td class="red">45484</td>
</tr>
</table>

간단하죠? 이렇게만 해주면 끝!!

th 백그라운드 이미지는 첨부파일에 슝~


 

white-space:nowrap;

넓이를 지정하였더라도 자동으로 줄바꿈되지 않게 강제로 개행을 막아줌.

word-break:break-all;

문장을 띄어쓰기 할때 쓰인 공백기준이 아닌 문자단위로 끊어주는 속성

text-overflow:ellipsis;

텍스트가 넘칠때, 말줄임표( ... )가 나오게 하는 속성,
적용조건 white-space:nowrap;

+ Recent posts