html(2)

코딩 기록

by jii 2023. 9. 28. 01:23

html(1)에서 만든 자기소개 사이트를 활용해

css로 사이트의 다양한 스타일을 설정한 또 다른 자기소개 페이지 만들기!

mywebsite.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mywebsite.css">

</head>
<body>

<header>
  <h1>About Me</h1>
  <p>제 웹사이트에 오신 것을 환영합니다.</p>
</header>

<nav>
<ul style="list-style-type:none;">
  <li><a href="mywebsite.html">홈</a></li>
  <li><a href="자기소개.html">프로필</a></li>
  <li><a href="gallery.html">갤러리</a></li>
  <li><a href="mailto:gudong0918@gmail.com" style="float:right">이메일보내기</a></li>
</ul>
</nav>

<section>
    <div class="card">
      <h2>Project 1</h2>
      <h5>WAR 리그 <통계의 스포츠, 야구의 꽃 WAR>, 2022.10.17</h5>
      <td><img src="머니볼.jpg" width="350", height="200"></td>
      <p>WAR</p>
      <hr>
      <p>'거액의 연봉을 받는 선수들이 반드시 경기의 승리에 기여한다고 볼 수 있을까?'라는 의문에서 시작된 프로젝트. 연봉을 계산할 수 있는 수학 식을 고안해내 보았다.</p>
    </div>

    <div class="card">
      <h2>Project2</h2>
      <h5>KBO MVP 예측 프로젝트, 2022.12.29</h5>
      <td><img src="kbo.jpg" width="350", height="200"></td>
      <p>KBO MVP</p>
      <hr>
      <p>KBO에서 이뤄지는 수많은 경기 중 우승팀이 결정되는 한국 시리즈. 경기 기록을 바탕으로 MVP를 예측할 수 있는 스탯이 있다면, 한국 시리즈 경기를 보는 내내 누가 MVP에 선정될지 살펴보는 재미도 있지 않을까?</p>
    </div>
  </section>

  <aside>
    <div class="card">
      <h2>About Me</h2>
      <td><img src="snfl.png" width="200", height="100"></td>
      <td><img src="ewha.jpeg" width="200", height="100"></td>
      <p>-성남외국어고등학교 독일어과 14기 졸업</p>
      <p>-이화여자대학교 컴퓨터 공학과 22학번 재학</p>
    </div>
    
    <div class="card">
      <h3>Popular Post</h3>
      <div class="img1"><p><img src="pp1.png" width="300", height="55"></p></div>
      <div class="img2"><p><img src="pp2.png" width="300", height="50"></p></div>
      <div class="img3"><p><img src="pp3.png" width="300", height="50"></p></div>
      <p>주로 데이터 분석 관련 글이 조회수가 높습니다.</p>
    </div>

    <div class="card">
      <h3>Follow Me</h3>
      <p>instagram @oomuje</p>
    </div>
  </aside>


<footer>
  <h3>contact: 010-2422-4076</h3>
  <h3>location: Seoul, Korea</h3>
</footer>

</body>
</html>

gallery.html

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

h2{
  font-family: Garamond;
}
desc{
  font-family: Garamond;
}
</style>
</head>
<body>

<h2>Image Gallery</h2>



<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="gal11.jpg">
      <img src="gal11.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Jeju</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="gal2.jpg">
      <img src="gal2.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">HanRiver</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="gal3.jpg">
      <img src="gal3.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Singapore</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="gal4.jpg">
      <img src="gal4.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Danang</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  <p>제가 좋아하는 사진들에 대해 소개합니다.</p>
  <p>이곳 저곳 여행을 다니며 찍은 사진들입니다. 저는 주로 풍경 사진 찍기를 좋아합니다.</p>
</div>

</body>
</html>

자기소개.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자기소개</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1><저에 대해 소개합니다></h1>
    
    <table>
        <tr>
            <th>이름</th>
            <th>전공</th>
            <th>학교</th>
            <th>사진</th>
        </tr>
        <tr>
            <td>유지혜</td>
            <td>컴퓨터 공학과</td>
            <td>이화여자대학교</td>
            <td><img src="증명사진.jpg" alt="사진"  width="80", height="100"></td>
        </tr>
    </table>

    <h2>관심 분야 및 프로젝트</h2>
    <p>저는 데이터 분석에 큰 관심을 갖고 있으며, 다음은 그동안 제가 참여한 프로젝트입니다.</p>
    <ul>
        <li>프로젝트 1</li>
        <p><a href="https://gudong0918.tistory.com/10" target="_blank">프로젝트 링크</a></p>
        <td><img src="pro1.jpeg" width="300", height="160"></td>
        <li>프로젝트 2</li>
        <p><a href="https://gudong0918.tistory.com/2" target="_blank">프로젝트 링크</a></p>
        <td><img src="pro2.png" width="300", height="160"></td>
    </ul>

 
    <h3>취미활동</h3>
    <p>제 취미활동은, 야구 보기 입니다. </p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/JeX9EwpmdMM?si=g5hqgjk4V_185gfn&amp;start=3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </iframe>


    <!-- 하단 링크 -->
    <p>더 많은 정보와 프로젝트는 제 <a href="https://gudong0918.tistory.com" target="_blank">포트폴리오</a>에 있습니다.</p>
</body>
</html>

mywebsite.css

* {
  box-sizing: border-box;
}

body {
  font-family: Garamond;
  padding: 10px;
  background: #3B626E;
}

h5{color: #006182;}

/* Header/Blog Title */
header {
  padding: 30px;
  text-align: center;
  background: #DCDBD9;
}

h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
nav {
  overflow: hidden;
  background-color: #224D60;
}

/* Style the topnav links */
li a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
li a:hover {
  background-color: #ddd;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
section {   
  float: left;
  width: 75%;
}

/* Right column */
aside {
  float: right;
  width: 25%;
  background-color: #3B626E;
  padding-left: 20px;
}

p{font-size: 13px;}

/* Add a card effect for articles */
.card {
  background-color:#DCDBD9;
  padding: 20px;
  margin-top: 20px;
}



/* Footer */
footer {
  padding: 20px;
  text-align: center;
  background:#27383E;
  margin-top: 20px;
  clear : both;
  p{
    font-size: 30px;
  }
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  section, aside {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  nav a {
    float: none;
    width: 100%;
  }
}

*html파일,css파일,이미지 파일들을 zip으로 압축하면 제대로 열리지 않는다. 압축 풀기 후에 같은 파일 경로 내에 있다면 정상적으로 웹사이트가 열린다.

'코딩 기록' 카테고리의 다른 글

자료구조 #3 : 스택 (0)	2023.10.11
자료구조 #2 : 배열,구조체,포인터 (0)	2023.10.11
html(1) (0)	2023.09.21
자료구조 #1 : 순환 (recursion) (0)	2023.09.14
java : 10일차 (0)	2023.01.19