본문 바로가기
ICIA 수업일지

2021.07.19 수업일지

by 주성씨 2021. 7. 24.

- VSC(Visual Studio Code) :  편집기
- HTML(HyperText Markup Language) : 웹 애플리케이션(웹 페이지) 뼈대 구성

※ 프론트 엔드 : 웹 디자인, 소비자에게 보이는 부분을 프로그래밍 및 디자인하는 것.

- 서버 개발자 : JSP(Jakarta Server Pages)
- 프런트앤드 개발자 : JavaScript(HTML 동적기능 구현), jQuery, react, vue.js, node.js // 여기까지 서버 개발자의 역할
- 퍼블리셔 : HTML(골격), CSS(디자인)
- 웹디자이너 : 포토샵, 일러스트

- 목표 : 웹 표준을 이용한 클라이언트 프로그래밍. 엣지, 사파리, 파이어폭스, 크롬 등 다양한 브라우저 환경에서 동일한 서비스를 제공할 수 있어야 한다.

<!-- html5로 시작됨을 알림 -->
<!DOCTYPE html>
<html lang="kr">
<!-- head 머릿글 -->
<head> 
<title>  </title>
</head>
<!-- body 보여줄 내용 -->
<body>
    hello world
</body>

</html>

 

- 기본 구조

<!-- HTML 규격 -->
<!-- <!doctype html> -->
<html>

<head>
    <!-- 문자 인코딩 설정 -->
    <meta charset="UTF-8"/>
    <!-- 타이틀 태그 -->
    <TITLE>
        웹 페이지 제목
    </TITLE>
</head>

<body>
    <!-- space, enter 와 같은 화이트 문자는 
        적용이 안되거나 하나만 적용된다. -->
        <!-- <br> ; line break in text 을 통해서 줄바꿈 -->
        <!-- &nbsp; non breaking space - 문자 사이에 공백을 주고 싶을때  -->
    웹 페이지 &nbsp;&nbsp;&nbsp;&nbsp; 내용(뼈대)<br/>
    웹 페이지 디자인 - CSS<br/>
    웹 페이지 기능 - JavaScipt
</body>

</html>

 

- hTag

<!-- html5 문서 규격 -->
<!-- emmet ; 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인-->
<!-- html>head+body -->
<html>

<head></head>

<body>
    <!-- emmet -->
    <!-- ul>li*3 -->
    <ul>
        <!-- li ; list -->
        <li>
            HTML
        </li>
        <li>
            CSS
        </li>
        <li>
            JavaScipt
        </li>
    </ul>
</body>

</html>

 

- 강조 1 ~ 6까지 가능 하며 숫자가 클수록 작아짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- h1 ; headline -->
    <!-- alt + shift + ↓ ; copy -->
    <h1>헤드라인 h1</h1>
    <h2>헤드라인 h2</h2>
    <h3>헤드라인 h3</h3>
    <h4>헤드라인 h4</h4>
    <h5>헤드라인 h5</h5>
    <h6>헤드라인 h6</h6>
</body>
</html>

 

- 01_Basic

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>-애국가-</title>
</head>
<body>
    <!-- </br>은 문단으로 안보이고 단순히 줄바꿈 -->
    <!-- <p></p>는 단락으로 설정 ; Paragraph(단락) element-->
    <!-- <hr> ; horizontal rule 가로줄 -->
    <p>동해물과 백두산이</p>
    <hr>
    <p>남산위에 저 소나무</p>
    <hr>
    <p>가을하는 공활한데</p>
    <hr>
    <p>이 기상과 이 맘으로</p>

</body>
</html>

 

- A 태그 ; 하이퍼 링크 태그로, 링크 이동에 사용

+ 참고

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- font 사이즈 속성 -->
    <!-- color 글자색 속성 -->
    <!-- 권장하지는 않음 -->
    <font size="7" color="red">무궁화 꽃</font>
    <font size="6" color="blue">무궁화 꽃</font>
    <font size="5">무궁화 꽃</font>
    <font size="4">무궁화 꽃</font>
    <font size="3">무궁화 꽃</font>

