๐Ÿก
Jeju Coding Basecamp(์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„)/
๐Ÿ”ฉ
HTML & CSS/
๐Ÿ”
5. Code
๐Ÿ”

5. Code

ย 
์ˆ˜์—…์—์„œ ์‚ฌ์šฉํ–ˆ๋˜ ๋‹ค์–‘ํ•œ ์ฝ”๋“œ๋“ค์„ ๋ช…์‹œํ•ด ๋‘์—ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ์ฝ”๋“œ๋Š” ์„ค๋ช…์ด ๋‹ฌ๋ ค์žˆ์ง€ ์•Š์œผ๋‹ˆ PDF๋กœ ์ธ์‡„ํ•˜์‹œ๋Š” ๋ถ„๋“ค์€ ์ฝ”๋”ฉ๋…ธํŠธ๋ฅผ ํ™œ์šฉํ•ด ์„ค๋ช…์„ ๊ธฐ์ž…ํ•ด์ฃผ์„ธ์š”.
ย 
test.html
<html>
    <head>
    </head>
    <body>
        <h1>Atom</h1>
        <p>github์—์„œ ๋งŒ๋“  ๋ฌด๋ฃŒ Editer</p>
        <h1>sublime</h1>
        <p>๋งŽ์€ ์ ์œ ์œจ์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋Š” ๋ถ€๋ถ„๋ฌด๋ฃŒ Editer</p>
        <h1>visual studio code</h1>
        <p>microsoft์—์„œ ๋งŒ๋“  ๋ฌด๋ฃŒ editer, visual studio์™€ ๋‹ค๋ฅธ ์—๋””ํ„ฐ ์ž…๋‹ˆ๋‹ค!</p>
    </body>
</html>
ย 
emmet_์‚ฌ์šฉ๋ฒ•.html
<!DOCTYPE html>
<html>
    <head>

    <title>emmet์‹ค์Šต</title>
    </head>
    <body>
        <!--๋ฉ”๋ชจ์žฅ๋„ ์‚ฌ์šฉํ•ด๋ณผ๊ฒƒ-->
        h1
        h1+h1+p
        h1*3
        h1{hello world}*10
        h1#hojun
        h1.hoju
        (div>table>(tr>(td*2))*3)+(footer>p)
        div#one.c1.c2.c3
        ul>li.item$*5   
        a{Click}
        lorem
        <!--
            Ctrl + \ : ํ† ๊ธ€ ๋ณด์ด๊ธฐ
            Ctrl + O : ํŒŒ์ผ ์—ด๊ธฐ
            Ctrl + P : ํ”„๋กœ์ ํŠธ ๊ฒ€์ƒ‰
            Ctrl + F : ์—ด๋ ค ์žˆ๋Š” ํŒŒ์ผ ๋‚ด์—์„œ ๊ฒ€์ƒ‰
            Ctrl + Shift + F : ์—ด๋ ค ์žˆ๋Š” ์ „์ฒด ํ”„๋กœ์ ํŠธ ๋‚ด์—์„œ ๊ฒ€์ƒ‰
            Ctrl + , : Settings
            Ctrl + N : ์ƒˆ๋กœ์šด ํŒŒ์ผ
            Ctrl + S : ํŒŒ์ผ ์ €์žฅ
            Ctrl + Shift + S  :๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ์ €์žฅ
            Shift + del : ๋ผ์ธ ์ง€์šฐ๊ธฐ
            Ctrl + ํด๋ฆญ : ์—ฌ๋Ÿฌ์ค„ ์ž…๋ ฅ 
        -->
        
    </body>
</html>
ย 
001.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <h1>๊ธ€์ž ํƒœ๊ทธ</h1><br>
        <p>H<sub>2</sub>0</p>
        <p>x<sup>2</sup>=4</p>
        <p>
        Lorem <br> ipsum 
        <hr> dolor sit amet 
        <a href="leehojun/a.html">click </a> 
        <strong>hello</strong> 
        adipisicing <b>elit</b>. 
        Quae <em>quisquam </em> 
        aperiam, <i> autem </i>, excepturi 
        <mark> corrupti </mark> architecto facilis saepe
        </p>
    </body>
</html>
ย 
002.html
<!DOCTYPE html>
<html>
<head>
    <title> Document </title>
</head>
<body>
    <h1>Front-End</h1>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javacript</li>
        <li>Jquery</li>
        <li>Bootsrap</li>
    </ol>
    <h1>Back-End</h1>
    <ul>
        <li>Python</li>
        <li>Django</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>๋งˆํฌ์—… ์–ธ์–ด์ž…๋‹ˆ๋‹ค.</dd>
    </dl>
    <div>hello</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title> Document </title>
