목록분류 전체보기 (91)
Rainbow
조건에 따라 흐름 조절하기 if문, if문 else문 if문과 if문 else문의 작동원리 if - 조건이 맞는지 확인 한다면 if문을 사용한다. if...else - 조건이 맞을 때와 조건이 맞지 않을 때 구별할 때 사용한다. if : 소괄호 안에 조건이 참이면 중괄호 안에 있는 소스를 실행한다. 거짓이며 중괄호 안에 소스를 무시한다. if..else: 실행할 명령어가 둘 이상일 경우 중괄호로 묶고 중괄호 안에 실행 순서대로 명령어를 나열한다. ex) var number = prompt("숫자를 입력하세요"); if(number=60) alert("통과") : alert("실패"); 조건 조건이 true 실행 조건이 false 실행 truthy 와 falsy 조건을 확인할 때 유용하게 사용된다. - i..
절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다 pt ( 1pt - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다. RGBA( ) rgb(R, G,..
텍스트 효과 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에 할..