1. 그리드 레이아웃 플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 두고 배치한다. https://hyejin.tistory.com/143 10-2. CSS 플렉스 박스 레이아웃 (flex-direction, flex-flow, flex-wrap, justify-content, align-content, align-self, align 1. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생기면 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 1️⃣ 플 hyejin.tistory.com CSS 그리드 레이아웃은 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 따라서 플렉스 박스 레이아웃..

1. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생기면 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 1️⃣ 플렉스 컨테이너 (부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소이다. 2️⃣ 플렉스 항목 (자식 박스) : 플렉스 박스 레이아웃을 적용할 대상이다. 3️⃣ 주축 (main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. (기본적으로 왼쪽에서 오른쪽으로 수평방향으로 배치한다.) 4️⃣ 교차축 (cross axis) : 주축과 교차하는 방향을 말하며, 기본적으로 위에서 아래로 배치한다. 2. 플렉스 박스 항목을 배치하는 속성 justify-content : 주축 방향의 정렬 방..

1. 반응형 웹 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현하는 것이다. 2. 뷰포트 뷰포트 viewport 란 스마트폰 화면에서 실제 내용이 표시되는 영역이다. 뷰포트는 태그 사이에 태그를 사용해서 작성한다. 뷰포트 단위 1️⃣ vw(viewport width) : 1vw는 뷰포트 너비의 1% 2️⃣ vh(viewport height) : 1vh는 뷰포트 높이의 1% 3️⃣ vmin (viewport minimum) : 뷰포트 너비와 높이 중에서 작은 값의 1% 4️⃣ vmax (viewport maximum) : 뷰포트 너비와 높이 중에서 큰 값의 1% 3. 미디어쿼리 CSS모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스..

* 연습문제 1 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 * 연습문제 2

1. animation CSS3의 animation 속성을 사용하면 자바 스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 1️⃣ @keyframs 속성, animation-name 속성 애니메이션 지점과 이름을 설정하는 속성으로 애니메이션 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다. 이때 애니메이션을 여러개 지정할 때를 대비하여 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다. animation-name : 이름 2️⃣ animation-du..

1. 트랜지션 transition 트랜지션은 웹 요쇠의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 밖는 것처럼 스타일의 속성이 바뀌는 것을 말한다. 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고 한다. 2. transtion-property transition-property 속성은 트랜지션 대상을 지정하는 속성이다. 1️⃣ all : 모든 속성이 트랜지션 대상이 된다. 기본값 2️⃣ none : 트랜지션을 하는 동안 아무 속성도 바뀌지 않는다. 3️⃣ 속성 이름 : 트랜지션 효과를 적용할 속성을 지정한다. 3. transition-duration transition-duration은 transtion-property 에서 트랜지션 대상을 지정했다면 다음으로 진행 시간을 지정..

1. transform CSS에서 변형을 적용하기 위해서는 transform 속성을 사용해서 함수이름과 함께 작성해야한다. transform : 함수 - 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. (수평으로 이동하거나, 수직으로 이동) 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다. 3차원 변형에서 z축은 앞뒤로 이동하고, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아진다. 2. translate() 함수 translate() 함수는 웹 요소를 이동시키는 함수이다. translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다. transform : translate(tx, t..

1. ABS() ABS() 함수는 수치의 절댓값을 구하는 기능으로, 매개변수로 입력한 '수치'의 절댓값을 구한다. ABS(수치) 2. MOD() MOD() 함수는 '수치'를 '나누기 값'으로 나눈후 나머지 값을 구한다. MOD( 수치, 나누기 값) 3. SQRT() SQRT() 함수는 제곱근을 구하는 기능이다. SQRT(수치) 4. CEIL() CEIL() 함수는 '수치'의 올림값을 구하는 기능이다. CEIL(수치) 5. FLOOR() FLOOR() 함수는 '수치'의 내림값을 구하는 기능이다. FLOOR(수치) 6. ROUND() ROUND() 함수는 반올림값을 구하는 기능으로, 매개변수로 입력한 '수치'를 반올림해 '자릿수'만큼의 값을 구한다. ROUND(수치, 자릿수) 7. TRUNC() TRUNC(..

1. SYSDATE SYSDATE는 데이터베이스가 설치된 서버나 개인 컴퓨터의 일시를 특정 형식으로 검색한다. current_date라고 입력해도 sysdate와 같은 결과가 나온다. 2. SYSDATE- TO_CHAR() TO_CHAR() 함수는 '날짜'를 '날짜형식'의 형식화된 문자로 바꾸는 기능이다. TO_CHAR(날짜, [날짜형식]); 3. SYSDATE- TO_DATE() TO_DATE() 함수는 매개변수로 입력한 '날짜 형식 문자열'을 날짜로 바꾸는 기능으로 바꾼 날짜는 +, - 연산이 가능하다. TO_DATE(날짜형식 문자열); 현재 날짜 - BIRTH_DAY /365 하고 1살 더하면 된다. 4. NEXT_DAY() NEXT_DAY() 함수는 지정일 이후의 날짜를 구하는 기능으로, 매개변수..

1. union select 필드명1, 필드명2 ... from 테이블명1 union select 필드명1, 필드명2 ... from 테이블명2; 2. union all select 필드명1, 필드명2 ... from 테이블명1 union all select 필드명1, 필드명2 ... from 테이블명2; union all은 중복을 허용하는 합집합이다. 3. intersect 교집합 select 필드명1, 필드명2 ... from 테이블명1 intersect select 필드명1, 필드명2 ... from 테이블명2; 4. minus 차집합 select 필드명1, 필드명2 ... from 테이블명1 minus select 필드명1, 필드명2 ... from 테이블명2;

1. update update 테이블명 set 필드명1 = 값, 필드명2 = 값, ... where 조건식; 2. insert insert into 테이블명 values (값1, 값2, 값3, ...); or insert into 테이블명 (필드명1, 필드명2...) valeus ( 값1, 값2,...); 3. merge merge 명령은 조건에 따라 지정한 테이블의 데이터를 입력하거나 수정한다. 일반적으로 조건식에 따라 데이터가 있다면 update 구문을 처리하고, 데이터가 없다면 insert 구문을 처리한다. merge into 입력/ 수정할 테이블명 using (테이블명 | 뷰| 서브쿼리) on 조건식 when matched then update set 필드명1 = 값1, ... when not m..

* 연습문제 1 * 연습문제 2 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6