</body>
</html>

 

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- The <a> HTML element (or anchor element), 
        with its href attribute, 
        creates a hyperlink to web pages -->
    <!-- taget="_blank" ; 새창으로 열림 -->
    <a href="http://www.naver.com" target="_blank">네이버</a>
    <a
        href="https://www.google.com/search?q=html+a+hred+meaning&source=lmns&bih=459&biw=958&hl=en&sa=X&ved=2ahUKEwiyuuiA_e3xAhWOAKYKHWOPAmAQ_AUoAHoECAEQAA">a
        href 뜻</a>
</body>

</html>

 

+ 다른 .html로 이동 

<a href="01_Basic.html">01_Basic로 이동</a>

ㄴ 위는 같은 경로 상에 있으니 경로를 생략했지만 다른 경로는 앞에 경로를 붙여줘야 한다.

 

- img 태그 ; 이미지를 불러와 보여주는 태크
+ 하드 드라이브에 있는 링크로 이미지 띄우기
+ 해당 이미지의 원본으로 이동하는 링크로 이미지 감싸기

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

<head>
    <meta charset="UTF-8">
    <title>이미지</title>
</head>

<body>
    <div id="top">맨위</div>
    <!-- src ; 이미지 파일 명.확장자
    alt ; 이미지 설명
    width ; 너비
    height ; 높이 -->
    <a href="https://www.hankookilbo.com/News/Read/201904291390027161">
        <img src="201904291390027161_3.jpg" alt="고양이" width="400" height="200">
    원본으로 이동</a>
    <!-- 비율을 유지하고 싶을때는 너비나 높이중 하나만 주면 됨 -->

    <!-- 최하단에서 최상위로 올라가고 싶을때 -->
    <a href="#top">맨위로</a>

</body>

</html>

 

- pre (preformatted text) 태그 ; html 내 띄어 쓰기, 줄바꿈을 그대로 보여준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <pre>
        동해물과 백두산이

        마르고 닳도록

        하느님이 보우하사

        일편단심일세
    </pre>
</body>
</html>

 

- EM 태그 ; 시맨틱(Semantic) 웹(; 의미가 명확한 웹)에서 주요 단어나 정보를 표현

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

<head>
    <meta charset="UTF-8">
    <meta http-="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <small>small</small> ; 글자를 상대적으로 작게 -->
    <h2>HTML <small>small</small></h2>
    <!-- <b>small</b> ; 글자를 굵게 -->
    HTML <b>small</b>
    <!-- <mark>Bold</mark> ; 글자 배경 마킹 -->
    <h2>HTML <mark>Bold</mark>
    </h2>
    <!-- <i>Bold</i> ; 글자를 기울임 ; i = italic -->
    <h2>HTML <i>Bold</i>
    </h2>
    <!-- <em>Bold</em> ; emphasized -->
    <h2>HTML <em>Bold</em>
    </h2>
    <!-- <del>Bold</del> ; 글자를 읽음 표시함(줄그음) -->
    <h2>HTML <del>Bold</del>
    </h2>
    <!-- <sub>Bold</sub> ; 아래첨자 설정 -->
    <h2>O <sub>2</sub>
    </h2>
    <!-- <sup>3</sup> ; 위첨자 설정 -->
    <h2>2 <sup>3</sup>
    </h2>
</body>

</html>

 

+ 참고 ; 탭 아이콘 이미지 설정

<!DOCTYPE html>
<html lang="kr">
<head>
    <link rel="icon" href="btn.png">
</head>
<body>
    <!-- </br>은 문단으로 안보이고 단순히 줄바꿈 -->
    <!-- <p></p>는 문단으로 설정 -->
    <!-- <hr> ; horizontal rule 가로줄 -->
    <p>동해물과 백두산이</p>
    <hr>
    <p>남산위에 저 소나무</p>
    <hr>
    <p>가을하는 공활한데</p>
    <hr>
    <p>이 기상과 이 맘으로</p>

