2021.11.10 - 국비수업 10일차 / html,css,javascript
* 기본적인 html 구성요소
<!DOCTYPE html> : html태그의 태그와 속성을 선언한 dtd파일을 지정.
<html> : html의 최상위 구성요소
<head>
<meta charset="UTF-8">
<title>위키백과에서 원하는 정보 얻기</title>
</head>
<body> : 실제화면에 나타날 내용을 구성한다.
<h1>HTML이란?</h1>
<p>하이퍼 텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다.<br> : 줄바꿈태그
또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라<br>
링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.</p>
<h1>CSS란?</h1>
<p>종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로,<br>
HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 기본 파일 명 W3C의 표준이며, <br>
레이아웃과 스타일을 정의할 때의 자유도가 높다. </p>
<h1>javascript란?</h1>
<p>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, <br>
다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.<br>
또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.</p>
<h1>jquery란?</h1>
<p>jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 <br>
크로스 플랫폼의 자바스크립트 라이브러리다.</p>
<h1>ajax란?</h1>
비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
</body>
</html>
==============실행================
- 외부링크 하이퍼텍스트 걸기
<a href="www.naver.com"></a>
2. 절대경로 이동 / 이해안가서 죽을뽄
3. 상대경로 이동
* 이클립스 jsp파일 생성시 빨강색 오류 없애기
1) 데스크탑 내 apache 다운로드 경로 폴더 -> lib 폴더 접속
2) jsp-api, servlet-api 복사
3) 이클립스 돌아와서 webapp->lib에 붙여넣기
4)코드 전체 잘라내기 후 다시 잘라넣기 하면 오류 해결 끝~
* 맥북 이클립스 run 실행 단축키
(command + fn + f11 )
* 블투 키보드
(win + shift + f11)
헷갈려죽것다..
*option+command＋아래키
줄 복사
[ 과제 8번 ] 0~100중 정수형 데이터 10개를 배열로 설정하고 , 가장 큰 데이터와 가장 작은 데이터를 출력하세요.
Scanner sc = new Scanner(System.in);
int []num = new int[10];
System.out.println("@ 랜덤 정수 10개 @");
for(int m=0; m<10; m++){
int i = (int)(Math.random()*100+1);
num[m] = i;
System.out.println(i+ " ");
}
int max, min;
max=min=num[0];
for(int m=1;m<10;m++) {
if(max<num[m])
max=num[m];
if(min>num[m])
min=num[m];
}
System.out.printf("가장 큰 값 : %d, 가장 작은 값 : %d",max,min);
}
}
===========실행=============
아직은 내 머릿속으로 코드가 그려지지않아서,, 참고한 사이트
거의 배꼈지모 ㅋ
과제 복붙..
[과제 1-7번]
1. html에 있어서 p, hr, br, a 의 의미를 기술하세요.
<p></p> : 단락태그/ 사이에 텍스트를 입력하면 입력한 내용 앞뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.
<br> : 줄바꿈 태그/ 태그가 삽입된 위치에서만 줄바꿈이 된다. 닫는 태그는 없다.
<hr> : 수평선 태그/ html문서에 수평선을 삽입한다. 주로 컨텐츠 내용을 구분할때 사용된다.
<a></a> : 하이퍼링크를 걸어주는 태그이다.
href : 클릭시 이동할 링크
2. h2와 p. hr과 속성 align,hr을 이용해서 위키백과사전을 통한 java, jsp, spring의 내용을 출력하세요
-->
<h2 align="center">java 란?</h2>
<hr>
<p>
자바(Java)는 썬 마이크로시스템즈의 제임스 고슬링(James Gosling)과 다른 연구원들이 개발한 <br>
객체 지향적 프로그래밍 언어이다. 자바를 다른 컴파일언어와 구분 짓는 가장 큰 특징은 컴파일된 코드가 플랫폼 독립적이라는 점이다.<br>
자바 컴파일러는 자바 언어로 작성된 프로그램을 바이트코드라는 특수한 바이너리 형태로 변환한다. <br>
바이트코드를 실행하기 위해서는 JVM(자바 가상 머신, Java Virtual Machine)이라는 특수한 가상 머신이 필요한데,<br>
이 가상 머신은 자바 바이트코드를 어느 플랫폼에서나 동일한 형태로 실행시킨다. <br>
때문에 자바로 개발된 프로그램은 CPU나 운영 체제의 종류에 관계없이 JVM을 설치할 수 있는 시스템에서는 어디서나 실행할 수 있으며, <br>
이 점이 웹 애플리케이션의 특성과 맞아떨어져 폭발적인 인기를 끌게 되었다.
</p>
<hr/>
<h2 align="center">jsp 란?</h2>
<hr>
<p>
자바 서버 페이지는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 <br>
웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다.<br>
Java EE 스펙 중 일부로 웹 애플리케이션 서버에서 동작한다.</p>
<hr/>
<h2 align="center">spring은 무엇?</h2>
<hr>
<p>스프링 프레임워크는 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크로서 간단히 스프링이라고도 한다.<br>
동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다.
</p>
<hr/>
===========실행=============
3. <a>의 기본 속성과 사용방법을 기술하세요.
<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용한
<a href="http://www.naver.com">네이버 사이트로 이동!
4. hyperlink란 무엇을 의미하는지 기술하고, 오늘 연습한 상대적 주소와
절대적 주소와 상대적 주소의 의미를 기술하고, 예제를 통해 설명하세요.
**링크 주소는 일반적으로 ‘절대경로’와 ‘상대경로’로 나뉘어진다.
절대경로와 상대경로는 링크태그만이 아닌 다른 외부파일을 연결하는
모든 연결방식에 사용하는 개념이다.
1)절대경로 : 변하지 않는 주소
최상위 디렉토리가 반드시 포함된 경로를 의미
2)상대경로 : 경로를 작성하는 파일 (html, css, jsp)등을 기준으로
연결하는 파일의 위치를 작성하는 것
현재 디렉토리를 기준으로 작성된 경로.
상대경로는 현재 파일을 기준으로 하기에 다른 폴더를 호출할때, 아래의 형식으로 접근할 수 있다.
1) ../ : 현재폴더를 포함하고 있는(a03_basic) 최상위 폴더(a01_HTML)로 이동한다.
ex) ../start.html =>
현재폴더의 상위폴더인 a01_html로 이동하여 그 밑에 생성된 폴더(a02,a03...)의 파일이 아닌,
a01html 폴더에만 생성된 파일을 호출한다.
2) ../a02_htmlStart/a01.start.html
3) ../../index.html : 상위의 상위폴더에 있는 페이지 호출 ( a01html보다 위의 webapp)
4) ./a01_com/a01_com.html : 현재파일이 있는 폴더에 생성된 하위폴더에 있는 페이지 호출 (폴더 안의 폴더)
<h2>절대경로 이동 과제</h2>
<a href="/javaexp/a01_HTML/a02_htmlStart/NewFile.html">a02폴더에 있는 newfile</a> <br>
<a href="/javaexp/a01_HTML/z01_test/a02_show.html">z01_test폴더에 있는 a02_show파일 </a> <br>
<a href="/javaexp/a01_HTML/start.html">a01_HTML폴더에 있는 start파일 </a> <br>
<h2>상대경로 이동 과제</h2>
<a href="a00_exp.html">상대경로1 (같은 폴더안의 파일 a00으로 이동)</a><br>
<a href="../index111.html">상대경로2 (상위 a01_HTML폴더 내의 파일 (폴더 a02,a03내의 파일이 아님 )</a><br>
<a href="../a03_basicTag/a05_poem.html">상대경로3 (다른 폴더의 파일 열기 /폴더a03내의 시 파일)</a><br>
<a href="../../index02.html">상대경로4 (상위폴더 webapp내의 파일)</a><br>
<a href="./a01_com/a01_com.html">상대경로5 (폴더 안에 폴더 )</a><br>
<hr/>
===========실행=============
7. 목록태그 이용하여 front end 과목과 back end 과목을 리스트하여 출력
<h2>front end 과목</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<h2>back end 과목</h2>
<ul>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
</ul>
<hr/>
</body>
</html>
===========실행=============
