🔨보일러 플레이트 코드

보일러 플레이트 코드란(Boilerplate code) 반복되는 코드를 재 사용하는 코드를 의미합니다.

우리가 만들 웹페이지의 뼈대가 되는 코드를 만들어 보면서 웹페이지가 어떻게 구성되어 있는지 살펴 보겠습니다!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

index.html 파일 생성

앞에서 생성한 replit 페이이 왼쪽 메뉴 화면에서 New file 아이콘을 클릭하여 index.html 파일을 만들어 줍니다

코드 복사 & 붙여 넣기

기존에 적혀있는 코드들을 삭제하고 복사한 보일러 플레이트 코드를 붙여 넣어 줍니다.

타이틀 변경하기

웹페이지는 html 파일로 만들어 집니다. html 파일은 다양한 태그들로 구성되어 있는데 <title> 태그는 웹페이지의 제목을 담당 합니다. 기본으로 적혀있는 hello world -> 동물 갤러리 웹페이지로 변경해 줍니다.

<title>동물 갤러리 웹페이지</title>

코드 실행

Run 버튼을 누르면 화면 오른쪽에 우리가 만든 웹페이지가 보여 집니다. 새로운 탭 열기 버튼을 눌러 변경한 타이틀 이름이 잘 보이는지 확인해 보세요!

Previous동물 갤러리 NextBootstrap

Last updated 1 year ago