본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

1일차 | code_html

by Sharon kim 2021. 11. 19.

<!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>test1.html</title>
</head>

<body>
  <h1>처음 입력해봅시다.</h1>
  <h1>처음 입력해봅시다.</h1>
  <h1>처음 입력해봅시다.</h1>
  <h1>처음 입력해봅시다.</h1>
  <h1>처음 입력해봅시다.</h1>


</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>

  <title>code_02.html</title>
</head>

<body>
  <h1>this is a heading.</h1>
  <p>this is a paragrph.</p>
  <p>this is another pragraph.</p>
</body>

</html>

 


<!DOCTYPE html>
<html>
<title>code_03.html</title>

<body>
  <h2>여기는 h2태그 영역입니다.</h2>
  <p>여기는 하나의 단락(글의 작은 덩어리)입니다.</p>

  <a href="https://www.naver.com">이것은 a 태그(link)입니다.</a>
  <br><br><br><br>
  <img src="img_html.png" alt="이미지가 없으면 글자가 표시됨" 
  width="300" height="180">
</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>code_04.html</title>
</head>

<body>
  <h1>안녕하세요</h1>
  <P>this is a <br><br><br> paragraph with a line break</P>
  <P>반갑습니다.</P>
</body>

</html>

<!DOCTYPE html>
<html lang="ko">

<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>code_05.html</title>
</head>

<body>
  <a href="https://www.google.com">구글사이트로 이동</a>
  <p title="제목입니다."> 글 덩어리 ~~~ </p>
  <img src="../img_html.png" alt="">

  <p style="color: rgba(1, 82, 82, 0.596);">안녕하세요 반갑습니다. 스타일을 적용해 봅니다.</p>
</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>code_06.html</title>
</head>

<body style="background-color: rgb(255, 255, 155);">
  <p>I am normal</p>
  <p style="color: red;">I am red</p>
  <p style="color: blue;">I am blue</p>
  <p style="font-size: 50px;">I am big</p>

  <h1 style="background-color: powderblue;">여기는 파우더 블루</h1>
  <p style="background-color: tomato;">여기는 토마토 색상입니다.</p>

  <h1 style="font-family: Verdana;">여기는 verdana 폰트입니다.</h1>
  <p style="font-family: courier;">여기는 courier 폰트입니다.</p>
  <h1 style="font-size: 300%;">this is a haeding</h1>
  <p style="font-size: 160%;">this is a paragraph</p>
  <!---기본 p 태그보다 160% 큰 사이즈-->
  <h1 style="text-align: right;">Centered Heading</h1>
  <p style="text-align: end;">end paragraph</p>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>code_ex_06.html</title>
</head>

<body style="background-color: yellowgreen;">
  <p>I am normal</p>
  <p style="color: red;">I am red</p>
  <p style="color: blue;">I am blue</p>
  <p style="font-size: 50px;">I am big</p>

  <h1>This is a heading</h1>
  <h1>This is a paragraph</h1>

  <h1 style="background-color: powderblue;">This is a heading</h1>
  <h1 style="background-color: tomato;">This is a paragraph</h1>

  <h1 style="color:blue;">This is a heading</h1>
  <p style="color:red;">This is a paragraph</p>

  <h1 style="font-family: verdana;">This is a heading</h1>
  <p style="font-family: Courier;">This is a paragraph</p>

  <h1 style="font-size: 300%;">This is a heading</h1>
  <p style="font-size: 160%;">This is a paragraph</p>

  <h1 style="text-align: center;">Centered Heading</h1>
  <p style="text-align: center;">Centered paragraph</p>
</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>code_07.html</title>
</head>

<body>

  <h1 style="border: 12px dashed dodgerblue;"> hello world! </h1>
  <h1 style="border: 2px solid violet;"> hello world! </h1>

  <h1 style="background-color: rgb(200, 199, 71);">hello world!</h1>
  <h1 style="background-color: rgba(200, 199, 71, 0.1);">hello world!</h1>

  <h1 style="background-color: #ff6347;">#ff6347</h1>
  <h1 style="background-color: hsl(9, 100%, 64%)">hsl(9, 100%, 64%)</h1>

  <h1 style="background-color: hsla(12, 100%, 32%, 0.3);">hello world</h1>
</body>
</body>

</html>

code_08.html 내용없음


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>code_09.html</title>
  <style>
    /**/
    body {
      background-color: aliceblue;
    }

    h1 {
      color: red;
    }

    p {
      color: red;

    }
  </style>
</head>

<body>
  <h1 style="background-color: indigo;">This is a heading</h1>
  <p>this is a paragraph</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>code_09_1.html</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>This is a heading</h1>
  <p>this is a paragraph</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>code_10.html</title>
    <style>
    </style>
</head>

<body>
    <a href="https://www.naver.com" target="">naver이동하기 1</a>
    <a href="https://www.naver.com" target="">naver이동하기 2</a>
    <a href="https://www.naver.com" target="">naver이동하기 3</a>

    <br><br><br>
    <a href="https://www.naver.com" target="_self">네이버 이동하기 4</a>
    <!--ㄴ기본 속성-->
    <a href="https://www.naver.com" target="_blank">네이버 이동하기 5</a>
    <a href="https://www.naver.com" target="_parent">네이버 이동하기 6</a>
    <!--ㄴparent : 팝업창과 동시에 띄울 경우 부모창 속성이 페이지 이동  -->
    <a href="https://www.naver.com" target="_top">네이버 이동하기 7</a>
    <!-- ㄴ이미지를 링크로 사용 -->
    <br>
    <a href="https:www.naver.com" target="_blank">
        <img src="./../img_html.png" alt="html 연습" style="width: 42px; height: 42px;">
    </a>
    <br><br>
    <!-- 이메일 주소 링크 -->
    <a href="mailto:rkdud3240@naver.com">send email</a>
    <br><br>
    <button onclick="document.location='code_03.html'">HTML BUTTON</button>
    <!-- -->
