- 개발환경(서버와 클라이언트 구조의 웹프로그램)
- UI제공화면 - html
- html 개발환경 - Visual Studio Code
언어형식 - utf-8(euckr도 있음) - 프로그램 설치 후 한글팩, 라이브서버 확장팩 설치, 크롬브라우저 기본 설정
- html 기본구조- 태그와 태그의 속성을 중심으로 공부
<!DOCTYPE html>
<!--문서를 document라고 하며 !가 앞에 있다는 것은 html5 버전을 의미한다.
버전별로 지원하는 태그가 조금씩 다르다.-->
<html lang="en">
<!--문서의 언어형식-->
<head>
<!--head tag 는 화면에 표시되지 않고 문서에 대한 정보를 기록-->
<meta charset="UTF-8">
<!--문자 코드형식 한글을 표현하는 방식: euckr vs utf-8
euckr- 한국컴퓨터에서 사용되며 3바이트로 한글저장
utf-8- 전세계에서 사용되며 2바이트로 한글저장-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: royalblue;
/* 주석 */
background-color: burlywood;
}
</style>
<script>
function aa() { //함수정의
var a = 20; //선언문
a += 30; //구현문
alert("당신의 나이는?"); //메서드(함수)
let c = bb(10);
var d = "입니다."
a += c;
alert(a + d);
}
function bb(c) {
return c + 20;
}
</script>
<title>Document</title>
</head>
<body>
<!--body tag 는 화면에 표시할 문서를 작성하는 곳-->
<!--
1.용어 : 태그 <tag></tag> 태그의 시작과 끝
2. 태그는 부모와 자식의 관계가 있으므로 부모태그 안에 태그를 작성할때는 들여쓰기.
-->
<h1>첫번째 만드는 웹문서</h1>
<input type="button" value="버튼" onclick="aa()">
<!--함수호출-->
</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>Document</title>
</head>
<body>
<h1>공부하기 메뉴</h1>
<h4>
<a href="#01">개발환경</a>
</h4>
<h4>
<a href="#02">UI</a>
</h4>
<h4>
<a href="#03">HTML</a>
</h4>
<h4>
<a href="#04">프로그램 설치하기</a>
</h4>
<h4>
<a href="#05">html 기본구조</a>
</h4>
<hr>
<ol>
<li id="01">
개발환경(서버와 클라이언트 구조의 웹프로그램)<br>
<br><br><br><br><br><br><br><br><br><br><br>
</li>
<li id="02">
UI제공화면 공부 - html<br>
<br><br><br><br><br><br><br><br><br><br><br>
</li>
<li id="03">
html 개발환경 구성<br>
프로그램: Visual Studio Code<br>
언어형식: utf-8(eunkr도 같이 공부해두세요)<br>
<br><br><br><br><br><br><br><br><br><br><br>
</li>
<li id="04">
프로그램 설치후 한글팩 설치, live server 설치,<br>
기본 프라우저 크롬으로 설정..<br>
<br><br><br><br><br><br><br><br><br><br><br>
</li>
<li id="05">
Html 기본구조<br>
태그와 태그의 속성을 중심으로 공부한다.<br>
어떤 태그인지 속성은 있는지<br>
<br><br><br><br><br><br><br><br><br><br><br>
</li>
</ol>
<hr>
<ul>
<li>
<b>웹프로그램의 이해</b>
<ol>
<li>
개발환경
</li>
<li>
백엔드와 프론트엔드
</li>
</ol>
</li>
<li>
<b>프로그램의 이해</b>
<ol>
<li>
UI
</li>
<li>
html의 이해
</li>
<li>
프로그램 설치하기
</li>
</ol>
</li>
</ul>
<hr>
<img src = "https://cdn.mkhealth.co.kr/news/photo/202209/59606_62999_1721.jpg"><br>
<img src = "./img/main.jpg">
<table border="1">
<thead>
<tr>
<th colspan="6"><img src = "./img/tableMain.PNG"></th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="6">뿌리차</th>
<td>인삼차</td>
<th rowspan="9">과일차</th>
<td>수정과</td>
<th rowspan="5">잎차</th>
<td>뽕잎차</td>
</tr>
<tr>
<td>당귀차</td>
<td>유자차</td>
<td>감입차</td>
</tr>
<tr>
<td>생강차</td>
<td>구기자차</td>
<td>솔잎차</td>
</tr>
<tr>
<td>칡차</td>
<td>대추차</td>
<td>국화차</td>
</tr>
<tr>
<td>둥글레차</td>
<td>오미자차</td>
<td>이슬차</td>
</tr>
<tr>
<td>마차</td>
<td>매실차</td>
<th rowspan="4">기타</th>
<td>두충차</td>
</tr>
<tr>
<th rowspan="3">곡물차</th>
<td>보리차</td>
<td>모과차</td>
<td>영지버섯차</td>
</tr>
<tr>
<td>옥수수차</td>
<td>산수유차</td>
<td>귤강차</td>
</tr>
<tr>
<td>현미차</td>
<td>탱자차</td>
<td>쌍화차</td>
</tr>
</tbody>
</table>
</body>
</html>
공부하는 개발자