본문 바로가기

전체 글

 (107)
CSS Diner : selector 연습하기 (11 ~ 20번) 11. Select everything on a plate 정답 : plate * 해설 : 이번 문제는 접시 위의 모든 요소를 선택하는 문제이다. 모든 요소 * 중에서도 접시를 조상 또는 부모로 가지고 있어야 하기 때문에 공백을 이용하여 조상 또는 부모로 plate 를 명시해준다. 12. Select every apple that's next to a plate 정답 : plate + apple 해설 : 이번 문제는 접시 다음에 있는 사과를 선택하는 문제이다. 즉, 크기와 상관없는 사과를 선택할 것인데, 그 사과 중에서도 접시를 인접 형제로 가지고 있는 사과만 선택하는 것이다. 인접 형제를 선택하는 선택자는 + 로 구분하여 '접시를 인접한 형제로 가진 + 사과' 처럼 사용할 수 있다. 13. Select..
CSS Diner : selector 연습하기 (1 ~ 10번) 1. Select the plates 정답 : plate 해설 : 테이블 위의 모든 접시를 선택해야 하는 단계이다. 접시 태그에 class 또는 id 식별자가 없기 때문에 태그명으로 선택한다. 태그명에 일치하는 모든 태그가 선택된다. 2. Select the bento boxes 정답 : bento 해설 : 테이블 위의 물건 중 도시락만 선택해야 하는 문제이다. 모두 식별자가 없기 때문에 태그명으로 선택하였다. 3. Select the fancy plate 정답 : #fancy 해설 : 테이블 위의 물건 중 파란 테두리가 있는 접시만 고르는 문제이다. 해당 요소에는 id 식별자가 주어져 있기 때문에 해당 식별자로 선택한다. id 식별자는 이름 앞에 # 을 붙여서 표기한다. 4. Select the app..
데이터 타입 변환 1. 묵시적 데이터 타입 변환 묵시적 데이터 타입 변환은 WHERE 절에서 서로 타입이 맞지 않은 컬럼과 상수를 비교하려 하였을 경우, 오라클 내부에서 정확한 연산을 처리하기 위하여 묵시적으로 데이터 타입을 숫자 타입으로 변경하는 것을 말한다. 'WHERE 컬럼 = 상수' A의 데이터 타입 B의 데이터 타입 변환 결과 NUMBER VARCHAR2 또는 CHAR B 가 NUMBER 타입으로 변환 VARCHAR2 또는 CHAR NUMBER A 가 NUMBER 타입으로 변환 즉 컬럼, 상수 어느 쪽이 문자 타입이어도 둘의 타입이 일치하지 않을 때에 숫자가 아닌 쪽을 숫자로 묵시적 타입 변환을 하는 것이다. 학생 테이블의 GRADE 컬럼은 CHAR 로 데이터 타입이 지정되어 있기 때문에 숫자 상수와의 비교 연산..
애니메이션 1. 애니메이션 트랜지션과 비슷하지만 수도 클래스를 사용하지 않고 적용할 수 있다는 점에서 차이점이 있다. 특정 지점을 변경 지점(keyframe)으로 잡아 일정한 스타일의 변화를 주게 된다. 2. @keyframes 속성 : 애니메이션 변경 지점 설정하기 @keyframes { {}} 애니메이션은 진행율에 따라 0% 부터 100%까지 지정되며 세부 지점을 따로 지정할 수 있다. 또는 from(0%) , to(100%) 로도 지정이 가능하다. 위의 예시는 진행율이 0% 즉 시작할 때에는 배경 색상이 파란색에 테두리가 검정색이고 형태는 사각형으로 시작한다. 하지만 애니메이션이 3초간 진행이 되면서 100% 로 향해갈 때에 배경 색상은 하늘색에 테두리는 파란색 형태는 원형으로 변형이 되고 애니메이션이 끝나면..
transition : 전환 1. 트랜지션이란? 수도 클래스와의 조합으로 코드가 작성되고, 웹 요소의 배경 색, 테두리, 형태 등의 스타일이 바뀌는 것을 의미한다. 수도 클래스와 함께 쓰여야 하기 때문에 사용자 반응이 필수적으로 있어야 한다. 2. transition-property 속성 : 트랜지션을 적용할 속성 지정하기 transition-property : all | none | 1️⃣ all : 기본값으로, 요소의 모든 속성이 트랜지션의 대상이 된다. 2️⃣ none : 트랜지션이 적용되는 동안에 아무 속성도 영향을 받지 않는다. 3️⃣ : 트랜지션이 적용될 특정 속성을 지정한다. 지정할 속성이 여러 개인 경우 쉼표(,)로 구분한다. 3. transition-duration 속성 : 트랜지션 진행 시간 지정하기 transit..
transform : 변형 1. 2차원 변형 함수 기본형 transform : 변형함수; 2차원 변형은 x 축과 y 축을 기준으로 하여 수평 또는 수직으로 이동하거나 회전하는 것을 말한다. x 축과 y 축의 기준이 되는 원점은 별도의 지정이 없으면 top 0, left 0 에 위치해 있다. 즉 x 축은 오른쪽으로 갈수록 그 값이 커지고, 왼쪽으로 갈수록 그 값이 작아진다. y 축은 아래로 갈수록 커지고, 위로 갈수록 작아진다. 크기 관련 변형 함수 1️⃣ scale(x, y) : x 축과 y 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다. 원본은 1이 기준이다. 2️⃣ scaleX(x) : x 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다. 3️⃣ scaleY(y) : y 축에 지정한 크기만큼을 배율로 하여 확대..
SQL 단일 행 함수 1. 단일 행 함수란? 단일 행 함수는 함수 하나의 연산 당 결과 행도 하나라는 의미이다. 즉, 총 15 개의 데이터가 있는 컬럼을 대상으로 함수를 실행하였을 때 결과 행 또한 15 개가 출력되는 것이다. 2. 문자 함수 문자 데이터를 입력받아 문자나 숫자로 결과를 반환하는 함수이다. 1️⃣ 대소문자 변환 함수 INITCAP : 문자열의 첫 문자만 대문자로 변환 INITCAP('student') 👉 Student LOWER : 문자열 전체를 소문자로 변환 LOWER('STUDENT') 👉 student UPPER : 문자열 전체를 대문자로 변환 UPPER('student') 👉 STUDENT 특히 LOWER 과 UPPER 함수는 검색어의 키워드를 구분하기 할 때에도 유용하게 활용할 수 있다. 사용자가 영..
가상 클래스와 가상 요소 1. 가상 클래스(pseudo class) 사용자의 특정한 동작에 반응하여 스타일을 줄 수 있도록 하는 가상 클래스 선택자이다. 1️⃣ :link 가장 클래스 선택자 : 방문하지 않은 링크에 스타일 적용 텍스트 링크의 경우 기본적으로 파란색(blue) 글자와 밑줄로 표시되는데, 이를 표시할 때에 링크의 밑줄을 없애거나, 색상을 변경하는 등의 스타일을 적용할 수 있다. link 가상 클래스 선택자 적용 안 함 link 가상 클래스 선택자 적용 함 2️⃣ :visited 가상 클래스 선택자 : 방문한 링크에 스타일 적용 링크에 한 번 이상 방문하게 되면 기본적으로 자주색(purple)으로 표시되는데, 방문했던 링크에 대해 스타일이 변경되지 않게 하려면 적용할 수 있는 선택자이다. visited 가상 클래스 ..

티스토리툴바