오늘 SQL 끝
CSS
박스모델
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
background: green;
}
h1{
background: blue;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
<h1>This is a paragraph</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
style 태그를 이용, p 태그와 h1 태그에 배경색 입히기
style 태그 안의 p, h1 등을 선택자 라고 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#special1{
background : blue;
color:red;
}
#special2{
background : black;
color:white;
}
#special3{
background : green;
color:yellow;
}
</style>
</head>
<body>
<p id="special1">id 적용한 문장1</p>
<p id="special2">id 적용한 문장2</p>
<p id="special3">id 적용한 문장3</p>
</body>
</html>
각 id 를 선택자로 사용하여 style 적용
<!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>
<style>
.type1{
text-align: center;
color: blue;
}
.type2{
text-align: left;
color: green;
}
.type3{
text-align: right;
color: red;
}
</style>
<h1 class="type1">클래스 적용한 문단1</h1>
<p class="type1">클래스 적용한 문단1</p>
<h1 class="type2">클래스 적용한 문단2</h1>
<p class="type2">클래스 적용한 문단2</p>
<h1 class="type3">클래스 적용한 문단3</h1>
<p class="type3">클래스 적용한 문단3</p>
</body>
</html>
클래스를 이용해서 style 적용
class 와 id 의 차이
일반적으로
class 는 중복해서 사용 ( 여러 개에 같은 class 사용 )
id 는 단일적으로 사용
<!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>
<style>
tr:nth-child(3n+1){
color: cyan;
background-color: green;
}
</style>
<table width="500" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</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>
<style>
a:link{
color: blue;
}
a:visited{
color:green;
}
a:hover{
color:orange;
}
</style>
<a href="css2.html">naver</a>
</body>
</html>
링크 선택 전 : 파랑 / 링크 클릭 후 : 초록 / 마우스를 올리면 : 오렌지
로 색이 변함
의사코드 : 클래스가 정의된 것처럼 간주하는 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 후손</title>
</head>
<body>
<style>
body{
background-color: gray;
}
body em{ /* 후손 */
color : red;
}
body>h2{ /* 자식 */
color: blue;
}
body>em{ /* 자식 */
color: yellow;
}
</style>
<h2>This headline is <em>very</em> important </h2>
<p>This headline is <em>very</em> important </p>
<em>very</em>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inlinestyle</title>
</head>
<body>
<style>
h1{
color: skyblue;
}
p{
color: white;
}
</style>
<h1 style="color:red">this is a Headline</h1>
<p style="color:black">this is a Headline</p>
</body>
</html>
inlinestyle 이 우선순위가 더 높다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inlinestyle</title>
<!-- 외부 스타일 -->
<link rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
<style>
/* 내부 스타일 / instyle */
h1{
color: skyblue;
}
p{
color: white;
}
</style>
<!-- inline style -->
<h1 style="color:red">this is a Headline</h1>
<h1>this is a Headline</h1>
<h1>this is a Headline</h1>
<h1>this is a Headline</h1>
<p style="color:black">this is a Headline</p>
</body>
</html>내부 스타일 / 외부 스타일 / inline style
다중 스타일일 때의 우선순위
우선순위
- 인라인 스타일
- 내부스타일
- 외부스타일
- 웹브라우저 기본값
순으로 높음
Linux 미션
css4_pseudo.html 출력
DB 미션
Purchase 테이블 생성
10000 개의 가상 판매 데이터 생성
구매 년도별 (2010~2020)로 총 판매가격 출력
구매 아이디 별로 (10개의 아이디로 구성) 총 판매가격 출력
프로시져 활용
쿼리, 결과 캡쳐 화면
메일로 제출
메일 제목 : 구매테이블통계_홍길동
-- purchase table 생성
create table purchase(userid varchar2(100), sellerid varchar2(100), pd_id varchar2(100),
pd_name varchar2(100), pd_price number, purchase_date date, cnt number);
-- procedure 활용
/
declare
type tbl_ins is table of purchase%rowtype index by binary_integer;
p_ins tbl_ins;
begin
for i in 1..10000 loop
p_ins(i).userid:=round(dbms_random.value(1,10));
p_ins(i).sellerid:='seller_admin';
p_ins(i).pd_id:=round(dbms_random.value(1,10));
p_ins(i).pd_name:=p_ins(i).pd_id;
p_ins(i).pd_price:=round(dbms_random.value(10000,30000));
p_ins(i).purchase_date:=to_date(round(dbms_random.value(1,28))||'-'||
round(dbms_random.value(1,12))||'-'||
round(dbms_random.value(2010,2020))
,'DD-MM-YYYY');
p_ins(i).cnt:=round(dbms_random.value(1,10));
end loop;
forall i in 1..10000 insert into purchase values p_ins(i);
commit;
end;
/
-- id 테이블 생성
create table pd_id(userid number, id varchar2(100));
-- procedure 활용
/
declare
type userid_ins is table of pd_id%rowtype index by binary_integer;
u_ins userid_ins;
begin
for i in 1..10 loop
u_ins(i).userid:=i;
u_ins(i).id:=dbms_random.string('X',10);
end loop;
forall i in 1..10 insert into pd_id values u_ins(i);
commit;
end;
/
-- 구매 년도별 (2010~2020) 로 총판매가격 출력
select to_char(purchase_date,'yyyy') 구매년도, to_char(sum(pd_price*cnt),'$999,999,999,999') "총 판매금액" from purchase
group by to_char(purchase_date,'yyyy') order by to_char(purchase_date,'yyyy');
-- 구매 아이디 별로(10개의 아이디로 구성) 총 판매가격 출력
select u.id "구매 아이디", p.userid "아이디 NO", to_char(sum(p.pd_price*p.cnt),'$999,999,999,999') "총 판매금액"
from pd_id u, purchase p where u.userid=p.userid group by u.id, p.userid order by "총 판매금액";쿼리
구매 년도별 (2010~2020) 로 총판매가격 출력
구매 아이디 별로(10개의 아이디로 구성) 총 판매가격 출력
개발자 준비의 준비준비중..