데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 20일차 강의 정리

misung·2022년 4월 11일
CSShtml데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정
0

데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정

목록 보기
11/47

공지사항

8~19일차 강의 경우 JAVA 11~15강쯤의 내용 정리가 되므로 그 부분은 따로 천천히 정리를 하고, 현강 내용을 따라잡기로 한다.

VSCode 설치하고, Live Server 및 Beautify 확장 설치.
HTML부터 시작할 것

HTML

Hyper Text Markup Language

정적인 웹 페이지를 만드는 언어로써, <tag>Description</tag> 이런 스타일의 명령어로 구성되어 있다.

1. HTML 기초

<!DOCTYPE HTML> : html 문서의 시작 태그
<html></html> : 페이지의 속성 및 정보를 설정
<body></body> : 웹 브라우저에 실제로 보여질 내용
<br> : 줄바꿈

실습 1. html 기초

<!--HTML 주석입니다.-->

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"><!--페이지 인코딩 UTF-8로 설정-->
        <title>기초 연습</title>
    </head>
    <body>
        HTML 첫 연습 2022-04-11<br>
        Hello World
    </body>
</html>

실습 2. 블록요소

!를 입력하고 자동완성을 시키면 문서가 바로 완성됨.

<style></style> : HTML 문서의 스타일 정보를 정의하는 경우에 사용. 내부 스타일 지정 방식과 외부 파일에서 정보를 가져오는 방식이 있음.
<h1></h1> ~ <h6></h6> : 제목 태그. 1에서 6으로 갈 수록 점점 작아짐.
<p></p> : 문단 태그

