'HTML'에 해당되는 글 4건

Code/HTML & CSS & JAVASCRIPT

JAVASCRIPT

반응형

 

자바 스크립트



- html css만으로 표현하기 어렵거나 불가능한 작업을 하기 위해 만들어진 언어
- html 문서 내 작성/ 외부 파일에서 작성 후 불러올 수 있음

- head 안에  

<script language = "javascript">
	document.write("gg");	 -> 내장 함수
</script>



- 변수 :  var 변수명 = 초기값; var : 모든 타입 통합된 것이라 생각하면 됨
- 배열 :  var 배열 = new Array(); 배열명.push(1);     //값 넣기 배열명[0]=1;
- 예외처리 : try{  } catch{  }
- 함수 : function 함수명 (매개변수) {..실행코드}      //리턴 타입 없다 -> var 가 통합된거기 때문ㅇㅔ 안쓰는것임

 

 


웹 브라우저  

- window: 자바 스크립트가 제동하는 기본 객체

- alert("메시지");

- prompt("사용자에게 보내줄 메시지", 입력창에 미리 입력되어 있을 문자") : 질문에 대한 답변 받을 때
ex) 사용자의 이름 받아서 팝업 해줌 
    var userinput = prompt("당신의 이름은 무엇입니까",""); //입력한 데이터 리턴해줌
    alert(userinput+"환영합니다.");

- confrim () : 확인 취소 두가지 대답 확인 할 수 있도록 하는 것
ex) var result = confirm("2019년 이루고자 하는 것 이뤘나오?");
     if(result)alert("수고했다");
    else alert("힘내라");

 


- 메소드 : window.open("팝업창주소", "이름", "속성"); -> 새로운 팝업 창 나타나도록 할 수 있다

- setTimeout(함수명, 시간) : 지정된 시간 지나면 특정 함수 실행
  ex) var timer = setTimeout(sayhello,3000);
      clearTimeout(timer); //타이머 번호 얻기
- setInterval(실행할 함수명, 시간) : 지정된 시간 지날때마다 함수를 계속 호출하는 함수

* setInterval : 일정한 시간마다 반복 - 시계 -> 반복할 때마다 함수 계속 호출되는 것임!!!!** 함수 안에 변수 넣게되면 초기화 되는 것과 같음
  setTimeout : 특정 시간 됬을 대 동작 - 타이머

반응형
저작자표시 비영리 (새창열림)

'Code > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

JAVASCRIPT 예제_오른쪽마우스 막기, 스크롤 금지  (0) 2019.06.20
JAVASCRIPT 예제_바뀌는 이미지  (0) 2019.06.20
JAVASCRIPT 예제_현재 시간 출력(setInterval)  (0) 2019.06.20
CSS  (0) 2019.06.20
HTML  (0) 2019.06.20
Code/HTML & CSS & JAVASCRIPT

CSS

반응형

CSS



html 태그의 글자색 변경 , 정렬 방식 , 배경색 , 이미지 등 지정

사용의 편리성과 일괄성 
Html 문서가 등장한 목적은 간단하고 빠르게 인터넷 상에 정보를 공유할 수 있는 문서를 만드는 것
겉모습은 CSS로 디자인 


inline
-태그에 직접 스타일을 지정하는 방법
-하나의 태그에만 원하는 스타일 지정
-같은 스타일을 사용하는 태그가 많다면 스타일 코드를 작성하는 작업이 많아진다는 단점이 있음.

ex) 태그에 스타일 주기 

<h2 style = "font-size:30px;" ></h2>

 

ex) css로 스타일 주기

<style>

    h2 { font-size:30px; }

</style>

 

 

 

<link rel="stylesheet" type="text/css" href="css이름.css" >
<style type = "text/css"> @import url("css이름.css");


css 두개 작성 시 밑에꺼가 마지막으로 디자인 먹힘

 

 

- id와 class 스타일 주기

<style>
	#logo {font-size:20px;}
	.test {font-size:10px;}
</style>

<body>
	<div id = "logo" >
    	테스트용1
    </div>
    <div class = "test" >
    	테스트용2
    </div>
</body>

 

 

 



- 태그와 클래스 조합 : 태그.클래스명 -> 같은 클래스 이름 가지고 있는 애들끼리 같은 속성

 

클래스 조합 : ex) 

<h2 class = "title bold blue"></h2>


  css -> .title {} .bold {} .blue {}

