HTMLベース

15065 ワード

3月18日内容整理
1.背景を置く練習
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경연습</title>
  <link href="./css/basic_0318.css" rel="stylesheet" type="text/css">
  <link href="외부폰트링크">

  <style>
    .bak01{
      width: 100%; /* 부모요소 크기의 %비율,%를 쓰면 브라우져 크기에 알아서 맞춤*/
      height: 50px;/*크기고정*/
      margin-top: 100px;
      margin-bottom: 50px;/*margine의 수직으로 적용시 top또는 bottom 둘중 큰 크기margine적용
                          왼,오는 적용이 안됨*/
      background-image: url('./images/background02.jpg');
      background-size: 100%;
      background-repeat: no-repeat; /*그림사이즈가 작아도 반복 안함
      repeat-x는 가로한줄 반복됨,repeat-y는 세로한줄 반복 */
      background-position: 10% 10%;/*가로위치(공백)세로위치 그림의 위치를 지정해줌*/
      background-attachment: fixed; /*그림 고정되어 스크롤에 따라 다님*/
      background-clip: content-box;/*border-box;보더박스선까지만 적용됨 
      padding-box; 패딩영역까지만 content-box; 컨텐츠박스 영역까지만*/
    }
    .bak02{
      width:960px;
      height: 600px;
      background-color: rgba(255, 255,0,0.3 ); /*opacity 는 색의 투명도 rgb 빛에따른 색의 기호*/
    }


  </style>

</head>
<body>
  <div class="bak01">
    <h1>상자1</h1>
  </div>
  <div class="bak02">
    <h1>상자2</h1>
  </div>
</body>
</html>
2.シマンティックラベルとは?
1つの共通の約束は,開発者を衆口難調の標識に用いて構造調整を行うことである.
骨格をつかむときはシモンラベルで骨格をつかむ!
<!--시맨틱 태그 개발자들이 중구난방으로 구조를 잡아서 써서 
  공통 약속하여 골격을 잡아주는거-->
  <!--동영상이 이동하는게 아니라 동영상을 웹에 띄우고 싶을때,
    퍼가기 하면 되는데 태그는 iframe을 써서 화면에 또다른 상자가 만들어짐.-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <title>시맨틱 태그</title>
</head>
<body>
  <header>
  </header>
  <nav>

  </nav>
  <section>
    <article>
      <input type="date">
    </article>
    <article>
      <!--동영상 퍼갈때 쓰는 링크 iframe은 웹상에 또다른 창을 만들어줌-->
      <iframe width="560" height="315" src="https://www.youtube.com/embed/XIWY7Ibas9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </article>
    <aside></aside>
  </section>
  <footer>

  </footer>
</body>
</html>