</body>
</html>

 

이미지로 탭 아이콘 설정 가능

 

<!DOCTYPE html>
<html lang="kr">
<head>
    <link rel="icon" href="favicon.ico?v=2" type="image/x-icon">
    <!-- <link rel="icon" href="btn.png"> -->
</head>
<body>
    <!-- </br>은 문단으로 안보이고 단순히 줄바꿈 -->
    <!-- <p></p>는 문단으로 설정 -->
    <!-- <hr> ; horizontal rule 가로줄 -->
    <p>동해물과 백두산이</p>
    <hr>
    <p>남산위에 저 소나무</p>
    <hr>
    <p>가을하는 공활한데</p>
    <hr>
    <p>이 기상과 이 맘으로</p>

</body>
</html>

 

이미지로 탭 아이콘 설정 가능

 

- table 태크 ; 표를 만들어 표출

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

<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>

<body>
    <!-- border="표 굵기 값" -->
    <!-- width:100% ; 브라우저 너비에 딱 맞춰 조정 -->
    <!-- height:200px ; 테이블 높이를 200px으로 설정 -->
    <table border="1" style="width:100%;height: 200px;">
        <caption> 표제목 </caption>
        <!-- 1행 -->
        <tr>
            <!-- th ; table head -->
            <th>FirstName</th>
            <!--1행 1열-->
            <th>LastName</th>
            <!--1행 2열-->
            <th>Point</th>
            <!--1행 3열-->
        </tr>
        <!-- 2행 -->
        <!-- align="center" ; 글자 위치를 센터에 -->
        <tr align="center">
            <!-- td ; table data -->
            <!-- colspan ; 열을 합침 -->
            <td colspan="2">Emma Watson</td>
            <!-- rowspan ; 행을 합침  -->
            <td rowspan="3">90</td>
        </tr>
        <!-- 3행 -->
        <tr align="center">
            <!-- td ; table data -->
            <td>Emma</td>
            <td>Stone</td>
            <!-- <td>95</td> -->
        </tr>
        <!-- 4행 -->
        <tr align="center">
            <!-- td ; table data -->
            <td>Emma</td>
            <td>Thompson</td>
            <!-- <td>95</td> -->
        </tr>
    </table>
</body>

</html>

 

이와 같은 결과가 나온다.

 

- 문제 1

나)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>colspanTest</title>
</head>
<body>
    <table border="1" style="width: 50%;">
        <caption>9월</caption>
        <tr>
            <th colspan="7"><b>9월 4주차</b></th>
        </tr>
        <tr align="center">
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
        </tr>
    </table>
</body>
</html>

 

선생님)

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

<head>
    <meta charset="UTF-8">
    <title>colspanTest</title>
    <!-- CSS 디자인 설정 / header 안에 -->
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            /* collapse ; 무너짐 */
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1" style="width: 50%;">
        <caption>9월</caption>
        <tr>
            <th colspan="7"><b>9월 4주차</b></th>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
        </tr>
    </table>
</body>

</html>

 

- 문제 2

나)

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

<head>
    <meta charset="UTF-8">
    <title>rowspanTest</title>
</head>

<body>
    <table border="2" style="width: 50%;">
        <caption>9월</caption>
        <tr>
            <th><b>주차</b>
            </th>
            <th><b>날씨</b>
            </th>
        </tr>
        <tr align="center">
            <td rowspan="7">4</td>
            <td>21</td>
        </tr>
        <tr align="center">
            <td>22</td>
        </tr>
        <tr align="center">
            <td>23</td>
        </tr>
        <tr align="center">
            <td>24</td>
        </tr>
        <tr align="center">
            <td>25</td>
        </tr>
        <tr align="center">
            <td>26</td>
        </tr>
        <tr align="center">
            <td>27</td>
        </tr>
    </table>

</body>

</html>

 

선생님)

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