<!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>Document</title>
    <style>
        h1 {
            background-color: red;
            width: 300px;
            height: 300px;
        }
        div {
            background-color: blue;
        }
        p {
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>블록 요소 체크</h1>
    <div>블록 요소의 성질</div>
    <p>블록 요소는 수직으로 배치된다.</p>
</body>
</html>

실습 3. 인라인 요소

인라인 요소 (<span> 등) 에는 style로 width, height 등의 속성 값을 전달하더라도 반영되지 않는다.

<!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>Document</title>
    <style>
        h1 {
            background-color: skyblue;
            width: 700px;
            height: 200px;
        }
        span {
            background-color: greenyellow;
            width: 200px;
            height: 300px;
        }
        a {
            background-color: gray;
        }
    </style>
</head>
<body>
    <h1>인라인 요소</h1>
    <span>인라인 요소는 수직으로 배치된다.</span>
    <a href="#">인라인 요소 링크입니다.</a>
</body>
</html>

2. 콘텐츠 태그

실습 1. 제목 태그

h1태그가 먼저 나왔으면 순서대로 2~6의 크기 순으로 점점 안쪽으로 들어가는 작은 제목을 출력하는게 좋음.

<!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>Document</title>
</head>
<body>
    <h1>문서의 제목1</h1>
    <h2>문서의 제목2</h2>
    <h3>문서의 제목2</h3>
    <h4>문서의 제목2</h4>
    <h5>문서의 제목2</h5>
    <h6>문서의 제목2</h6>
    <hr>

    <h1>자바 웹 개발자 양성 과정</h1>

    <h2>강사 소개</h2>
    <p>강사 이름 등등등...</p>

    <h2>주요 학습 과목</h2>
    <h3>1. HTML</h3>
    <p>HTML은 웹 사이트의 구조를 담당합니다.</p>
    <h3>2. CSS</h3>
    <p>CSS는 등등등...</p>
</body>
</html>

실습 2. 목록 태그

<li></li> : 목록을 만드는 태그. <ul> 또는 <ol> 태그 내에 같이 사용된다.
<ul></ul> : Unordered List, 순서없는 리스트
<ol></ol> : Ordered List, 디폴트로는 번호가 매겨지는 순서있는 리스트. 속성값을 달리 주어 숫자 대신 알파벳으로도 정렬 부분을 바꿀 수 있다.

<!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>Document</title>
</head>
<body>
    <!--header나 section태그는 구조를 나누기 위해 있는 태그로
        기능이 따로 부여된 것은 없음.-->
    <!--header는 웹 페이지의 소개 및 메뉴 등의 탐색에
        도움을 주는 콘텐츠를 나타낸다. (로고, 검색 폼, 메뉴 네비게이션 등)-->
    <header>
        <h1>리스트 태그 학습</h1>
    </header>
    
    <!--section은 문서의 일반적인 영역을 나타내며,
        의미 없는 영역을 표시할 때 주로 사용.-->
    <section>
        <h2>오늘 장 볼 내용(순서가 없는 리스트)</h2>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Cheese</li>
            <ul>
                <li>Cream Cheese</li>
                <li>Mozzarella Cheese</li>
            </ul>
        </ul>
    </section>

    <section>
        <h2>라면 끓이기</h2>
        <!--ol type="a"-->
        <ol>
            <li>물 끓이기</li>
            <li>면 투하</li>
            <li>스프, 계란 등 재료 넣기</li>
            <li>맛있게 먹기!</li>
        </ol>
    </section>
</body>
</html>

3. 종합

<!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>Document</title>
    <style>
        body {
            width: 1300px; 
            margin: 0 auto;           
        }
        header {
            display: flex;
            border-bottom: 1px solid gray;
        }

        header h1 {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
            margin-left: 20px;
            flex: 1;
        }
        header nav ul {
            flex: 1;
            display: flex;
        }
        header nav ul li {
            list-style: none;
            margin-right: 5px;
            padding: 10px;
        }
        header nav ul li a {
            text-decoration: none;
            color: gray;
            font-size: 1.1em;
        }
        header nav ul li a:hover {
            color: red;
            background: yellow;
        }

        section {
            border: 1px solid lightgray;
            margin-top: 40px;
            padding: 60px;
            overflow: hidden;
        }

        section h2 {
            font-size: 30px;
            color: red;
            border-bottom: 1px dashed red;
            text-align: center;
            width: 50%;
            margin: 0 auto 30px;
        }

        section article {
            height: 300px;
            border: 2px solid blue;
            padding: 30px;
            text-align: center;
            width: 25%;
            margin-right: 2%;
            float: left;
        }

        aside {
            width: 150px;
            height: 800px;
            background: green;
            position: absolute;
            right: 5%;
            top: 10%;
        }

        footer {
            border-top: 1px solid gray;
            margin-top: 60px;
            padding: 20px 10px;
        }
        footer a {
            text-decoration: none;
            color: #a1a1a1;
            margin-right: 30px;
            font-size: 22px;
        }

    </style>
</head>
<body>
    <header>
        <h1>로고</h1>
        <nav>
            <ul>
                <li><a href="#">게시판</a></li>
                <li><a href="#">방명록</a></li>
                <li><a href="#">로그인</a></li>
            </ul>
        </nav>
    </header>

    <!--섹션이 게시물 3개를 포함하고 있음.
        페이지를 직접 확인하지 않더라도,
        코드만 보고도 섹션 안에 게시물이 포함된 것을
        알 수 있음.-->
    <section class="board">
        <h2>게시물 목록</h2>
        <article>
            <h3>게시물 제목1</h3>
            <p>내용</p>
        </article>
        <article>
            <h3>게시물 제목2</h3>
            <p>내용</p>
        </article>
        <article>
            <h3>게시물 제목3</h3>
            <p>내용</p>
        </article>
    </section>

    <!--aside라는 태그 자체에 기능은 없지만,
        태그를 보고 이 부분에 사이드 부분에 들어갈
        무언가가 존재하게 되는 부분이라는 걸 알 수 있다.-->
    <aside>
        Side Banner
    </aside>

    <footer>
        <!--address도 기능은 없음-->
        <address>
            <a href="mailto:stephen4951@gmail.com">이메일 전송</a>
            <a href="tel:+821033923115">전화 걸기</a>
        </address>
    </footer>
</body>
</html>

<section> <article> <nav> 등과 같은 컨텐츠 구분 태그를 잘 활용할 것.

3. 인라인 텍스트

실습 1. a태그

target 속성
_self : 기본값. 현재 창에서 새 웹페이지 열기
_blank : 새 창에서 웹페이지 열기
_parent : 부모 프레임에서 새 퓁페이지 열기
_top : 최상위 프레임에서 새 웹페이지 열기

<!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>Document</title>
</head>
<body>
    <a href="https://www.naver.com/">네이버로 이동!</a>
    <!--target : _blank, _self -->
    <a href="https://www.google.com/" target="_parent">구글로 이동!</a>

    <header id="top">
        <article>
            <h1>안녕~</h1>
            <!--일부러 height 속성값에 height 높게 줘서 스크롤-->
            <p style="height: 2000px;">가나다~~~~~~~~~~~~~~</p>
        </article>
    </header>

    <!--#으로 id를 지정하여 해당 링크 누를 시
        top이라는 id에 대응하는 곳으로 이동-->
    <a href="#top">맨 위로 이동</a>
</body>
</html>

실습 2. 강조태그

<b></b> : Bold, 굵게 표시
<strong></strong> : Bold와 같이 굵게 표시되나, 정말 중요한 의미인 경우에만 사용
<span></span> : 아무런 기능은 없으나, 해당 텍스트 영역 부분에 스타일을 주거나 하고 싶을 때 사용.
<em></em> : 문장 내에서 특정 문맥을 강조할 때 사용, 이탤릭으로 표시됨
<mark></mark> : 형광펜으로 마킹한 듯 한 효과가 생김.
<abbr></abbr> : 약자임을 의미하는 태그

4. 멀티미디어

실습 1. 이미지 삽입

<!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>Document</title>
</head>
<body>
    <!--상대경로로 지정해줌,
        <figure> 태그를 달면서 왼쪽 위 구석에
        바짝 붙었던 이미지가, 어느 정도
        공간적 여유를 갖고 배치됨-->    
    <figure>
        <img src="./Images/resource.jpg" alt="송아지">
        <figcaption>우리집 송아지 이쁘죠?</figcaption>
    </figure>

    <img src="./Images/resource.jpg" width="400px;" alt="송아지">

    <a href="https://www.naver.com/">
        <img src="./Images/resource.jpg" width="100px;" alt="송아지">    
    </a>

    <img src="https://www.usjournal.kr/news/data/20201110/p1065623956462874_145_thum.jpg" alt="범고래">
</body>
</html>

실습 2. 오디오 삽입

<!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>Document</title>
</head>
<body>
    <audio src="./Musics/song.mp3" controls autoplay muted loop></audio>
</body>
</html>

실습 3. 비디오 삽입

<!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>Document</title>
</head>
<body>
    <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls autoplay loop poster="./Images/resource.jpg"></video>
</body>
</html>

실습 4. iframe

<!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>Document</title>
</head>
<body>
    <h1>현재 페이지에 남의 웹 사이트 들고 오기</h1>
    <iframe src="https://www.daum.net/" frameborder="1" width="1280px" height="720px"></iframe>
</body>
</html>

특정 사이트의 경우 iframe 태그를 거부하여 표시가 되지 않는 경우가 있음.

실습 5. 스크립트삽입

<!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>Document</title>
    <!--defer : 페이지가 모두 로드된 후에 외부 스크립트 실행-->
    <script src="./app.js" defer></script>
</head>
<body>
    
    <div id="my-pet">
        귀여운 거북이~
    </div>
    <button id="change">변경하기</button>
    
</body>
</html>
const $btn = document.querySelector('#change');
const $pet = document.querySelector('#my-pet');

$btn.addEventListener('click', e => {
    $pet.textContent = '못난이 거북이!!';
});

5. 표컨텐츠

실습 1. basic

<!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>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <!--table 태그는 표를 작성하는 태그입니다-->
    
    <table border="1">
        <tr> <!--table의 자식태그 tr은 표의 행을 나타냅니다.-->
            <th>이름</th> <!--tr의 자식태그 td는 한 행에 들어갈 열(칸)-->
            <th>나이</th>
            <th>성별</th>
            <th>주소</th>
            <th rowspan="4" align="center">
                <button>세로버튼</button>
            </th>
        </tr>
   
        <tr>
            <td>김철수</td>
            <td>30</td>
            <td>남자</td>
            <td>서울특별시</td>
        </tr>
        <tr>
            <td>김영희</td>
            <td>30</td>
            <td>여자</td>
            <td>인천광역시</td>
        </tr>
        <tr>
            <!--병합하고 싶은 셀 갯수, 가운데 정렬 -->
            <td colspan="4" align="center">
                <button>버튼입니다</button>
            </td>
        </tr>
    </table>
</body>
</html>
profile
misung
이전 포스트

데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 7일차 강의 정리

다음 포스트

데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 22일차 강의 정리

0개의 댓글