고정 헤더 영역
상세 컨텐츠
본문
오늘은
프로그래머가 되기로 마음을 먹고 공부를 시작한지
두달이 되었습니다
생각보다 금방 시간이 흘렀습니다
처음과 달라진점도 꽤 많은 것 같습니다
코드를 보는 일에 익숙해졌다는 점이 제일 큰것 같습니다
일상이 됐다는 느낌입니다
학원 수업
<<html, css>>
* colgroup
<table> - row(tr행), column(td열)
칼럼<td>
<colgroup>
<col style="color:red">
<col>
</colgroup>
= 2열의 표
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colgroup태그 예제</title>
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<!-- 2행 3열 -->
<table>
<colgroup>
<col>
<col style="background-color: aqua;">
<col>
</colgroup>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
* <select> 태그
<select>
<optgroup>
<option>
</option>
</optgroup>
</select>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록 선택 태그 예제</title>
<style>
#wrap {
width: 800px;
margin: 50px auto;
}
form {
width: 500px;
margin: 0 auto;
}
fieldset {
margin-bottom: 16px;
}
ul li {
list-style: none;
margin: 16px;
}
select {
height: 25px;
}
input[type=submit], input[type=reset] {
padding: 5px 10px;
cursor: pointer;
/* 마우스 포인터가 손모양으로 바뀜 */
}
</style>
</head>
<body>
<!-- 수강 신청 폼 -->
<div id="wrap">
<form action="process.jsp" method="post">
<fieldset>
<legend>수강 신청</legend>
<ul>
<li>
<label for="cid">학과번호</label>
<input type="text" id="cid" name="cid"
autofocus required>
<!-- autofocus = 페이지가 시작시 커서 위치 지정 -->
<!-- required 유효성 검사 -->
</li>
<li>
<label for="sname">이름</label>
<input type="text" id="sname" name="sname"
required>
</li>
<li>
<label for="major">학과</label>
<select name="major" id="major">
<option value="software">소프트웨어학과</option>
<option value="mechanic">기계공학과</option>
<option value="electric">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
</select>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="신청하기">
<input type="reset" value="취소하기">
</div>
</form>
</div>
</body>
</html>
* 파일 첨부
- <input type="file">
* 이메일
- <input type="email">
* 연락처
- <input tupe="tel">
* 배송지정일
- <input type="date">
* 메모
- <textarea>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 첨부 예제</title>
<style>
fieldset {
margin-bottom: 16px;
}
input[type=submit], input[type=reset] {
padding: 5px;
}
</style>
</head>
<body>
<h1>김치냉장고 주문하기</h1>
<form action="" method="post">
<fieldset>
<legend>반품 정보</legend>
<p>만일 수령한 상품에 문제가 있다면 즉시 반품 신청해 주세요</p>
<p>반품 신청시 상품의 상태를 사진으로 첨부해 주세요</p>
<hr>
<input type="file" name="upload">
</fieldset>
<div>
<input type="submit" value="반품 신청">
<input type="reset" value="취소 하기">
</div>
</form>
</body>
</html>
<<sql>>
* window함수
행순서 관련함수
-- 행순서 관련함수
-- lead(): 하위 행의 값을 상이 행에 출력함
-- lag(): 상위 행의 값을 하위 행에 출력함
CREATE TABLE EMP_INFO(
EMP_NO varchar2(3), -- 사원번호
NAME varchar2(20), -- 사원이름
SAL number -- 급여($달러 기준)
);
insert into EMP_INFO values('100', '김하나', 24000);
insert into EMP_INFO values('101', '이하나', 7000);
insert into EMP_INFO values('102', '박하나', 8000);
insert into EMP_INFO values('103', '최하나', 12000);
insert into EMP_INFO values('104', '정하나', 6000);
insert into EMP_INFO values('105', '오하나', 15000);
insert into EMP_INFO values('106', '임하나', 21000);
insert into EMP_INFO values('107', '고하나', 16000);
insert into EMP_INFO values('108', '윤하나', 9000);
insert into EMP_INFO values('109', '한하나', 13000);
truncate table EMP_INFO;
drop table EMP_INFO;
select * from EMP_INFO;
-- LEAD() OVER()
-- SAL2 = 3행 위로 출력
-- SAL3 = NULL인 경우
select EMP_NO,
NAME,
SAL,
LEAD(SAL, 3) OVER(order by SAL desc) SAL2,
LEAD(SAL, 3, 0) OVER(order by SAL desc) SAL3
from EMP_INFO;
-- LAG() OVER()
-- SAL2 - 3행 아래로 출력함
select EMP_NO,
NAME,
SAL,
LAG(SAL, 3) OVER(order by SAL desc) SAL2,
LAG(SAL, 3, 0) OVER(order by SAL desc) SAL3
from EMP_INFO;
commit;
case when
decode()
-- 조건 처리 함수
CREATE TABLE Mytest(
class varchar2(1), -- 반
name varchar2(6) -- 이름
);
insert into Mytest values ('A', '조조');
insert into Mytest values ('A', '조조');
insert into Mytest values ('A', '조조');
insert into Mytest values ('B', '유비');
insert into Mytest values ('B', '관우');
insert into Mytest values ('C', '여포');
insert into Mytest values ('C', '여포');
create table mytest2(
col1 number(1)
);
insert into mytest2 values (null);
insert into mytest2 values (0);
insert into mytest2 values (null);
insert into mytest2 values (0);
insert into mytest2 values (null);
select * from Mytest;
commit;
-- 전체 인원수
select count(*)
from Mytest;
-- 반 별 인원수
select class, count(name) 인원수
from Mytest
group by class;
-- 반 별 인원수(중복 이름 제거후) 계산
select class,
count(DISTINCT name)
from Mytest
group by class;
-- DECODE(칼럼명, 조건, 참, 거짓)
select
count(decode(class, 'A', 1)) A,
count(decode(class, 'B', 1)) B,
count(decode(class, 'C', 1)) C
from Mytest;
-- case when then end 구문으로 변경
select
count
(case when class='A' then 1 end) A,
count
(case when class='B' then 1 end) B,
count
(case when class='C' then 1 end) C
from Mytest;
-- mytest2 조건 처리
select * from mytest2;
-- col1의 데이터가 null이면 -1로 표기
select
decode(t.col1, null, -1, 0) DATA1,
case when t.col1 is null then -1
else t.col1
end DATA2
from mytest2 t;
CSS 공부
<<css 단위>>
<상대적 단위>
* 퍼센티지
= 항상 다른 값과 상대적이다
=> 무언가의 퍼센티지란 의미
=> 무언가 - 설정하는 특성의 그 무언가
= 부모의 특성에 상대적
= 요소 자체의 다른 값을 기준으로 삼는 경우도 있다
ex) 너비를 요소의 50%로 설정 => 부모 요소의 절반 너비로 설정하는 것
* em(엠)
= 특성에 따라 다른 값이 바뀜
ex) 글꼴 크기를 1em으로 설정 -> 부모 요소와 똑같은 크기가 된다
2em으로 설정 - > 부모 요소보다 2배 크게 된다
= 해당 특성의 부모가 가진 값을 기준으로 삼는 것
* rem(렘 = root em)
= em과 유사
- em의 단점 = 단계별로 누적된다는 것
=> 목록을 중첩시킬수록 단계별로 값이 변해감
= 글꼴 크기를 부모 요소의 크기에 따라 바꾸지 않고
루트 HTML 요소의 글씨 크기에 따라 바꾼다
=> 문서 전체에서 하나의 글꼴 크기에 비례하여 바뀐다는 의미
<알파채널>
= RGB + A
알파채널 = 색상이 비치는 정도 즉 투명도를 결정한다
값 = 0 ~ 1사이
=> 1 = 전혀 투명하지 않다, 0 = 완전히 투명하다
<불투명도>
= RGBA같은 색상이나 채널 중 하나가 아니라
특정 요소에 지정해서 그 해당 요소나
해당 요소의 콘텐츠 및 자손을 포함한
전체 요소의 투명도를 결정하는
특성중의 하나
=> 불투명도를 사용할 때 버튼이나 다른 콘텐츠가 있으면
해당 콘텐츠도 영향을 받음
<<위치 특성>>
position : static;, relative;, asolute;
-> 위치특성이 설정한 값에 따라서 -> top, right, bottom, left 등이 결정된다
* static = 위치의 default 값
=> 모든 요소의 기본 위치 특성
=> top: 100px 같은 값을 넣어도 영향이 없다
* relative = 문서의 일반적인 흐름에 따라 위치가 정해지지만
top, right, bottom, left 등으로 현 위치와의 상대적 위치로 오프셋을 줄 수 있다
=> 양수의 값을 주면 오른쪽, 아래쪽으로, 음수의 값을 주면 왼쪽, 위쪽으로 이동한다
* absolute = 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않는다
=> 공간에 겹쳐진 것
= 가장 가까이 위치한 조상이 있다면 해당 조상을 기준으로 하거나
가까이 없다면 초기 컨테이닝 블록 즉 <body>를 기준으로 상대적인 위치에 배치된다
=> 부모 요소의 위치 특성에 따라 달라진다는 개념
* fixed = fixed로 지정되면 그 자리에 계속 유지된다
배치되는 위치는 항상 컨테이닝 블록에 상대적
=> absolute와 비슷하지만 부모 요소 같은 것과는 관계가 없다는 점이 다르다
<<네비게이션 바>>
* fixed = 일반 문서 흐름에서 제거되고 공간도 차지하지 않으며 초기 컨테이닝 블록의 상대적 위치
=> 초기 컨테이닝 블록 위치에서 오프셋을 항상 주는 상태로 유지
=> 스크롤을 움직여도 계속 위쪽에 위치하는 네비게이션 바를 만드는 방법이다
* sticky = 시작할 때는 위쪽에 고정되지 않은 상태
일단 스크롤을 따라가지만 위쪽에 도달하면 그 위치에 머문다
=> 처음에는 고정하지 않았다가 나중에 고정되게 할 수 있다
<<transition = 전환>>
= 전환도 하나 이상의 특성으로 이루어져있다
= 한 특성 값에서 다른 값으로 변화할 때 전환으로 애니메이션 효과를 주는 것
* 두개의 특성 사이에 딜레이(s초단위 지연)를 주어
변화를 주는 두 개의 특성 모두 애니메이션 효과가 적용 되어 애니메이션화가 된다
=> hover 외에도 다른 특성에도 쓸 수 있다
* 대기 시간을 정해서 전환되는 시작점을 정해줄 수 있다
* 타이밍 기능 - linear변화 = 일정한 속도로 변화
- ease-in = 천천히 시작됐다가 점점 속도가 빨라진다
- step = 6단계에 걸쳐서 변화
- cubic-bezier 커브 = 앞뒤로 움직이는 듯한 변화
=> 동일한 시간에 걸쳐서 시작 됐다가 끝이 나는 것인데 그 방법이 아주 다양하다
=> 애니메이션 효과를 줄 특성 이름, 지속시간(s, ms)단위로 지정, 타이밍 기능 지정
* 주의할 점 = 전환하려는 특성을 추려서 한 번에 다 전화하지 말아야 한다
=> 코드를 바꿀일이 생길 수도 있고,
갑자기 엉뚱하게도 예상치 못한 곳에 전환이 생길 수 있기 때문
2023. 10. 31 (화)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 62일차 (2) | 2023.11.04 |
|---|---|
| 프로그래머 도전기 61일차 (2) | 2023.11.01 |
| 프로그래머 도전기 59일차 (2) | 2023.10.30 |
| 프로그래머 도전기 58일차 (0) | 2023.10.29 |
| 프로그래머 도전기 57일차 (1) | 2023.10.28 |
