Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

230822_HTML 강의 본문

대덕인재개발원_Front End

230822_HTML 강의

Unlimited00 2023. 8. 22. 19:09

[test1.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" /> <!-- EUC-KR -->
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="첫 번째 연습입니다." />
        <meta name="keywords" content="대덕인재개발원, html, 첫번째연습" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>첫 번째 연습</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script defer src="js/jquery-3.7.0.min.js"></script>
        <script defer src="js/script.js"></script>
        <style>
            
            body {
                background-color: pink;
                font-size: 30px;
            }
            
        </style>
    </head>
    <body>
        
        <div>Hello~~</div>
        <br />
        <div>안녕하세요~</div>
        <br />
        <div>html 입니다~</div>
        <br />
        <div>css/javascript를 배웁니다.</div>
        <br />
        <div>jquery와 ajax도 배웁니다.</div>
        <br />
        <hr />
        <br />
        <ul>
            <li>html : 문서의 내용을 구성</li>
            <li>css : 문서의 스타일을 지정. 예쁘게 꾸미기</li>
            <li>javascript : 문서의 동작을 구현</li>
            <li>jquery : javascript의 라이브러리 / js를 편리하게 작성</li>
            <li>ajax : 비동기 통신을 위한 전송</li>
        </ul>
        <!-- 주석 처리 -->
        
    </body>
</html>

[style.css]

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    color: #333;
    word-break: keep-all;
}

ol, ul {
    list-style: none;
}

.cen {
    max-width: 600px;
    width: 100%;
    margin: auto;
/*    margin-left: 100px;*/
/*    margin-left: 15%;*/
}

[test2.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="두 번째 연습입니다." />
        <meta name="keywords" content="대덕인재개발원, html, 두번째연습" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>두 번째 연습</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script defer src="js/jquery-3.7.0.min.js"></script>
        <script defer src="js/script.js"></script>
        <style>
            
            p {
                background-color: yellow;
                font-size: 30px;
                color: red;
                font-weight: 700;
                text-align: center;
            }
            
            /* id를 이용한 선택 */
            #pp {
                background-color: blue;
                color: white;
                text-align: right;
                font-style: italic;
                font-size: 50px;
            }
            
        </style>
    </head>
    <body>
      
       <!-- p태그 : 짧은 단락을 표현. 블록 태그이므로 자동 줄 바꿈 -->
       <p>Hello~~~</p>
       <p id="pp">안녕하세요~</p>
       <p>html을 배웁니다.</p>
   
    </body>
</html>

[test3.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="세 번째 연습입니다." />
        <meta name="keywords" content="대덕인재개발원, html, 세번째연습" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>세 번째 연습</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script defer src="js/jquery-3.7.0.min.js"></script>
        <script defer src="js/script.js"></script>
        <style>
            
            p { /*
                background-color: greenyellow;
                color: rgb(255, 0, 255);
                */
                
                background-color: #C343D9;
                color: skyblue;
                font-size: 2.0em;
                width: 100%;
                text-align: center;
            }
            
            h1,
            h2, 
            h3, 
            h4, 
            h5, 
            h6 {
                background-color: greenyellow;
                color: rgb(95%, 34%, 56%);
/*                width: 500px;*/
                width: 100%;
                text-align: center;
            }
            
        </style>
    </head>
    <body>

        <div class="cen">
            <!-- 문서의 제목을 표시 <h1> ~ <h6> -->
            <h1>HTML</h1>
            <p style="margin-bottom: 10px;">문서의 내용을 작성합니다.</p>

            <h2>CSS</h2>
            <p style="margin-bottom: 10px;">문서의 스타일 지정</p>

            <h3>Javascript</h3>
            <p style="margin-bottom: 10px;">문서의 동작을 구현합니다.</p>

            <h4>JQuery</h4>
            <p style="margin-bottom: 10px;">Javascript의 라이브러리. javaScript를 간단하게 사용</p>

            <h5>AJAX</h5>
            <p style="margin-bottom: 10px;">서버와 클라이언트 사이에 비동기 통신을 위한 전송</p>

            <h6>JSON</h6>
            <p style="margin-bottom: 10px;">서버와 클라이언트 사이에 주고받는 데이터의 방식</p>
        </div>
   
    </body>
</html>

[test4.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="HTML Attribute" />
        <meta name="keywords" content="대덕인재개발원, html, HTML Attribute" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>HTML Attribute</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script defer src="js/jquery-3.7.0.min.js"></script>
        <script defer src="js/script.js"></script>
        <style>
            pre {
                font-size: 1.5em;
                background-color: cyan;
                margin: 50px;
                
                border-left: 10px dotted red;
                border-top: 10px dashed blue;
                border-right: 10px solid green;
                border-bottom: 10px double magenta;
                
/*                border: 5px inset red;*/
                border: 15px outset red;
                border-left: none;
                border-right: none;
                
                padding-top: 20px;
                padding-left: 100px;
                
                padding: 50px;
                
                font-family: "Noto Sans KR", sans-serif;
                color: #333;
                word-break: keep-all;
            }
            
            a {
                font-size: 2em;
                background-color: greenyellow;
                border: 2px solid blue;
                border-radius: 2px;
                text-decoration: none;
                color: blue;
/*                padding: 10px;*/
            }
        </style>
    </head>
    <body>

           <!-- a 태그 : 페이지 이동을 위한 태그 -->
           <!-- 이동할 페이지를 href 속성에 설정한다. -->
           <!-- target : 이동페이지를 새로운 탭 또는 현재 탭에서 실행한다. -->
           <!-- 기본값, target="_self" : 현재 탭에서 실행한다. -->
           <!-- target="_blank" : 새로운 탭에서 실행한다. -->
           <a href="test1.html">test1.html로 이동</a>
           <br />
           <br />
           <a href="test2.html">test2.html로 이동</a>
           <br />
           <br />
           <a href="test3.html">test3.html로 이동</a>
           
           <hr style="margin: 20px auto;" />
           
           <a href="https://www.naver.com/" target="_blank">네이버</a>
           <br />
           <br />
           <a href="https://www.daum.net/" target="_blank">다음</a>
           <br />
           <br />
           <a href="https://www.nate.com/" target="_blank">네이트</a>
           <br />
           <br />
           <a href="https://www.w3.org/" target="_blank">W3C</a>
           <br />
           <br />
           <a href="https://www.ddit.or.kr/?gclid=EAIaIQobChMI75SFkqjvgAMVU3dgCh2RZwwGEAAYASAAEgJjc_D_BwE" target="_blank">대덕인재개발원</a>
           
           <hr style="margin: 20px auto;" />
           
           <!-- pre 태그는 화면에 입력하는 형식대로 출력 된다. -->
           <pre>
               hello~
               안녕하세요
               
               
               
               html을 공부              합니다.
               
               
               
               a 태그 : 페이지 이동을 위한 태그
               이동할 페이지를 href 속성에 설정한다.
               
               target : 이동페이지를 새로운 탭 또는 현재 탭에서 실행한다.
               
               기본값, target="_self" : 현재 탭에서 실행한다.
               
               target="_blank" : 새로운 탭에서 실행한다.
           </pre>
           
           <hr style="margin: 20px auto;" />
   
    </body>
</html>

'대덕인재개발원_Front End' 카테고리의 다른 글

230829_HTML 강의  (0) 2023.08.29
230828_HTML 강의  (0) 2023.08.28
230825_HTML 강의  (0) 2023.08.25
230824_HTML 강의  (0) 2023.08.24
230823_HTML 강의  (0) 2023.08.23
'대덕인재개발원_Front End' Related Articles more