분류 전체보기 (894) 썸네일형 리스트형 14장 실습 2 DOCTYPE html> 자리 배치도 만들기 1 자리 배치도 var memNum=prompt("몇명이 입장하나요?"); //전체 입장객 수 var colNum=prompt("한줄에 몇명이 앉을 수 있나요?"); // 한 줄에 앉을 사람 수 if(memNum % colNum===0) rowNum=parseInt(memNum/colNum); else rowNum=parseInt(memNum/colNum) +1; document.write("모두" + rowNum+ "개의 줄이 필요합니다."); - 나머지가 없을 때:rowNum=memNum/colNum - 나머지가 있을 때:rowNum=(memNum/colNum) +1 - parseInt() - 괄호 안의 값을 정수로 변환 14장 예제 - if문/if-else문/ 중첩된 if-else문 /Switch문 1. 3의 배수 확인하기(1) DOCTYPE html> 3의 배수 확인하기 1 var userNumber=prompt("숫자를 입력하세요."); if(userNumber%3===0) { alert("3의 배수입니다."); } else { alert("3의 배수가 아닙니다."); } 2. 3의 배수 확인하기 (2) DOCTYPE html> 3의 배수 확인하기 2 var userNumber=prompt("숫자를 입력하하세요."); if(userNumber !== null) { if(userNumber % 3 ===0) alert("3의 배수입니다."); else alert("3의 배수가 아닙니다."); } else alert("입력이 취소됐습니다."); 3. 조건연산자를 사용해 3의 배수 확인하기 - (조건.. 14장 실습 DOCTYPE html> 나이 계산 프로그램 만들기 var currentYear=2023; var birthYear; var age; birthYear= prompt("태어난 연도를 입력하세요.(YYYY)",""); age=currentYear-birthYear+1; document.write(currentYear +"년 현재 "); document.write(birthYear+"년에 태어난 사람의 나이는"+age+"세입니다."); 13장 예제- 간단한 입출력 방법 1. 알림창 출력하기 -alert(메시지) DOCTYPE html> 알림창 만들기 alert("안녕하세요?"); 2. 확인창 출력하기 -confrim(메시지) DOCTYPE html> 확인창 만들기 var reply=confirm("정말 배경 이미지를 바꾸겠습니까?"); 3. 프롬프트 창에서 입력받기 - promt(메시지) 또는 prompt(메시지, 기본값) - 기본값 지정 DOCTYPE html> 프롬프트 창의 기본값 지정하기 var name=prompt("이름을 입력하세요.","아무개"); - 기본값 지정 x DOCTYPE html> 프롬프트 창의 기본값 지정하지 않기 var name=prompt("이름을 입력하세요."); 4. document.write()문 - 웹 브라우저 화면에 출력 담당 DOC.. 13장 예제 - 내부 자바스크립트 사용하기 /외부 스크립트 사용하기 1. 내부 자바스크립트 사용하기 DOCTYPE html> 내부 자바스크립트 사용하기 body{text-align:center;} #heading {color:blue;} #text { color:gray; font-size:15px; } 자바스크립트 위 텍스트를 클릭해 보세요. var heading=document.querySelector('#heading'); heading.onclick=function() { heading.style.color="red"; } 2.외부스크립트 사용하기 DOCTYPE html> 외부 자바스크립트 사용하기 body{text-align:center;} #heading {color:blue;} #text { color:gray; font-size:15px; } 자바스크립트 .. 12장 실습 DOCTYPE html> css 그리드 레이아웃으로 갤러리 만들기 * { box-sizing:border-box; } body{ background-color:#eee; font-size:16px; } #wrapper { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); grid-gap:1rem; } .card { background-color:#fff; box-shadow:0px 1px 5px #222; } .card > header { font-size:1.5rem; padding:0.5rem; } .card > p { padding:0.5rem; line-height:1.6rem; } .card > img { max-w.. 12장 예제- 템플릿 영역을 만들어 배치하기 DOCTYPE html> 템플릿 영역을 만들어 배치하기 #wrapper { width:700px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,100px); grid-template-areas: "box1 box1 box1" "box2 box3 box3" "box2 . box4"; } .box { padding:15px; color:#fff; font-weight:bold; text-align:center; } .box1{ background-color:#3689ff; grid-area:box1; } .box2{ background-color:#00cf12; grid-area:box2; } .box3{ bac.. 12장 예제- 그리드 라인을 사용해서 항목 배치하기 DOCTYPE html> 그리드 라인을 사용해서 항목 배치하기 #wrapper { width:700px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,100px); } .box { padding:15px; color:#fff; font-weight:bold; text-align:center; } .box1 { background-color:#3698ff; grid-column:1/4; } .box2 { background-color:#00cf12; grid-row:2/4; grid-column-start:1; } .box3 { background-color:#ff9019; grid-column:2/4; gri.. 이전 1 ··· 99 100 101 102 103 104 105 ··· 112 다음
