웹페이지 만들기 (5) 각 페이지 별로 만들기, 상대경로 설정, css연결

page1

<!DOCTYPE  html>

<html>
<head>
    <tile>PACKET MONSTER</tile>
    <meta charset="utf-8">
<style>
    body{
        text-align: center;
        background-color: #070505;
    }
    h2{
        color: rgb(253, 253, 253);
    }

    h2{
        color: rgb(149, 243, 55);
    }

    h3{
        color: rgb(255, 255, 255);
    }
    img {
        height: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    p b {
        font-weight: 300;
        color: rgb(237, 240, 243);

    }
    p {
        color: rgb(132, 255, 9);
    }
    .profile{
         background-color: #c4d0e6;
    border-radius: 20px;
    margin-bottom: 50px;
    padding: 50px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    }
</style>
    </head>

<body>
    <h1>welcome!</h1>
    <h2>저는 패킷몬이에요!</h2>
    <h3>나는 어떤 캐릭터일까요?</h3>
<img src="이미지.png.">
<p><i>천재 패킷몬의 소개!</i><br>
<br>안녕하세요! <br>저는 천재 패킷몬이라고 해요.<br> 
<br>기술과 전략을 사랑하는 평범하지 않은 캐릭터죠. 평범한 건 못 견디는 성격이라,<br> 
머릿속에 가득한 아이디어와 계획을 현실로 바꾸는 데 매일 열정을 불태우고 있답니다!</p>

<div class="profile">
 <p><b>간단한 이력사항</b>
    <nav>
        <ul>
<li>네트워크 보안 전문가로 일하며 다수의 보안 프로젝트를 맡았고, 해킹 대회에서는 이미 몇 번 우승했어요. (자랑할게요!)</li>
<li>게임 개발과 디자인 경험도 풍부하고, 다양한 디지털 프로젝트를 주도했어요. (매일 새로운 걸 배워요!)</li>
<li>최근에는 인공지능 개발에 빠져서, 데이터를 가지고 신기한 걸 만들어내고 있어요. 이건 진짜, 혁신적인 느낌?</li>
<li>기술을 통해 더 나은 세상을 만들기 위해 지속적으로 도전하고, 재미있는 것을 찾아 연구하고 있어요. 그래서 오늘도 새로운 프로젝트와 아이디어로 세상을 뒤집을 준비를 하고 있답니다!</li>
</ul>
</nav>
</p>
</div>

    <a href="../PaketMonster.html">홈페이지로 돌아가기</a>
    <a href="forder2/page2.html">특기</a>
    <a href="forder2/page3.html">취미</a>
    </body>
    </html>

중요한 것은 다른 페이지로 넘어갈 때 상대경로로 입력해야 한다.

안 그러면 화면이 안 나오더라..

page1은 css와 html같이 파일 생성함.

page2는 css파일과 연결한 점이 다르다. 그래서 짧음.

<!DOCTYPE  html>

<html>
<head>
    <tile>PACKET MONSTER</tile>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">

    </head>

<body>
    <h1>패킷몬의 특기 알아보기!</h1>
    <h2>나는 이걸 잘해요</h2> </h2>
    <div class="index">
    <img src="https://img.freepik.com/premium-vector/cute-shiba-inu-dog-hacker-operating-laptop-cartoon-vector-icon-illustration-animal-technology-icon_138676-6832.jpg">
    <p><b>it천재 패킷몬!</b><br>제 특기는 컴퓨터 네트워크와 보안! <br>
        어지러운 네트워크 환경을 탐지하고 최적화하는 건 저에게 너무 쉬운 일이죠. 가끔 보안 전문가라고 불리기도 하는데, 왜냐면 해킹 대회에서 언제나 상위권을 차지하거든요. 게다가 게임 전략도 쏙쏙 짜는 걸 좋아해서, 
        디지털 전쟁에서는 언제나 승리의 맛을 봅니다!</p>
    <a href="../../index.html">홈페이지로 돌아가기</a>
    <a href="../page1.html">패킷몬 소개</a>
    <a href="page3.html">취미</a>
    </div>
    </body>
    </html>

page3도 page2와 동일함.

<!DOCTYPE  html>

<html>
<head>
    <tile>PACKET MONSTER</tile>
    <meta charset="utf-8">
      <link href="style.css" rel="stylesheet">

    </head>

<body>
    <h1>패킷몬의 취미를 소개할게요!</h1>
     <div class="index">
    <h2>나는 이런 것들을 좋아해요.</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWSAfVDKMuW7w0XLtUs116YamK6BKmzxYjZA&s">
    <p><br>제 취미는 디지털 아트와 코딩! 코딩으로 세상을 바꿀 수 있을 것 같은 그런 기분?<br> 그래서 항상 새로운 기술을 배우고, 그걸로 창작하는 걸 즐깁니다. 요즘은 인공지능에 푹 빠져 있는데, 이를 통해 나만의 똑똑한 프로젝트를 만들고 있죠. 그리고, 게임에서 전략 짜기가 진짜 재밌어요. 게임 속에서도,
         실전처럼 전략을 세우고 팀을 이끌고… 뭐, 거의 전설급이지 않겠어요?</p>
    <a href="../../index.html">홈페이지로 돌아가기</a>
    <a href="page2.html">특기</a>
    <a href="../page1.html">패킷몬 소개</a>
    </div>
    </body>
    </html>

중요한 것은 css파일을 연결하는 것이다.

rel="stylesheet"는

"이 파일(style.css)은 이 HTML 문서의 스타일(디자인) 을 정의하는 스타일시트야!"
라고 브라우저에게 알려주는 것!

css파일이다.

파이명만 위에 연결하는 페이지들과 동일하게 맞춰주고 바디부분만 적어주면 된다.

body {
    text-align: center;
    background-color: rgb(19, 19, 18); /* 어두운 배경 */
}
h1 {
    color: chartreuse;
}
h2 {
    color: rgb(9, 255, 9); /* 밝은 초록 */
}

img {
    height: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;
}

.index {
    background-color: #3b3939; /* 내부 박스 배경 */
    border-radius: 20px;
    margin-bottom: 50px;
    padding: 50px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 50px -20px rgb(24, 255, 16); /* 녹색 그림자 */
}

저작자표시 비영리 변경금지 (새창열림)

'WEB' 카테고리의 다른 글

HTML 기초 - tag (2)	2025.06.19
웹 페이지 만들기 (6) 아파치 보안 설정 (0)	2025.05.22
웹페이지 만들기 (4) 회원가입 php, welcome php (mariadb연결) (0)	2025.05.21
웹페이지 만들기 (3) 회원가입 폼 (0)	2025.05.21
웹페이지 만들기(2) 로그인 php+ maria DB 연결 (0)	2025.05.21

'WEB' 카테고리의 다른 글

티스토리툴바