<head>
    <meta charset="UTF-8">
    <title>rowspanTest</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            /* collapse ; 무너짐 */
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
<table style="width: 50%;">
    <caption>9월</caption>
    <tr>
        <th><b>주차</b></th>
        <th><b>날짜</b></th>
    </tr>
    <tr>
        <td rowspan="7">4</td>
        <td>21</td>
    </tr>
    <tr>
        <td>22</td>
    </tr>
    <tr>
        <td>23</td>
    </tr>
    <tr>
        <td>24</td>
    </tr>
    <tr>
        <td>25</td>
    </tr>
    <tr>
        <td>26</td>
    </tr>
    <tr>
        <td>27</td>
    </tr>
</table>
</body>

</html>

 

- 문제 3

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th rowspan="3">교과구분</th>
            <th colspan="4">교과목정보</th>
        </tr>
        <tr>
            <th colspan="2">교과목명</th>
            <th rowspan="2">적용과목</th>
            <th rowspan="2">주요내용</th>
            <th rowspan="2">시간</th>
        </tr>
        <tr>
            <th></th>
            <th>NCS능력단위</th>
        </tr>
        <tr>
            <td rowspan="11"><b>NCS 적용 교과(480H)</b></td>
        </tr>
        <tr>
            <td><b>NCS 기초 능력</b></td>
            <td>기술능력</td>
            <td>개발산출문서</td>
            <td>개발에 따른 문서의 종류 및 이해</td>
            <td>40H</td>
        </tr>
        <tr>
            <td rowspan="2"><b>Hybrid Web-App 디자인</b></td>
            <td>요구사항확인</td>
            <td>Project</td>
            <td>현행 시스템 분석하기</td>
            <td>40H</td>
        </tr>
        <tr>
            <td>어플리케이션 설계</td>
            <td>Project</td>
            <td>정적 모델 상세 설계 및 분석</td>
            <td>40H</td>
        </tr>
        <tr>
            <td rowspan="4"><b>Hybrid Web-App 구현</b></td>
            <td>화면구현</td>
            <td>HTML5/CSS3</td>
            <td>DEVICE별 UI 요구사항 확인 및 분석</td>
            <td>40H</td>
        </tr>
        <tr>
            <td>애플리케이션 구현</td>
            <td>JSP/Servlet</td>
            <td>어플리케이션 설계 및 암호화 정책 확인</td>
            <td>144H</td>
        </tr>
        <tr>
            <td>데이터 입출력</td>
            <td>Oracle</td>
            <td>논리데이터 확인 및 물리저장소 설계</td>
            <td>56H</td>
        </tr>
        <tr>
            <td>통합구현</td>
            <td>Optimization</td>
            <td>MVC Pattern을 적용한 연계 메카니즘 구성</td>
            <td>32H</td>
        </tr>
        <tr>
            <td rowspan="3"><b>Hybrid Web-App 배포</b></td>
            <td>개발자테스트</td>
            <td>JAVA Language</td>
            <td>데이터 흐름에 따른 단계 별 테스트 케이스 설계</td>
            <td>32H</td>
        </tr>
        <tr>
            <td>정보시스템이행</td>
            <td>개발산출문서</td>
            <td>개발 산출 문서 확인 및 수정</td>
            <td>32H</td>
        </tr>
        <tr>
            <td>소프트웨어 패키징</td>
            <td>프로그램 메뉴얼</td>
            <td>사용자에게 배포할 Device별 Hybrid Web-App 패키징</td>
            <td>24H</td>
        </tr>
    </table>
</body>

</html>

 

 

- List ; HTML 문서 내 리스트 출력

1. li ; 정렬 넘버가 없는 리스트

<!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>
    <h2>UL - 정렬 넘버가 없는 리스트</h2>
    <ul style="list-style-type: disc;">
        <!-- li 머릿글 기호 생성 -->
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
    <ul style="list-style-type: circle;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
    <ul style="list-style-type: square;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
    <ul style="list-style-type: none;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</body>
</html>

 

2.ol ; 정렬 넘버가 있는 리스트