반응형
저작자표시 비영리 (새창열림)

'Code > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

JAVASCRIPT 예제_오른쪽마우스 막기, 스크롤 금지  (0) 2019.06.20
JAVASCRIPT 예제_바뀌는 이미지  (0) 2019.06.20
JAVASCRIPT 예제_현재 시간 출력(setInterval)  (0) 2019.06.20
JAVASCRIPT  (0) 2019.06.20
HTML  (0) 2019.06.20
Code/HTML & CSS & JAVASCRIPT

HTML

반응형

HTML (Hyter Text Markup Laguage)

: webpage를 이동할 수 있도록 만들어진 문장

: <> 태그로 이루어져있음

<HEAD> : Html 문서의 시작과 끝 표시 HTML 문서에 대한 정보를 표시하는 사용 CSS, 자바스크립트 작성하는 부분

<TITLE> : HTML문서의 제목을 표시하는 역

* CSS : 예쁘게 꾸미는 것
* 자바 스크립트 : 동적 페이지로 만들어주는 것

 

EX)

1
2
3
4
5
6
7
8
<HTML>
    <HEAD>  <!--열림-->
        <TITLE>내가 처음 만든 HTML 문서</TITLE>    <!--페이지 상단 제목-->
    </HEAD>
    <BODY>    <!-- 눈에 보이는 부분-->
        내가 처음 만든 HTML 문서!
    </BODY>    <!--닫힘-->
</HTML>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  

 

 

<META> : HTML 문서 자체에 대한 설명을 제공하기 위해 사용됨

사용형식 : <META http-equiv ="메타 태그 항목 이름" content = "항목 내용">

              <META name ="메타 태그 항목 이름" content = "항목 내용">

닫는 태그 없음. 검색 엔진들이 html 문서에 포함된 검색 키워드 이용하여 검색하므로, 검색엔진에 의해 잘 검색되도록 하기 위해 사용
내 정보 담아 누가 만들었는지, 언제 만들었는지 담는 기능 -> 저작권으로 사용 가능

 

 

내 페이지 검색 엔진에 나타나기 하기

<META name = "robots" content = "noindex.nofollow"

<META NAME="Keywords" CONTENT="HTML,CSS,Javascript"> -> HTML, CSS, Javascript 검색하면 내 사이트 올라오도록 

<META NAME="description" CONTENT="HTML,CSS,Javascript를 소개합니다."> -> 페이지 설명하는 것

 

 

자동으로 다른 페이지 이동

<META http-equiv="refresh" content="5;url=http://www.netmarble.net/"> -> 페이지 이동, 5초 뒤에 넷마블로 가라

 

제작자 정보 추가하기
filename. author-date,author,email.....

 

 

 

<BODY> 속성

background : 배경 이미지 경로 지정
bgcolor : 색상 문자열, 색상코드 -> 기본 배경색 지정
bgproperies : empty, fixed -> 배경 이미지 스크롤 가능,불가능

하이퍼 링크 색상 조정
alink : 마우스 클릭 링크 색상
link : 방문하지 않은 하이퍼링크 색상
vlink : 이미 방문한 링크 색상

여백
margin : 정식 영역 밖
padding : 영역 안

<P> : 하나의 문단 

<BR> : enter와 같은 역할 -> html에선 엔터가 안먹히기 때문에 태그 써주기

<PRE> : 엔터기나 탭키 등 사용자가 입력한 그 모습 그대로 출력함

<HR> : 줄 만들기 with. width : 길이(%)로 하기, color : 색, size : 선 굵기

&nbsp : 여러개의 빈칸이나 엔터키 등 모든 공백 문자를 단 하나의 빈칸으로 인식, 여러개의 공백 인식하고자

<blockckquotoe> : 들여쓰기


텍스트 : 본문 제목 <h1>~<h6>

내용 : <p>

정렬 : align - 글자 위치 (기본 left /  center, right 줄수있음)

폰트 : font face:글꼴 이름, size : 크기, color:색상, title : 설명  

<B>  : 글자 굵게
<I> : 기울여 씀
<STRIKE>: 글자의 취소선
<U> : 밑줄
<TT> : 글자를 타자체로
<SUP> : 위첨자
<BIG> : 글자 크게

 

 

<marquee> : 페이지에서 눈에 띄게 하고 싶은거 강조하고 싶은거 움직임(모션) 주는 것