</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>code_10_1.html</title>
</head>

<body>
    <h2>절대경로</h2>
    <p>
        <a href="https://www.google.com">Google</a>
    </p>
    <h2>상대경로</h2>
    <p>
        <a href="code_02.html">My Html Page</a>
    </p>
</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>code_11.html</title>
</head>

<body>
    <div style="background-color: black; color: white; padding: 20px;">
        <h2> LONDON </h2>
        <p>LONDON is the capital city of England.</p>
    </div>

    <p>
        안녕하세요 <span style="color: blue; font-weight: bold;">반갑습니다.</span>
    </p>

    <div></div>
    <div></div>
    <div></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>code_12.html</title>
    <style>
        #m_box {
            background-color: #09c;
        }

        .box {
            background-color: blue;
            margin-bottom: 10px;
        }

        .box2 {
            color: springgreen;
            background-color: deeppink;
            margin-bottom: 10px;
        }

        #my_id2 {
            color: yellow;
            background-color: navy;
        }

        /* 태그선택자 */
        hr {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="box">box class</div>
    <div class="box">box class</div>
    <div id="m_box">m_box id</div>
    <!-- id는 고유한 값 class는 그룹화시켜서 사용가능 -->
    <hr>
    <div class="box2">html1</div>
    <div class="box2">html2</div>
    <div id="my_id2">html2</div>
    <hr>
</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>code_12_1.html</title>
    <style>
        div {
            background-color: cyan;
        }

        div span {
            text-align: center;
            padding: 10px;
        }

        div.yellow_box span {
            background-color: yellow;
        }

        div#c_box span {
            background-color: violet;
            padding: 10px;
        }

        div span.blue_span {
            background-color: blue;
        }

        div span#c_span {
            text-align: center;
            padding: 10px;
            background-color: brown;
        }

        ul>li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="yellow_box">
        <span>
            yellow_box div 클래스 내의 span 태그입니다.
        </span>
    </div>
    <div id="c_box">
        <span>
            c_box div 아이디 내의 span 태그입니다.
        </span>
    </div>
    <div>
        <span class="blue_span">
            div 내의 blue_span 클래스 입니다.
        </span>
    </div>
    <div>
        <span id="c_span">
            div내의 c_span 아이디 입니다.
        </span>
    </div>
    <br><br><br>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ul>
</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>code_12_2.html</title>
    <style>
        /* .aa>.cc {
            background-color: red;
        } */

        .aa .cc {
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="aa">
        <div class="cc">
            sec1
        </div>
    </div>

    <div class="aa">
        <div class="bb">
            <div class="cc">
                sec2
            </div>
        </div>
    </div>
</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>code_12_3.html</title>
    <style>
        div#m_box {
            width: 220px;
            height: 132px;
            border: 1px solid yellow;
            background-color: antiquewhite;
        }

        div.box {
            background-color: blue;
        }

        div#m_box,
        .box {
            background-color: #f23;
        }
    </style>
</head>

<body>
    <div id="m_box">아이디의 div태그 입니다.</div>
    <div class="box">box클래스 div태그입니다.</div>
    <span id="m_box">m_box의 span입니다.</span>
    <span class="box">box 클래스의 span입니다.</span>
</body>
</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>code_ex2.html</title>
    <style>
        div,
        span {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #000;
            display: block;
            

        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <span>4</span>
    <span>5</span>
    <span>6</span>
</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>code_13.html</title>
    <style>
        div,
        span {
            width: 80px;
            height: 80px;
            margin: 20px;
            background-color: pink;
        }

        div {
            background-color: red;
            /* display: inline; */
            text-align: center;
            
        }

        span {
            background-color: blue;
            display: block;
            text-align: center;


        }
    </style>
</head>

<body>
    <!-- block level -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- inline level -->
    <span>1</span>
    <span>2</span>
    <span>3</span>
</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>code_14.html</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            margin-bottom: 20px;
            background-color: red;
        }

        .container {
            background-color: yellow;
            left: 20px;
            top: 20px;
            width: 500px;
            height: 500px;
            overflow-y: scroll;
            /* position: relative; */

            /* width: 70px;
            height: 1000px; */
        }

        .box {
            background-color: blue;
            left: 20px;
            top: 20px;
            width: 50px;
            height: 50px;
            /* position변경 */
            /* position: static; */
            /* 원래 있어야하는 자리에 존재 기본값*/
            /* position: relative; */
            /* 원래 있던 자리에서 left 20 top 20 */
            /* position: fixed; */
            /* 부모박스(상자) 기준에서 나와서 페이지 기준으로 left 20 top 20 */
            /* position: absolute; */
            /* 부모박스(상자) 기준으로 left 20 top 20 옮겨감 */
            position: sticky;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>1</div>
        <div class="box">2, box</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
    </div>
</body>

</html>

 


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="description" content="Free web tutorials">
  <meta name="author" content="홍길동">
  <!-- 5초마다 문서 새로고침 -->
  <meta http-equiv="refresh" content="50">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>code_head.html개발자 쇼핑몰</title>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Hello Javascript!";
    }
  </script>
  <style>
    h1,
    p {
      color: royalblue;
      text-align: center;
    }

    button {
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <h1>My Web Page</h1>
  <p id="demo">A paragraph</p>
  <button type="button" onclick="myFunction()">버튼을 눌러주세요</button>
</body>

</html>