ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 링크 & 이미지
    HTML&CSS 2022. 9. 23. 09:12

    링크 

    # 폴더구조 

    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>Document</title>
    </head>
    <body>
        <h1>indexPage</h1>
        <h2>인덱스페이지</h2>
        <a href="folder1/page1.html">page1로가기</a>
        <a href="folder1/folder2/page2.html">page2로가기</a>
        <a href="folder1/folder2/page3.html">page3로가기</a>
    </body>
    </html>

    page1.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>Document</title>
    </head>
    <body>
       <h1>page1</h1>
       <h2>페이지1</h2>
       <a href="folder2/page2.html">page2로가기</a>
       <a href="folder2/page3.html">page3로가기</a> 
       <a href="../index.html">indexPage로가기</a> 
    </body>
    </html>

    page2.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>Document</title>
    </head>
    <body>
        <h1>page2</h1>
        <h2>페이지2</h2>
        <a href="page3.html">page3로가기</a>
        <a href="../page1.html">page1로가기</a>
        <a href="../../index.html">index페이지로가기</a>
    </body>
    </html>

    page3.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>Document</title>
    </head>
    <body>
        <h1>page3</h1>
        <h2>페이지3</h2>
        <a href="page2.html">page2로가기</a>
        <a href="../page1.html">page1로가기</a> 
        <a href="../../index.html">index페이지로가기</a>
    </body>
    </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>Document</title>
    </head>
    <body>
        <img src="../../images/daisy.jpg" width="300">
    </body>
    </html>

    사이즈 설정 

    1. 픽셀(px) 

    2. 퍼센트(%)

     

    # 실습
    
    <!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>ZICO</title>
    </head>
    <body>
        <h1>우지호당</h1>
        <img src="./images/zico.jpg" width="150" height="150">
        <p>I love the every song released by <b>ZICO</b> He is so <i>cool</i></p>
        <a href="https://namu.wiki/w/%EC%A7%80%EC%BD%94" target="_blank">wanted to know more about him?! click me!</a>
    </body>
    </html>

    'HTML&CSS' 카테고리의 다른 글

    text스타일링  (0) 2022.10.02
    div태그  (0) 2022.10.02
    class & Id  (0) 2022.09.26
    CSS 적용하는 방법  (0) 2022.09.23
    HTML태그정리  (0) 2022.09.23

    댓글

Designed by Tistory.