Rainbow

텍스트 효과 text-shadow : 4px 4px 20px blue; (가로, 세로, 그림자 길이, 색상 ) 테두리와 배경 box-shadow : 4px 4px 20px red; ( 가로, 세로, 그림자 길이, 색상 ) 그라디언트 크롬 background: -webkit-linear-gradient(top, bottom, left, right,(진행방향)(deg각도) white, gray); 익스플로러 background: -ms-linear-gradient(top, blue, white); 파이어폭스 background: -moz-linear-gradient(top, blue, white); 오페라 background: -o-linear-gradient(top, blue, white); 텍스트에쓴 영..

가상 클래스(pseudo class) 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다. 예를 들어, 가 있다고 가정하겠습니다. 이 에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요? 가상 클래스가 없다면 이런 과정을 거치게 됩니다. 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다. p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다. p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다. 여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없습니다. 어쩔 수 없이 다른 언어를 사용해야 하는데, 이는 개발 비용이 들..

HTML: Hyper Text Markup Language HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다. 부모와 자식 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다. 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다. 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 조상과 자손 조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다. 정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다. 조상 요소는 그 요소를 포함하는..

연산자와 피연산자 구별하기 currentYear - birthYear + 1 - currentYear, birthYear, 1 은 피연산자 라고 합니다. - 그외 더히기 빼기는 연산자 라고 합니다. 증감 연산자 이해하기 - 증감 연산자는 피연산자 값을 1만큼 증가 시키거나 감소 시킵니다. var a = 10; var b = a++ + 5; b 15 var c = 10; var d = ++c + 5; d 16 - 위 예시를 보면 증감 연산자는 피연산자 뒤에 있을 때 수식의 처리가 끝난 다음 적용된다. - 반대로 피연산자 앞에 있을 때는 수식을 처리하기 전에 적용된다. - a++은 a(10)와 5를 더하여 b에 할당한 다음에 1만큼 증가 시킨다 - ++c는 c(10) 1만큼 증가 시키고 5를 더해서 d에 할..

수식으로 알아보는 상수와 변수 나이 = 올해연도 - 태어난연도 + 1 언제든 값이 변하므로 변수 항상 값이 일정하다 상수 변수 : 나머지 값은 변할 수 있는 값 입니다. 상수 : 수식의 맨 끝에 있는 숫자 1은 변하지 않는 값 입니다. 변수를 선언하는 규칙 세가지 - 이름은 의미있게 짓는다 - 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다(낙타 표기법) - 선언할 수 없는 이름도 있다(문자, 밑줄, 달러, 기호, 숫자를 사용할 수 있다) 낙타 표기법 : 첫 번째 단어는 소문자로, 두 번째 단어는 대문자로 시작한다. 변수에 값이나 식 저장하기 - 변수를 선언하면서 값을 저장 - 변수를 선언한 다음에 값을 저장 나이 계산 프로그램 만들기 예시문제;) - age에 저장된 값이 크롬 브라우저에 나타..

크롬 브라우저 콘솔 : 자바스크립트 소스를 간편하게 연습할 수 있는 도구 실무에서 많이 사용된다 크롬 브라우저 콘솔 실행 단축키 : ctrl+shif+j를 누르면 화면 아래에 콘솔창이 나타난다. 사용자 입력값 받기 prompt()함수 prompt() : 사용자가 값을 입력하면 입력 받을 수 있는 대화상자 알림창으로 출력하기 alert() alert() : 웹 브라우저에 알림창이 나타나면서 괄호 안에 있는 내용을 알림창에 표시에 줍니다. 웹 브라우저 화면에 출력하기 document.write() document.write() : 즉 결과값을 크롬 브라우저에 출력하는 용도로 사용한다. (웹 문서 괄호 안의 내용을 쓰는 함수)