안녕하세요. 오늘은 자바스크립트 lorem ipsum 생성기 만들기에 대해 알려드리겠습니다. 이 프로젝트는 JS의 기본 문법과 DOM 조작을 연습할 수 있는 재미있고 유용한 프로젝트입니다. 그럼 시작해볼까요?

JS Lorem Ipsum Generator

lorem ipsum 생성기란?

lorem ipsum은 라틴어로 ‘고통 그 자체’라는 뜻을 가진 구절로, 1500년 이래로 콘텐츠를 위한 플레이스홀더로 사용되어 왔습니다. 이러한 더미 텍스트로 웹사이트나 프레젠테이션 등의 디자인을 보여줄 때 글자가 들어갈 공간을 채워서 비어보이지 않도록 사용할 수 있습니다. 이번 프로젝트에서는 JS를 이용하여 원하는 개수의 문단을 생성하는 lorem ipsum 생성기를 만들어보겠습니다.

사용자가 입력한 숫자에 따라 문단의 개수를 조절할 수 있습니다.
미리 준비된 lorem ipsum 텍스트 배열에서 무작위로 문장을 선택하여 문단을 구성합니다.
생성된 문단은 HTML의
태그로 감싸져 화면에 표시됩니다.
생성 버튼을 누르면 기존의 문단은 삭제되고 새로운 문단이 생성됩니다.

기본 구조

HTML, CSS, JS 파일을 생성합니다. 저는 각각 index.html, style.css, app.js라고 이름을 지었습니다.
HTML 파일에는 기본적인 구조와 필요한 요소들을 작성합니다. 저는 다음과 같이 작성했습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Lorem Ipsum Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>JS Lorem Ipsum Generator</h1>
        <form id="form">
            <label for="amount">문단 개수:</label>
            <input type="number" id="amount" name="amount" value="1" min="1" max="10">
            <button type="submit" id="generate">생성</button>
        </form>
        <div id="lorem-text-div"></div>
    </div>
    <script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS Lorem Ipsum Generator</title>

</head>

<body>

<h1>JS Lorem Ipsum Generator</h1>

</form>

</div>

</body>

</html>

CSS 파일에는 스타일을 적용합니다.


.container {
    max-width: 800px;
    min-height:300px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

label {
    font-size: 1rem;
    margin-right: 10px;
}

input {
    width: 50px;
    font-size: 1rem;
    text-align: center;
}

button {
    width: 120px;
    height: 40px;
    font-size: 1rem;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
}

#lorem-text-div {
    line-height: 1.5;
}

.container {

max-width: 800px;

min-height:300px;

margin: 0 auto;

padding: 20px;

}

h1 {

text-align: center;

font-size: 2rem;

margin-bottom: 20px;

}

form {

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 20px;

}

label {

font-size: 1rem;

margin-right: 10px;

}

input {

width: 50px;

font-size: 1rem;

text-align: center;

}

button {

width: 120px;

height: 40px;

font-size: 1rem;

background-color: #333;

color: white;

border: none;

border-radius: 5px;

margin-left: 10px;

cursor: pointer;

}

#lorem-text-div {

line-height: 1.5;

}

JS 파일에는 lorem ipsum 텍스트 배열을 선언합니다.

const loremTextList = [
    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis",
    "dolorem ipsum quia dolor sit amet, consectetur, adipisci velit",
    "sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit",
    "sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt",
    "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet",
    "consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt",
    "ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam",
    "quis nostrum exercitationem ullam corporis suscipit laboriosam",
    "nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit",
    "qui in ea voluptate velit esse quam nihil molestiae consequatur",
    "vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"
];

const loremTextList = [

"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis",

"dolorem ipsum quia dolor sit amet, consectetur, adipisci velit",

"sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit",

"sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt",

"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet",

"consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt",

"ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam",

"quis nostrum exercitationem ullam corporis suscipit laboriosam",

"nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit",

"qui in ea voluptate velit esse quam nihil molestiae consequatur",

"vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"

];

프로젝트 구현

이제 준비가 끝났으니, 실제로 프로젝트를 구현해보겠습니다.

HTML 요소를 JS에서 선택합니다.
이벤트 리스너를 추가합니다.
랜덤한 문장을 선택하는 함수를 작성합니다.
문단을 생성하는 함수를 작성합니다.
화면에 문단을 표시하는 함수를 작성합니다.

3.1 HTML 요소 선택하기