<!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>
    <h2>OL - 정렬 넘버가 있는 리스트</h2>
    <ol type="1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
</body>
</html>

 

3.dl ; 설명 리스트 정의

<!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>
    <dl>
        <dt>HTML</dt>
            <dd>- 웹 애플리케이션 내용</dd>
            <dd>- 웹 애플리케이션 뼈대</dd>
        <dt>CSS</dt>
            <dd>- HTML을 보다 세련되게 표현</dd>
        <dt>JavaScript</dt>
            <dd>- HTML에 동적인 기능 구현</dd>
    </dl>
</body>
</html>

 

4. ul ; 리스트 정의

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 리스트는 ol 이나 ul -->
    <ul>
        <li>Front-End</li>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <li>JSP</li>
        <li>Servlet</li>
        <li>Back-End</li>
    </ul>
</body>
</html>

 

5. ul, li, a href를 이용한 클릭 시 특정 사이트로 들어가는 모델 구현

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li {
            list-style-type: none;
            /* 창 왼쪽으로 차례대로 정렬 */
            float: left;
            /* 글자간 여윳간격 확보 */
            padding: 20px;
            /* 배경색 설정 */
            background-color: rgb(255, 185, 185);
        }
        /* hover css 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 뜻한다. 
        쉽게는 사용자의 커서(마우스의 포인터)가 요소에 올라가 있을 때 적용된다. */
        /* 반응 선택자 */
        li:hover{
            background-color: rgb(255, 234, 234);
        }
    </style>
</head>

<body>
    <!-- 머릿기호를 없애고, 수평 리스트로 만들고 싶을때 -->
    <ul>
        <!-- 해당 리스트를 클릭시 인터넷에서 정보를 보여줄 수 있게 구현 -->
        <!-- 리스트 밖에 묶으면 배경까지 링크가 걸림 -->
        <!-- 리스트 안쪽에 넣으면 글자만 링크가 걸림 -->
        <a href="https://ko.wikipedia.org/wiki/HTML">
        <li>HTML</li></a>
        <a href="https://ko.wikipedia.org/wiki/CSS">
        <li>CSS</li></a>
        <a href="https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">
        <li>JavaScript</li></a>
        <a href="https://ko.wikipedia.org/wiki/jQuery">
        <li>jQuery</li></a>
    </ul>
</body>

</html>

 

- iFrame ; 다른 URL의 페이지를 삽입

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <iframe src="13_HorizonList.html" frameborder="1" width="600" height="400"></iframe>
    <hr>
    <iframe width="640" height="360" src="https://www.youtube.com/embed/cbuZfY2S2UQ" title="YouTube video player"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </hr>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>jQuery</li>
    </ul>
</body>

</html>

ㄴ 유튜브 동영상을 삽입할 수 있다.

 

- input ; 입력 폼 발췌

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

<head>
    <meta charset="UTF-8">
    <title>Input</title>
</head>

<body>
    <!-- form tag -->
    <form action="Login">
        아이디 : <input type="text"><br>
        비밀번호 : <input type="password"><br>
        <!-- msg()메서드 클릭시 팝업될 수 있게 -->
        <!-- button ; 특별한 역할이 없다 -->
        <input type="button" value="클릭" onclick="msg()">
        <!-- submit ; 클릭 시 서버로 전송하는 역할 -->
        <input type="submit" value="로그인" onclick="msg()">
        <!-- 위의 submit과 같은 역할을 한다. -->
        <button onclick="msg()">로그인button</button>
    </form>

    <!-- 자바스트립트 -->
    <script>
        function msg() {
            alert("Hello");
        }
    </script>
</body>

</html>
저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.07.21 수업일지  (0) 2021.07.24
2021.07.20 수업일지  (0) 2021.07.24
2021.07.16 수업일지  (0) 2021.07.17
2021.07.15 수업일지  (0) 2021.07.17
2021.07.14 수업일지  (0) 2021.07.17

관련글

티스토리툴바