ex) <marquee behavior = "sroll"> 

direction  방향 , up : 위로 , down : 아래로 , left : 왼쪽 (기본값) ,  right : 오른쪽 \* scrollamount  움직이는 속도  
   scroll : 옆으로 계속 이동, alternate : 왔다갔다, slide : 끝에 도착하면 종료

 

 

목록태그 : 숫자 이용할 때 <OL>, 숫자 안할 때 <UL>
ex) <OL>
        <LI></LI>

    </OL>

 

- <dl> : 태그로 정렬을 하기 위해

- <menu> : 오른쪽으로 점차 들여쓰기 할 때 사용

 

 

하이퍼링크
<a> : 문장이나 이미지 등에 하이퍼 링크를 만들게 됨
nanme : 문자열, href : url문자열, target: 링크 연결된 페이지 보여질 위치 title : 제목

 

 

<img src = '위치'> : 이미지 불러올 때

<a href = "mailto:이메일 주소?subject=안녕하세요">  : 이메일 주소로 메일 보낼 수 있음 ​

반응형
저작자표시 비영리 (새창열림)

'Code > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

JAVASCRIPT 예제_오른쪽마우스 막기, 스크롤 금지  (0) 2019.06.20
JAVASCRIPT 예제_바뀌는 이미지  (0) 2019.06.20
JAVASCRIPT 예제_현재 시간 출력(setInterval)  (0) 2019.06.20
JAVASCRIPT  (0) 2019.06.20
CSS  (0) 2019.06.20
Code/Servlet & JSP

Web programming

반응형

Web :  웹을 기반으로 홈페이지에 접속하여 서비스를 하는 것    
클라이언트는 서비스를 받는 쪽, 서버는 서비스를 주는 쪽.


Web Programming 언어
1) CGI (Common Gateway Interace) - 초기. 지금은 안 씀
2) ASP (Active Server Page)
3) PHP (Personal Homepage Tools)
4) JSP (Java Server Page)


1) CGI
- 응용프로그램과 웹서버 사이의 정보를 주고받는 방식이나 규약들을 정해 놓은 것
- 정적인 HTML 방식으로는 동적인 웹 페이지를 만들기 어렵기 때문에 서버 측에서 동적인 데이터를 처리해 클라이언트에 HTML 문서로 전송해 줄 수 있는 응용 프로그램의 필요성이 나타났다.
-(백앤드는 CGi기반으로 탄생됐다.)



2) ASP
- Microsoft 사에서 동적인 웹 페이지의 구현을 위해 Visual Basic 언어를 기반으로 만들어진 웹 프로그래밍 기술
- 단점
 - 플랫폼에 비 독립적임
 - 다른 언어에 비해 시스템 자원의 효율성과 확장성이 떨어짐



3) PHP
- ASP와 유사한 스크립트 기반의 언어이지만 ASP와는 다르게 C를 기반으로 만들어진 언어이기 때문에 빠른 속도를 가지고 있다.
- 단점
 - 서버 측의 지원이 부족하며 기업형의 복잡한 시스템 구조에 적용하기가 힘들다. (태생이 약하다. 협회다.)
 - JSP에 비해 보안상의 약점을 가지고 있다. (JSP는 애초에 OOP라는 언어로 만들어져 있고, 중간에 JVM을 거쳐가니까 보안상으로 강력한데, 협회니까 마인드부터가 뒤쳐져있음)



4) JSP 
- 자바를 이용하여 동적인 웹 페이지를 만들기 위해 Sun사가 개발한 기술 
- 서버 페이지를 쉽게 작성할 수 있고, 서블릿과 함께 구동함으로써 서블릿의 기능을 사용할 수 있고, 자바 빈즈, EJB 같은 기술로 보다 강력한 객체 지향적 지원이 가능 
  (서블릿 : 자바가 최초로 웹서버를 할 수 있게 만든 거) 
- 대규모 프로젝트에 용이

 

반응형
저작자표시 비영리 (새창열림)

'Code > Servlet & JSP' 카테고리의 다른 글

Servlet 구현 환경  (0) 2019.06.20
@Annotation  (0) 2019.06.20
Get/Post 방식  (0) 2019.06.20
JSP  (0) 2019.06.20
Servlet  (0) 2019.06.20

푸터바

검색

태그

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

링크

카운터

  • Today :
  • Yesterday :
  • Total :

티스토리툴바