잇스쿨

1. SVG는 무엇? SVG는 확장 가능한 벡터 이미지를 표현하기 위한 포맷이다. 확장이 가능하다는 것은 이미지를 확대했을 경우 품질이 떨어지지 않는다는 큰 장점을 가지고 있다. 또한 텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능하여, 코드로 수정할 수 있기 때문에 다른 이미지 형식보다 강력한 기능을 가지고 있다. 추가로 반응형 대응과 사이즈 변화에 지장이 없다는 점, 브라우저 호환성, SVG 속성 사용이 가능하다는 장점으로 일반적으로 많이 사용하는 파일 형식인 jpg, png보다는 프론트 입장에서는 활용도가 높다 :D 하지만..... IE8에서는 지원이 되지 않는다! 2. 사용법 웹에서 SVG를 사용하는 방법은 다양하지만, 해상도 독립성 및 파일 용량의 최소화를 위해 SVG를..

word-break - 아시아 언어를 제어하는 줄바꿈 속성 - 문장이 길어지면 줄바꿈(normal)이 일어남 특징 설명 기본값 normal 상속 가능 애니메이션 적용 안됨 버전 CSS3 [Property] 1. normal : word-break 속성의 기본값 2. break-all : 글자를 기준으로 무조건 줄바꿈 3. kepp-all : 단어를 기준으로 줄바꿈 * 특수문자와 언어에 따라 사용 여부를 결정해야 함 (특수문자 때문에 CJK, non-CHK 모두 설정한 width를 오버함) → word-wrap:break-word 를 함께 사용 4. inherit : word-break의 값을 상위요소한테 상속받음 word-wrap - 비아시아 언어를 제어하는 줄바꿈 속성(가로 영역에 넘친 단어를 분리) ..

calc() : 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수 The calc() Function Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window: Some text... 위의 코드 예시의 width: calc(100% - 100px); 처럼 css에서 정의하면 브라우저 크기가 줄어들 때마다 해당 함수가 자동적으로 계산한 값을 width에 적용 사용법 사칙 연산이 가능 (곱셈은 *, 나눗셈 / 기호 사용) 곱셈, 나눗셈은 공백이 필요x 덧셈, 뺄셈의 좌우에는 공백이 필요 (ex. 100% - 200px) 왼쪽에서 오른쪽으로..

text-overflow : 지정한 영역을 넘쳐 텍스트가 넘어갈 경우 어떻게 처리할 것인지 지정하는 속성 * 주의 ) 아래의 두가지 조건을 모두 충족할 경우에만 적용 1. overflow의 속성값이 hidden, scroll, auto 일 경우 (visible은 제외) 2. white-space:nowrap 3. width 또는 height가 고정적 속성값 clip | ellipsis | string | initial | inherit clip : 기본값, 텍스트 자름 ellipsis : 잘린 텍스트를 … 기호로 표현 가능 string : 잘린 텍스트를 지정한 문자열로 표시 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod t..

clip clip 속성은 무엇인가를 깎는다는 어원적 의미를 떠올리면 쉬움 정의 clip 1. 핀, 클립 2. (옷에 꽂는, 보석으로 장식한) 핀 3. (무엇을 짧게) 깎음 즉, clip 속성은 요소의 특정 부분만 나오도록 지정 요소의 크기가 변하는 것이 아닌, 포토샵의 mask 기능처럼 선택한 영역만 보여줄 수 있는 것 기본값 : auto 상속 : no 퍼센테이지 : 지정불가 애니메이션 : Yes 버전 : CSS2 문법 clip: auto | shape | initial | inherit auto : 기본(default) 값 clip을 적용한 대상의 원래 크기와 동일하게 적용 clip이 적용 안된 상태와 동일 shape : rect(top, right, bottom, left)형식으로 지정 이는 네변에서..

상태 선택자 : 입력 양식의 상태를 선택할 때 사용하는 선택자 상태 선택자 설명 CSS Level ex :cheked 체크 상태의 input 태그를 선택 CSS3 input:checked :focus 포커스가 있는 input 태그를 선택 CSS2 input:focus :enabled 사용 가능한 input 태그를 선택 CSS3 input:enabled :disabled 사용 불가능한 input 태그를 선택 CSS3 input:disabled :cheked Male Female I have a bike I have a car :focus The width Property Set the width of the input field to 100 pixels. However, when the input fiel..