본문 바로가기

전체 글

 (107)
속성 선택자 1. [속성] 선택자 기본형 태그명[속성명] 속성 선택자는 태그에 해당되는 속성이 존재하는 경우에 스타일을 지정하는 선택자이다. 예시 코드를 보자. 메뉴 작성 1 메뉴 작성 2 메뉴 작성 3 메뉴 작성 4 li 태그를 작성하였고 3개의 태그에는 title 속성이 있고, 나머지 하나의 태그에는 없는 형태로 작성하였다. 여기에 title 속성을 가진 li 태그에만 스타일을 적용하고자 한다면 다음과 같은 스타일을 적용할 수 있다. 메뉴 작성 1 메뉴 작성 2 메뉴 작성 3 메뉴 작성 4 2. [속성 = 값] 선택자 기본형 태그명[속성명 = 속성값] 속성 선택자에서는 속성명이 일치하기만 하면 모두 선택되었지만, 속성 = 값 선택자는 속성의 값을 별도로 지정하여 더 세밀한 스타일 적용이 가능하게 된다. 위에 작성..
combination selector : 연결 선택자 1. 연결 선택자란? 선택자에 다른 선택자를 연결하여 적용 대상이 되는 태그를 한정시키는 선택자를 말한다. 2. descendant selector : 자손 선택자 기본형 상위요소 하위요소 구분 요소 : 공백 적용 범위 : 지정한 모든 하위 요소에 스타일 적용 자손 선택자는 부모(조상) 요소에 포함되는 모든 하위요소에 대한 스타일 적용을 위하여 사용하는 선택자이다. 부모 요소에 포함되는 자식 요소뿐만 아니라 자손 즉 손자 요소에게도 그 영향이 미친다는 특징이 있다. 자식 p 1 손자 p 1 위의 코드에서 스타일을 적용하고자 하는 범위는 div 태그 내에 있는 p 태그 전부이다. 때문에 자손 선택자를 사용하여 상위요소 쪽에 div 를 하위요소 쪽에 p 를 작성하여 출력하였다. 자손 선택자는 더 세부적으로 ..
정렬 SORTING 1. 정렬이란? 기본적으로 SQL 에서는 SELECT 로부터 검색된 결과를 테이블에 입력된 순서대로 출력한다. 하지만 특정 컬럼을 기준으로 오름차순 또는 내림차순을 적용하고자 할 때가 발생한다. 그러한 경우 바로 ORDER BY 절의 내용을 통해 적용할 수 있다. 기본적으로 문자값은 영문일 경우 알파벳 순서로, 한글일 경우 가나다순으로 출력된다. 숫자는 가장 작은 값이 먼저, 날짜는 과거 순으로 출력된다. ORDER BY COLUMN, EXPRESSION [ASC | DESC] ASC 는 기본 값으로 앞서 기본적으로 나타나는 순서를 말한다. DESC 는 내림차순으로 기본 순서의 반대로 출력하고자 할 때 사용할 수 있다. 2. 다중 열에 의한 정렬 ORDER BY 절에 여러 개의 컬럼 명을 작성하게 되면 ..
집합 연산자 : UNION 1. 집합 연산자란? SELECT [UNION | UNION ALL | INTERSECT | MINUS] SELECT 행집합에 대하여 부분 집합을 결과로 반환하는 연산자이다. UNION : 두 집합에 대해 중복되는 행을 제외한 합집합 (교집합을 한 번만 출력한다.) UNION ALL : 두 집합에 대해 중복되는 행을 포함한 합집합 (교집합이 총 두 번 출력된다.) INTERSECT : 두 집합 간의 교집합 MINUS : 두 집합 간의 차집합 📌 사용 주의 집합 연산자는 집합 연산의 대상이 되는 두 테이블의 컬럼 수가 동일하고, 대응되는 컬럼끼리의 데이터 타입 또한 동일해야 사용 가능하다. 2. UNION, UNION ALL 연산 UNION과 UNION ALL 은 수학에서의 합집합을 생각하면 된다. 예시로..
NULL 이란? 1. NULL 의 개념 SQL 에서의 NULL 은 미확인 값 또는 아직 적용되지 않은 값을 의미한다. 0, 공백 또한 값이 있는 것이기 때문에 NULL 과는 다르다. 0 : 하나의 숫자 공백 : 하나의 문자 데이터가 NULL 이라고 하는 것은 즉, 현재 시점에서 그 값을 정확히 알 수 없기에 표시하지 못한다 라는 의미로 해석할 수 있다. NULL 은 해당 컬럼의 제약 조건 중 NOT NULL 이 없으면 데이터 타입에 상관없이 쓰일 수 있다. 만일 NULL 과 연산을 하는 경우에는 결과 값이 NULL 로 출력된다. 스칼라 함수(REPLACE, NVL, CONCAL 제외) : NULL 로 리턴 집계 함수 : NULL 무시하고 연산 수행 이 데이터를 가지고 교수별로 월급을 얼마나 받을지를 알려면 SAL 컬럼의..
HTML5 시멘틱 태그 1. 시멘틱 태그 시멘틱 태그는 그 자체로 기능하는 바는 없으나, 유의미한 이름을 태그명으로 사용하고 있기 때문에 태그명만으로 해당 내용이 문서 상에서 어떠한 부분을 담당하고 있는지 태그 속성을 보지 않고도 알 수 있게 해준다는 것에 의의가 있다. 문서 구조는 여러 시멘틱 태그로 이뤄질 수 있으며, 지정된 자리가 있는 것이 아니기 때문에 시멘틱 태그 안에 또다른 시멘틱 태그가 올 수도 있음을 유의해야 한다. 2. CAT WORLD 고양이가 세상을 구한다 고양이 안내 고양이 소개 고양이 역사 고양이 최고 고양이는 최고라구요 수 바이며, 천자만홍이 위하여서. 사랑의 만물은 열락의 얼마나 없는 못할 가슴이 구하지 그들의 힘있다. 사라지지 있으며, 이것은 불어 있는 품으며, 그들에게 목숨이 긴지라 듣는다. 곧 ..
표 스타일 속성 1. border 속성 : 표 테두리 스타일 결정하기 border : table 태그 내에서 border 을 주게 되면 표의 테두리와 셀의 테두리 모두 한 번에 지정할 수 있지만, css 상에서 border 값을 줄 때에는 표의 테두리와 셀의 테두리를 각각 지정해 주어야 한다. 셀1 셀2 셀3 셀4 2. border-collapse 속성 : 테두리 통합, 분리하기 border-collapse : collapse | separate 앞서 살펴본 것처럼 표의 테두리와 셀의 테두리 간의 차이가 있기 때문에 이 간극을 조정하기 위하여 border-collapse 속성을 사용할 수 있다. 위의 예시의 테두리를 합쳐보자. 셀1 셀2 셀3 셀4 셀의 테두리는 안쪽에서의 구분만을 위해 남겨진 것을 확인할 수 있다. 3..
z-index 속성 1. z-index 속성 : 요소 쌓는 순서 정하기 z-index : 요소 간의 쌓이는 순서를 지정할 수 있게 도와주는 속성이다. z-index 값이 작을수록 아래에 쌓이고, 값이 클수록 위에 쌓인다. 이는 화면을 기준으로 말하면 값이 작을수록 뒤쪽에, 값이 클수록 앞쪽에 요소가 나타나는 것이다. 값을 따로 지정하지 않은 경우 1 의 값을 가지며, 그 후에 삽입되는 요소들은 값이 점점 커지게 된다. 즉, 뒤의 요소가 점점 더 앞으로 쌓이는 것이다. 먼저 z-index 값을 지정하지 않았을 경우를 살펴보자. 1 2 3 박스가 문서 상에 작성된 순서대로 쌓인 것을 확인할 수 있다. 그럼 임의로 z-index 값을 지정하여 쌓이는 순서를 변경해 보겠다. 1 2 3 좀 더 겹쳐 보기 위해 위치를 조정하였다. 이..

티스토리툴바