2022 summer-vacation HTML&CSS seminar: week1

가오리·2022년 11월 19일
summer-seminar
0

seminar

목록 보기
6/15
post-thumbnail



  • index.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SEMINAR</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <article>
      <div></div>
      <h1>stingray</h1>
      <ul>
        <a href="./information.html">
          <li>Information</li>
        </a>
        <a href="./kind.html">
          <li>Kind</li>
        </a>
      </ul>
    </article>
  </body>
</html>
  • information.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Information</title>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./sub.css" />
  </head>
  <body>
    <article>
      <h1>Information</h1>
      <ul>
        <li>크기: 1~2m</li>
        <li>특징: 독이 있다</li>
        <li>천적: 상어, 돌고래, 사람</li>
        <li>먹이: 작은 고기, 조개류, 갯지렁이, 갑각류</li>

        <li>서식지: 서태평양 지역의 수심 10m 남짓한 얕은 바다</li>
      </ul>
      <a href="./index.html" class="button">HOME</a>
    </article>
  </body>
</html>
  • kind.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>KIND</title>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./sub.css" />
  </head>
  <body>
    <article>
      <h1>Kind</h1>
      <ul>
        <a href="https://en.wikipedia.org/wiki/Whiptail_stingray">
          <li>Whiptail Stingray</li>
        </a>
        <a href="https://en.wikipedia.org/wiki/Diamond_stingray">
          <li>Diamond Stingray</li>
        </a>
        <a href="https://en.wikipedia.org/wiki/Blue_stingray">
          <li>Blue Stingray</li>
        </a>
        <a href="https://en.wikipedia.org/wiki/Groovebelly_stingray">
          <li>Groovebelly Stingray</li>
        </a>
        <a href="https://en.wikipedia.org/wiki/Common_stingray">
          <li>Common Stingray</li>
        </a>
      </ul>
      <a href="./index.html" class="button">HOME</a>
    </article>
  </body>
</html>
  • style.css
    body {
  background-color: #384b60;
}
article {
  width: 300px;
  height: 500px;
  border: 5px double #384b60;
  border-radius: 10px;
  margin: 150px auto;
  background-color: #bedafa;
  text-align: center;
  color: #384b60;
  font-size: 20px;
}
div {
  background: url(./img/square.jpeg) center/cover;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid #bedafa;
  margin: 30px auto;
}
div:hover {
  background-image: url(./img/circle.jpeg);
}
h1 {
  margin-top: 70px;
  margin-bottom: 30px;
  font-size: 23px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
li {
  margin-bottom: 3px;
}
li:hover {
  background-color: #384b60;
  color: #bedafa;
}
  • sub.css
    article {
  width: 500px;
}
ul {
  margin-top: 50px;
  margin-bottom: 50px;
}
li {
  padding-left: 10px;
  margin-top: 5px;
}
.button {
  padding: 5px 15px;
  border-radius: 10%;
  background: #384b60;
  color: #bedafa;
}




background-size : cover | contain | 100%;

→ cover : 요소에 이미지를 최대한 크게 보여준다(이미지가 잘릴 수 있다)

→ contain : 요소에 이미지를 최대한 크게 보여주되 잘리는 부분이 없고 동일한 비율을 유지한다

→ 100% : 요소와 동일한 크기로 배경 이미지를 보여준다, 이미지 왜곡될 수 있다

background-position: left | center | right | top | bottom | percentage | length;

→ left : 왼쪽에 표시

→ right : 오른쪽에 표시

→ top : 위쪽에 표시

→ bottom : 아래쪽에 표시

→ center : 중앙에 표시

→ percentage : ex) 50% 50% 퍼센트로 표시

→ length(pixel) : 픽셀로 표시

profile
가오리
가오리의 코딩일기
이전 포스트

2021 winter-vacation HTML&CSS seminar: week6

다음 포스트

2022 summer-vacation HTML&CSS seminar: week2

0개의 댓글