아래는 JavaScript for 반복문에 대해 초보자가 이해하기 쉽도록 구성한 질문과 답변 형식의 실습용 코드입니다.
HTML, CSS, JavaScript를 포함한 예제이며, 실제 브라우저에서 실행하면서 반복문의 다양한 형태를 체험할 수 있도록 구성되어 있습니다.
실제화면은 아래와 같습니다.
JavaScript for문 실습 문제
Q1. 1부터 5까지 숫자를 출력하는 반복문을 작성하세요.
Q2. 배열 fruits = ['apple', 'banana', 'cherry'] 를 for문으로 출력해보세요.
Q3. 1부터 10까지 짝수만 출력하는 for문을 작성하세요.
Q4. for문을 거꾸로 사용해서 5부터 1까지 출력해보세요.
✅ 구성
- 총 4가지 실습 질문과 답변
- 각 질문은 버튼을 눌러 정답(실행 결과)을 확인
- 스타일은 심플한 카드형 인터페이스
✅ 실습 파일: for-loop-practice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript for문 실습</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: #f4f4f4;
padding: 30px;
}
.card {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.card h3 {
margin-top: 0;
}
.output {
background: #eef;
padding: 10px;
margin-top: 10px;
white-space: pre-line;
border-radius: 5px;
}
button {
padding: 6px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>JavaScript for문 실습 문제</h1>
<!-- 문제 1 -->
<div class="card">
<h3>Q1. 1부터 5까지 숫자를 출력하는 반복문을 작성하세요.</h3>
<button onclick="runQ1()">정답 보기</button>
<div class="output" id="output1"></div>
</div>
<!-- 문제 2 -->
<div class="card">
<h3>Q2. 배열 fruits = ['apple', 'banana', 'cherry'] 를 for문으로 출력해보세요.</h3>
<button onclick="runQ2()">정답 보기</button>
<div class="output" id="output2"></div>
</div>
<!-- 문제 3 -->
<div class="card">
<h3>Q3. 1부터 10까지 짝수만 출력하는 for문을 작성하세요.</h3>
<button onclick="runQ3()">정답 보기</button>
<div class="output" id="output3"></div>
</div>
<!-- 문제 4 -->
<div class="card">
<h3>Q4. for문을 거꾸로 사용해서 5부터 1까지 출력해보세요.</h3>
<button onclick="runQ4()">정답 보기</button>
<div class="output" id="output4"></div>
</div>
<script>
function runQ1() {
let result = '';
for (let i = 1; i <= 5; i++) {
result += i + '\n';
}
document.getElementById('output1').innerText = result;
}
function runQ2() {
let fruits = ['apple', 'banana', 'cherry'];
let result = '';
for (let i = 0; i < fruits.length; i++) {
result += fruits[i] + '\n';
}
document.getElementById('output2').innerText = result;
}
function runQ3() {
let result = '';
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
result += i + '\n';
}
}
document.getElementById('output3').innerText = result;
}
function runQ4() {
let result = '';
for (let i = 5; i >= 1; i--) {
result += i + '\n';
}
document.getElementById('output4').innerText = result;
}
</script>
</body>
</html>
✅ 실습 예시 요약
질문 설명
| Q1 | 기본적인 for문 구조 |
| Q2 | 배열 요소 반복 출력 |
| Q3 | 조건문(if)과 함께 짝수만 출력 |
| Q4 | 거꾸로 카운트하는 for문 |
이 코드를 통해서 for문에 대한 기본적인 실습이 이뤄질 수 있습니다.
참고로 위에서 언급한 내용에 대한 용어 정의입니다.
✅ CSS 속성: white-space: pre-line
1. white-space 속성이란?
HTML에서 줄바꿈(\n)이나 공백(space)은 보통 무시됩니다.
하지만 CSS의 white-space 속성을 사용하면 줄바꿈, 공백, 텍스트 흐름을 제어할 수 있어요.
2. pre-line 이란?
white-space: pre-line; 은 다음과 같이 작동합니다:
항목 작동 여부
| 줄바꿈 \n 유지 | ✅ 유지함 |
| HTML 줄바꿈 <br> | ✅ 유지함 |
| 연속된 공백 | ❌ 무시됨 |
| 텍스트 자동 줄바꿈 | ✅ 자동 줄바꿈 됨 |
즉, 줄바꿈은 지켜주되, 공백은 하나로 처리하고, 박스 너비에 따라 자동으로 줄도 바꿔주는 속성입니다.
3. 예시 코드 (HTML + CSS)
<style>
.box {
width: 300px;
border: 1px solid #aaa;
padding: 10px;
white-space: pre-line;
}
</style>
<div class="box">
안녕하세요!
이 줄은 줄바꿈이 있습니다.\n
그리고 이 줄은 자동으로 길어지면 줄이 바뀝니다.
</div>
📌 실제 출력 형태
안녕하세요!
이 줄은 줄바꿈이 있습니다.
그리고 이 줄은 자동으로
길어지면 줄이 바뀝니다.
4. 어디에 쓰면 좋을까?
- 사용자 입력값을 그대로 보여줄 때 (ex: 댓글, 메모, 설명)
- 줄바꿈을 포함한 텍스트를 정돈되게 표현할 때
- <textarea>에 입력된 내용을 그대로 보여줄 때
5. 다른 white-space 옵션과 비교
속성값 설명
| normal | 줄바꿈 무시, 공백 1개로 처리 (기본값) |
| nowrap | 한 줄로 계속 표시 (줄바꿈 안 됨) |
| pre | 줄바꿈 & 공백 모두 유지, 자동 줄바꿈 ❌ |
| pre-wrap | 줄바꿈 & 공백 유지, 자동 줄바꿈 ✅ |
| pre-line | 줄바꿈 유지, 공백은 하나로, 자동 줄바꿈 ✅ |
🧠 요약
- pre-line은 줄바꿈은 지키고, 공백은 정리하고, 화면 너비에 따라 줄바꿈도 자동으로 해줍니다.
- 사용자 입력을 출력할 때 매우 유용한 옵션입니다.
반응형
'웹제작 강의' 카테고리의 다른 글
| JavaScript 문자열 메서드: 초보자를 위한 친절한 가이드 (0) | 2025.04.23 |
|---|---|
| [웹개발강의] 자바스크립트로 HTML 요소 다루기 (id, class, input) (0) | 2025.04.21 |
| [웹개발강의] JS(자바스크립트) 기초 학습자료(변수 선언 등) (0) | 2025.04.15 |
| [웹개발강의] 버튼 클릭 시 알림 띄우기 (자바스크립트 기초) (0) | 2025.04.14 |
| [웹개발강의] CSS에서 선택자와 속성이란? (0) | 2025.04.14 |
