잇스쿨

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

게시판 화면만 봐도 보통 태그를 사용하여 레이아웃을 만든다. 동시에 태그 안에 태그를 활용하여 표의 열을 묶는 그룹을 정의하게 된다. 그리고 태그 안의 태그는 각 행에 대해 각 셀의 스타일을 반복하지 않고, 전체 열에 스타일을 적용하는데 사용된다. 최근 HTML 웹 메일을 태그로 레이아웃을 작업하다가 태그에 width 값을 정의해야 하는 상황이었다. 종종 rwdb나 gdweb을 통해 대형 운영 사이트들을 들어가 마크업을 살펴보다 보면, 태그에 col width="100" 또는 style="width:100px" 이런 식으로 주는 경우가 있었다. "두 가지 방식의 차이가 무엇일까" 라는 궁금증이 생겼다. (너무 늦었을지도 모르지만 그래도 이런 궁금증이 떠오른게 다행이지 않을까) Fact Check - HT..

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 - 비아시아 언어를 제어하는 줄바꿈 속성(가로 영역에 넘친 단어를 분리) ..

Hello World! Hello World! Hello, World! 위의 코드의 결과가 어떻게 될 지 상상해봤을 때, 보편적인 측면에서 생각하면 띄어쓰기가 그대로 반영이 될 것이라고 생각하기 쉽다. 하지만, HTML 마크업 언어에서는 두 칸 이상의 공백은 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 된다. 이러한 공백처리 방식은 CSS로 제어할 수 있으며, white-space의 pre-wrap 속성을 사용하면 줄 바꿈, 공백, 들여 쓰기를 모두 적용할 수 있다.

기본적으로 태그는 시작 태그와 종료 태그 2개로 쌍을 이루며, 그 안에 내용이 들어가게 된다. 종료 태그 없이 시작 태그만 존재하는 태그를 빈 태그(EMPTY TAG)라고 한다. 예를 들어, 은 유효하지 않은 HTML 문법이다. 또한, 자식 노드를 가질 수 없는 요소로 , , , , , , , , , , , , 등이 있다. 기존 HTML4.01에서는 형식으로, XHTML1.0에서는 형식으로 선언해야 하며, HTML5에서는 두 가지 방식 모두 허용하고 있다는 것을 기억하자! [참고] https://seulbinim.github.io/WSA/html-basic.html#%EB%A7%88%ED%81%AC%EC%97%85-%EC%96%B8%EC%96%B4%EC%9D%98-%EB%B6%84%EB%A5%98 HTM..

Summary 호출 문자열을 소문자로 변환하여 반환 원래의 호출 문자열(str)에 영향을 주지 않는다. 모든 브라우저에서 지원한다. JavaScript 1.0 부터 지원한다. 오직 영문자에 대해서만 유효하게 동작한다. 대소문자 구분이 없는 한글 또는 특수기호 등은 해당 메서드를 적용해도 변화가 없다. ↔ toUpperCase()는 대문자로 변환 Syntex str.toLowerCase() Return 호출 문자열을 소문자로 변환한 새로운 문자열을 반환 Ex var str = "Happy Birthday"; console.log(str.toLowerCase()); // happy birthday console.log("HAPPY BIRTHDAY".toLowerCase()); // happy birthday

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..