공부했던 자료 정리하는 용도입니다.
재배포, 수정하지 마세요.
구구단
이중 for 문을 이용해서 만든 간단한 구구단이다.
브라우저의 크기에 따라 크기가 변한다. (너무 작으면 2줄로 나온다..)
document.write( )로 태그를 일일이 쓰는 간단한 프로그램..
HTML 파일 (gugudan.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
<link href="gugudan.css" rel="stylesheet"> <!-- css파일 연결-->
</head>
<body>
<h1>구구단</h1>
<script src="gugudan.js"></script> <!-- js파일 연결->
</body>
</html>기본 HTML형식에 제목만 쓰고 CSS파일과 JS파일을 연결했다.
CSS 파일 (gugudan.css)
body{
text-align: center; /* 전체 가운데 정렬 */
}
div{
width: 10%;
display: inline-block; /* 인라인 블록으로 설정해서 컨텐츠를 가로 정렬 */
border: 1px solid black; /* 테두리 설정 */
margin: 2px; /* 바깥 여백 */
padding: 0px 10px 20px 10px; /* 안쪽 여백 */
}테두리를 설정하고 전체적으로 가운데 정렬을 해서 결과가 보기 좋게 출력되도록 했다.
Javascript 파일 (gugudan.js)
for(var i = 2 ; i <= 9 ; i++){
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for(var j = 1 ; j <= 9 ; j++){
document.write(i + " X " + j + " = " + i * j + "<br>");
}
document.write("</div>");
}단 하나당 <div> 태그로 묶이도록 이중 for 문을 사용했다.
실행결과에서 태그를 살펴보면 2 단부터 9 단까지 총 8 개의 <div> 태그가 생성된 것을 확인할 수 있다.
'Front end > 문제 & 실습' 카테고리의 다른 글
| [Javascript] 클릭하면 사진 바뀌게 만들기 (2) | 2020.01.10 |
|---|---|
| [HTML, CSS, Javascript] D-day 계산기 만들기 (2) | 2020.01.06 |
| [HTML, CSS] 메뉴화면(drop down navigation bar) 만들기 (3) | 2019.05.14 |
| [HTML] 이미지 맵(image map) 사용하기 (1) | 2019.05.11 |