웹개발 교육/JavaScript
[10일] JavaScript (4) - 이중 반복문, for 연습
성적표 만들기 성적표 HTML 삽입 미리보기할 수 없는 소스 이중 반복문 반복문도 여러 번 중첩하여 사용이 가능하다. 이를 이용하여 구구단을 출력해보자 //문제) 구구단 2~9단 출력하기 for (let dan=2; dan
전체 글
웹개발 교육/JavaScript
[9일] JavaScript (3) - switch ~ case문, for문, break, continue, while, do ~ while
switch ~ case문 경우의 수의 목록 중에서 동일한 값을 찾아서 수행한다. break : switch문을 빠져나온다. default : 목록 중에서 없는 경우 무조건 수행한다. // 1. 값 : 실수형으로 경우 수는 사용 불가 // case 값은 반드시 순차적이지 않아도 된다 switch (10) { case 10 : document.write("SEOUL"); break; case 20 : document.write("JEJU"); break; case 30 : document.write("BUSAN"); break; } //switch end // 2. default : 목록에 값이 없으면 무조건 수행 switch (40) { case 10 : document.write("SEOUL"); br..
웹개발 교육/JavaScript
[8일] JavaScript (2) - 형변환, Math, if문
자료형 변환 document.write(10+20); // 30 document.write("10"+"20"); // 1020 document.write(""); 정수 1020과 문자열 1020은 화면 상에서 사용자에게 동일하게 보인다. 하지만 우리는 정수로 입력된 숫자를 문자열로 바꾸거나 또는 문자열을 숫자로 바꿔야 할 상황이 발생할 수 있다. 이때 형 변환을 사용한다. 문자열을 숫자형으로 변환 1. Number() // 숫자로 구성된 문자열을 숫자형으로 변환 가능 // 참조 https://www.w3schools.com/jsref/jsref_number.asp document.write(Number("10")); // 10 document.write(""); document.write(Number("..
웹개발 교육/JavaScript
[7일] JavaScript (1) - 자료형, 연산자
프로그램 언어(Java, Python, C, JSP ...) 기초 : 연산자, 조건문, 반복문, 배열, 함수 JavaScript 자바스크립트 웹페이지의 3요소 : 구조(HTML) + 표현(CSS) + 동작(Javascript 또는 웹 프로그래밍 언어) 웹브라우저에서 interpreter방식으로 해석되는 스크립트 언어 Server Side Interface : JavaScript on Server : JSP, ASP, PHP ~~~ HTML 문서를 좀 더 역동적으로 동작시킬 수 있다 jQuery : JavaScript를 라이브러리화 해 놓은 오픈소스 기본 문법 대소문자를 구분한다 종결 문자 ; 안에 작성한다. 컴파일 원시 프로그램 : Source 목적 프로그램 : Object document.write()..
웹개발 교육/CSS
[6일] css (3) - display, 2D Transforms, 플래시 메뉴, <meta>, 미디어쿼리
overflow 영역을 벗어나는 부분에 대해 숨기거나 스크롤을 넣을 수 있다. The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. display none 쇼핑몰 등에서 작은 디스플레이에 안내사항이나 광고를 띄우는 경우가 있다. 닫기를 누르면 디스플레이가 사라지는데 display 속성을 사용하여 사라지게 할 수 있다. display: block; /* none | block 화면..
웹개발 교육/CSS
[5일] CSS (2) - 선택자 활용, 포지셔닝
태그의 상세 속성 접근 ... 세계 손흥민 김연아 박지성 아이티윌 태그 중 어느 한 개만 접근하는 것도 가능하다. /* 태그의 상세 속성 접근 */ #nav > ol >li:nth-child(2) { /* 요소 중에서 2번째 */ font-weight: bold; } /* 아이티윌 링크만 CSS 적용 */ #nav > ol > li > a { width: 200px; height: 100px; background-color: hotpink; text-decoration-style: wavy; } #nav > ol >li:nth-child(2) 여기에서는 순서를 1부터 매겨서 2. 김연아에 css가 적용되었다. 보통 0부터 시작하지만 1부터 시작하는 경우도 있다. Active Selector a:link ..