생태계 동물 고양이 강아지 식물 .animal { color: pink; } /* 동물, 고양이, 강아지의 글자 색상 => pink */ 스타일 상속이란, 적용된 스타일 내용이 해당하는 요소의 자식요소, 하위요소 까지 적용되는 것을 말한다. 1. 상속되는 CSS 속성들 글자/문자 관련 속성들이 상속된다. (모든 글자/문자 속성은 아님) font-style (글자 기울기) font-weight (글자 두께) font-size (글자 크기) line-height (줄 높이) font-family (폰트(서체)) color (글자 색상) text-align (정렬) letter-spacing (자간) ... 2. 강제 상속 실질적으로 상속이 되지 않는 CSS 내용을 강제적으로 상속시키는 것을 말한다. inhe..

hover a:hover { color: pink; } [ABC: hover] 선택자 ABC 의 요소에 마우스 커서가 올라가 있는 동안을 선택한다. active a:active { color: pink; } [ABC: active] 선택자 ABC 의 요소에 마우스를 클릭하고 있는 동안을 선택한다. focus input:focus { color: pink; } [ABC: focus] 선택자 ABC 요소가 포커스되면 선택한다. - 포커스가 가능한 요소들 : input, select, textarea 등 - 포커스가 가능하지 않은 요소들을 포커스가 가능한 형태로 만드는 방법 tabindex 속성을 통해 Focus 가 될 수 있는 요소를 만들 수 있다. Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는..

1. before Content div::before { content: 'before!'; } /* before! Content */ [ABC::before] Inline 요소 선택자 ABC 요소 내부의 앞 부분에 내용을 삽입한다. before 선택자를 사용할 경우, content 는 필수 속성이기 때문에 만약 내용이 비어있다 하더라도 content: "" 를 반드시 작성해야 한다. 2. after div::after { content: 'after!'; } /* Content after! */ div::after { content: 'after!'; display: block; width: 30px; height: 30px; background-color: pink; } [ABC::after] Inl..

전체 선택자 (Universal Selector) * { color: blue; } 모든 요소를 선택한다. 태그 선택자 (Type Selector) li { color: blue; } 태그 이름으로 요소를 선택한다. 클래스 선택자 (Class Selector) 파랑 .blue { color: blue; } HTML class 속성의 값으로 요소를 선택한다. 아이디 선택자 (ID Selector) 파랑 #blue { color: blue; } HTML id 속성의 값으로 요소를 선택한다. 일치 선택자 (Basic Combinator) 파랑 span.blue { color: blue; } [ABCXYZ] 선택자 ABC 와 XYZ 를 동시에 만족하는 요소를 선택한다. 자식 선택자 (Child Combinato..

HTML 에서 속성이란 열리는 태그에 작성하는 href, target, src 같은 HTML 의 기능을 확장해주는 개념이다. 기본적으로 요소들은 자신이 사용할 수 있는 속성이 정해져 있다. (img태그: src, a태그: href 등) 하지만 전역 속성은 body 에서 사용하는 태그들의 전체 영역에서 언제든지 사용할 수 있다. 1.title NAVER 요소의 정보나 설명을 지정한다. 해당 요소에 마우스를 올리면 일종의 tooltip 처럼 title 속성이 출력된다. 2. style 요소에 적용할 스타일을 지정한다. 3. class 요소를 지칭하는 중복 가능한 이름이다. css, js 에서 해당 요소를 제어하기 위해서 사용한다. 4. id 요소를 지칭하는 중복이 불가능한 고유한 이름이다. 자주 사용하지는 ..

웹에서 사용할 수 있는 이미지라는 개념은 크게 비트맵과 벡터로 나뉘게 된다. 1. 비트맵 (Bitmap) 각각의 픽셀이 모여 만들어진 정보의 집합 레스터(Raster) 이미지 라고도 부름 일반적인 사진, 그림은 비트맵이 훨씬 더 사용하기에 효과적임 장점: 정교하고 다양한 색상을 자연스럽게 표현할 수 있음 단점: 확대/축소 시 계단 현상이 나타나고 품질이 저하됨 .jpg .gif .png (1). JPG (JPEG) Full-Color 와 Gray-scale 의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용함 손실 압축: 이미지의 픽셀이 손실되면서 압축되기 때문에 용량이 획기적으로 줄어들 수 있음 표현 색상도(24비트, 약 1600만 색상)가 뛰어남 이미지의 품질과 용량을 쉽..