</head>
<body>
    <h1>Front-End</h1>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javacript</li>
        <li>Jquery</li>
        <li>Bootsrap</li>
    </ol>
    <h1>Back-End</h1>
    <ul>
        <li>Python</li>
        <li>Django</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>๋งˆํฌ์—… ์–ธ์–ด์ž…๋‹ˆ๋‹ค.</dd>
    </dl>
    <div>hello</div>
</body>
</html>
ย 
003.html
<!DOCTYPE html>
<html>
    <head><title>document</title></head>
    <body>
        <img src="img/a.jpg" alt="์ด๋ฏธ์ง€ ์—†์Œ.">
        <iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
    </body>
</html>
ย 
004.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <input type="text"><br>
        <input type="password"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="range"><br>
        <input type="color"><br>
        <input type="radio"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
        <textarea name="name", rows="8", cols="80"> </textarea>
    </body>
</html>
ย 
005.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            table, th ,tr, td{
                border: 1px black solid;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table>
           <tr>
               <td>๊ตฌ๋ถ„</td>
               <td>์ด๋ฆ„</td>
               <td>ํŒ๋งค๋Ÿ‰</td>
           </tr>
           <tr>
               <td>1</td>
               <td>ํ•ด๋ฆฌํฌํ„ฐ</td>
               <td>100</td>
           </tr>
           <tr>
               <td>2</td>
               <td>ํ—๊ฑฐ๊ฒŒ์ž„</td>
               <td>200</td>
           </tr>
           <tr>
               <td>3</td>
               <td>๋ฐ˜์ง€์˜์ œ์™•</td>
               <td>300</td>
           </tr>
           <tr>
               <td colspan="2">์ด ํŒ๋งค๋Ÿ‰</td>
               <td>600</td>
           </tr>
       </table>
    </body>
</html>
ย 
006.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <link rel="stylesheet" href="a.css">
        <style>
        h1{
            color: blue;    
        }
       
        </style>
    </head>
    <body>
    <h1 >hello</h1>
    <h2 style="color: red;">hello</h2>
    
    </body>
</html>
ย 
007.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <link rel="stylesheet" href="a.css">
        <style>
        #one{
            color: red;    
        }
        
        #two{
            color: blue;
        }
        
        #three{
            color: green;
        }
        </style>
    </head>
    <body>
    <a href="#one">one์œผ๋กœ ๊ฐ€๋ผ</h1>
    <a href="#two">two์œผ๋กœ ๊ฐ€๋ผ</a>
    <a href="#three">three์œผ๋กœ ๊ฐ€๋ผ</a>
    <h1 id="one">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="two">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="three">hello</h1>
    
    </body>
</html>
ย 
008.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <link rel="stylesheet" href="a.css">
        <style>
        .one{
            color: red;    
        }
        
        .two{
            font-size: 20px;
        }
        
        .three{
            color: green;
        }
        </style>
    </head>
    <body>
    <h1 class="one two">hello</h1>
    <h1 class="two">hello</h1>
    <h1 class="three">hello</h1> 
    
    </body>
</html>
ย 
a.css
h1{color: red;}
ย 
009.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>   
        <style>
            p{
                font-size: 5em;
            }        
        </style> 
    </head>
    <body>
    <h1>๊ณ ์ • ํฌ๊ธฐ ๋‹จ์œ„</h1>
    <p> px, pt, in, cm ,mm</p>
    <h1>๊ฐ€๋ณ€ ํฌ๊ธฐ ๋‹จ์œ„</h1>
    <p> em, % rem</p>
    <h1>hello</h1>
    <h1>hello</h1>
    </body>
</html>
ย 
010.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>   
        <style>
            h1{
               border: 1px solid black;
               padding: 2px 10px 20px 40px;
               margin:20px 
            }        
        </style> 
    </head>
    <body>
    <h1>hello world</h1>
    </body>
</html>
ย 
011.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>   
        <style>
            .box{
                background-color: blue;
                width: 200px;
                height: 200px;
            }   
            .one{
                opacity: 0.5;
            }    
            .two{
                opacity: 0.3;
            }     
        </style> 
    </head>
    <body>
    <div class="box"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    </body>
</html>
ย 
012.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>   
        <link href="https://fonts.googleapis.com/css?family=Unlock&display=swap" rel="stylesheet">
        <style>
        h1{font-family: 'Unlock', cursive};
        </style>
    </head>

    <body>
        <h1>helloworld</h1>
    </body>
</html>
ย 
013.html
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>   
        <style>
        h1{
            color: #0000ff;
        };
        </style>
    </head>

    <body>
        <h1>helloworld</h1>
    </body>
ย