먼저, HTML 파일에서 필요한 요소들을 JS에서 선택해야 합니다.

const form = document.getElementById("form");
const amount = document.getElementById("amount");
const generate = document.getElementById("generate");
const loremTextDiv = document.getElementById("lorem-text-div");

const form = document.getElementById("form");

const amount = document.getElementById("amount");

const generate = document.getElementById("generate");

const loremTextDiv = document.getElementById("lorem-text-div");

3.2 이벤트 리스너 추가하기

다음으로, 생성 버튼을 눌렀을 때 문단이 생성되도록 이벤트 리스너를 추가해야 합니다. 저는 다음과 같이 추가했습니다.

generate.addEventListener("submit", (e) => {
    e.preventDefault(); // 폼의 기본 동작을 막습니다.
    const value = parseInt(amount.value); // 입력한 숫자를 정수로 변환
    const randomText = generateText(value); // 문단을 생성하는 함수를 호출
    displayText(randomText); // 화면에 문단을 표시하는 함수를 호출
});

generate.addEventListener("submit", (e) => {

e.preventDefault(); // 폼의 기본 동작을 막습니다.

const value = parseInt(amount.value); // 입력한 숫자를 정수로 변환

const randomText = generateText(value); // 문단을 생성하는 함수를 호출

displayText(randomText); // 화면에 문단을 표시하는 함수를 호출

});

3.3 랜덤한 문장 선택하기

이제 문단을 생성하는 함수를 작성해야 합니다. 이 함수는 입력한 숫자에 따라 문단의 개수를 결정하고, 미리 준비한 lorem ipsum 텍스트 배열에서 무작위로 문장을 선택하여 문단을 구성합니다.

function generateText(num) {
    let text = ""; //
    if (num < 0) {
        text = "<p>0 이상의 숫자를 입력해주세요.</p>";
    } else {
        for (let i = 0; i < num; i++) {
            const randomIndex = Math.floor(Math.random() * loremTextList.length);
            const randomSentence = loremTextList[randomIndex];
            text += `<p>${randomSentence}</p>`;
        }
    }
    return text
}

function generateText(num) {

let text = ""; //

if (num < 0) {

text = "<p>0 이상의 숫자를 입력해주세요.</p>";

} else {

for (let i = 0; i < num; i++) {

const randomIndex = Math.floor(Math.random() * loremTextList.length);

const randomSentence = loremTextList[randomIndex];

text += `<p>${randomSentence}</p>`;

}

return text

}

이 함수에서는 입력된 숫자에 따라 반복문을 돌며 무작위로 lorem ipsum 텍스트 배열에서 문장을 선택하여 문자열에 추가합니다. 그리고 이 문자열을 반환합니다.

3.4 화면에 문단 표시하기

마지막으로, 생성된 문단을 화면에 표시하는 함수를 작성합니다.

function displayText(text) {
    loremTextDiv.innerHTML = text; // 화면의 div 요소에 생성된 문단을 설정합니다.
}

function displayText(text) {

loremTextDiv.innerHTML = text; // 화면의 div 요소에 생성된 문단을 설정합니다.

}

이 함수는 전달받은 문자열을 HTML 요소의 innerHTML 속성에 할당하여 화면에 표시합니다.

이제 lorem ipsum 생성기가 완성되었습니다. 사용자가 입력한 숫자에 따라 랜덤한 lorem ipsum 문단이 생성되어 화면에 표시됩니다. 프로젝트를 실행하고 브라우저에서 테스트해보세요. 이를 통해 JavaScript의 기본 문법과 DOM 조작을 연습할 수 있을 것입니다.

이상으로 ‘자바스크립트 lorem ipsum 생성기’ 프로젝트를 완료했습니다. 어떤 추가 기능이나 개선점이 있다면 계속해서 프로젝트를 확장해보세요. 코딩 공부와 창의성을 키울 수 있는 좋은 프로젝트가 되기를 바라고 또 다른 코딩 정보가 궁금하시다면 블로그도 방문해주세요. 감사합니다.

잡다구리 지식창고

간단한 자바스크립트 lorem ipsum 생성기 만들기

JS Lorem Ipsum Generator

lorem ipsum 생성기란?

기본 구조

프로젝트 구현

3.1 HTML 요소 선택하기

3.2 이벤트 리스너 추가하기

3.3 랜덤한 문장 선택하기

3.4 화면에 문단 표시하기

Leave a Comment 응답 취소