1.1.웹 개발자
전문성을 기준으로 한 웹 개발자의 분류
프론트엔드(Front-end)
프론트엔대 개발자들은 주로 사용자에게 보이는 클라이언트 측면(Client-side)의 프로그래밍을 하게 된다. 이는 HTML, CSS, 자바스크립트(또는 Ajax)등의 코딩과 간단한 이미지 작업까지 포함하여 프로젝트의 크기와 종류에 따라 그 영역이 넓어지거나 작아질 수 있다.
*앞으로는 자바스크립트가 웹표준을 대체할 것이라고 예상*
프론트엔드 개발자들은 코딩시 그 사용성과 눈에 보이는 디자인을 고려해야 하며 백엔드 개발자와의 원활한 커뮤니케이션이 요구된다.
백엔드(Back-end)
프론트엔드와 반대로 사용자가 볼 수 없는 즉 , 비즈니스 로직 프로그래밍을 하는 개발자들을 뜻한다. 프론트엔드에서 전달된 데이터의 포맷이나 데이터베이스 입출력 및 다양한 비즈니스 프로세르를 프로그래밍 코드로 구현하는 역할을 한다. 프론트엔드에 대한 이해와 데이터베이스, 웹서버, 네트워킹 등 웹 애플리케이션의 전반적인 ... 교안참고
웹 개발자들이 주로 작업하는 환경
운영체제 : 윈도우, 유닉스 , 리눅스
클라이언트 측면 언어 : HTML,CSS,자바스크립트,XML,XHTML
클라이언트 측면 js 프레임워크 : JQuery, dojo, prototype, YUI , Jindo
서버 측면 언어 : 자바 , C#(ASP.NET), PHP, JSP VB스크립트(ASP), 파이썬, 펄, Ruby on Rails, grail
프레임워크 : J2EE, ASP.NET MVC, ASP.NET, Webform, Struts, Spring, ibatis, hibernate, gwt, spring roo, sitemesh, oscache, tiles, templete_
.... 교안참고
***************************************************************8
HTML
Hyper Text Markup Language
***연습
메모장 열
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <h1> Hello go home </h1> | |
| </body> | |
</html> 웹브라우저의 역할 : html 코드를 분석, 해석해서 사용자에게 보여준다. **************************************** HTML5 기본 용어 정리 >> HTML5 가 현재 웹표준? HTML5를 공부하려면 알아야 하는 용어 : 태그(Tag), 요소(Element), 속성(Atribute) 태그와 요소 -HTML 페이지에서 객체를 만들 때 사용하는 것 -시작 태그와 끝 태그의 사용법에 따른 구분 속성 -태그에 추가 정보를 부여할 때 사용 |
주석
-
*********************************************************
이클립스 워크스페이스 바꾸기
파일 스위치 아더 브라우즈
워크스페이스2 폴더 새로 만듦
우측위 Java EE를 그대로 둔다.
Java EE 개발환경
프로젝트 생성
뉴
다이나믹 웹 프로젝트
프로젝트명 jsp_0812 피니시
웹컨텐트 우클릭 뉴 HTML 파일
이름 입력 Test1.html 넥스트 html5 선택하고 피니시
***********************************************************
첫화면
<!DOCTYPE html> : 버전정보
<html> : 시작
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
헤드영역 : 페이지 설명
바디영역 : ?
**
F:\workspace2\jsp_0812\WebContent\파일
워크스페이스의 경로로 찾아가서 파일을 웹브라우저로 연다
*************************************************
주석처리방법
<!-- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 주석입니다
여러줄도 가능합니다
<h1> 태그를 넣어도 보이지 않는다<h1>
주석은 보이지 않는다.
-->
<h1>Iu 최고</h1>
</body>
</html>
웹브라우저에서 우클릭 소스보기하면 주석이 보인다.
***************************************************************
<타이틀은 웹브라우저 탭의 제목이다.>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Choa</title>
<!-- 타이틀은 웹브라우저 탭의 제목 -->
</head>
<body>
<!-- 주석입니다
여러줄도 가능합니다
<h1> 태그를 넣어도 보이지 않는다<h1>
주석은 보이지 않는다.
-->
<h1>Iu 최고</h1>
</body>
</html>
**************************************************
태그 : 교안참고
<body태그> 사용자에게 실제로 보이는 부분
meta 메타태그 : 문서에 대한 추가헐명
************************************************
연습 <h1> <h2> <h3>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Choa</title>
<!-- 타이틀은 웹브라우저 탭의 제목 -->
</head>
<body>
<!-- 주석입니다
여러줄도 가능합니다
<h1> 태그를 넣어도 보이지 않는다<h1>
주석은 보이지 않는다.
-->
<h1>대한민국</h1>
<h2>경상도</h2>
<h3>경상북도</h3>
대구, 안동, 영주
<h3>경상남도</h3>
부산, 경주, 김해, 울진
</body>
</html>
<결과>
대한민국
경상도
경상북도
대구, 안동, 영주
경상남도
부산, 경주, 김해, 울진
********************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Choa</title>
<!-- 타이틀은 웹브라우저 탭의 제목 -->
</head>
<body>
<!-- 주석입니다
여러줄도 가능합니다
<h1> 태그를 넣어도 보이지 않는다<h1>
주석은 보이지 않는다.
-->
<h1>대한민국</h1>
<h2>경상도</h2>
<h3>경상북도</h3>
대구, 안동, 영주
<h3>경상남도</h3>
부산, 경주, 김해, 울진
<h4>울진군</h4>
<h5>부평리</h5>
</body>
</html>
저장하고 새로고침
대한민국
경상도
경상북도
대구, 안동, 영주
경상남도
부산, 경주, 김해, 울진
울진군
부평리
결과
IDOL 소개페이지
AOA
초아
설현
민아
EXID
하니 솔지
<br>은 밑 줄로 내려준다 , 줄바꿈!
개발창에서 엔터나 스페이스바 모두 웹브라우저상에서는 아무리 많이 해도 한번만 적용
<br>이나 띄어쓰는 코드를 써야한다.
************************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Choa</title>
<!-- 타이틀은 웹브라우저 탭의 제목 -->
</head>
<body>
<!-- 주석입니다
여러줄도 가능합니다
<h1> 태그를 넣어도 보이지 않는다<h1>
주석은 보이지 않는다.
-->
<!-- block tag -->
<h1>IDOL 소개페이지</h1><h2>AOA</h2>
초
<!-- inline tag:이미지,텍스트 -->
아<br>
설현<br>
민아<br>
<h2>EXID</h2>
하니
솔지
</body>
</html>
*****************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Choa</title>
<!-- 타이틀은 웹브라우저 탭의 제목 -->
</head>
<body>
<!-- 주석입니다
여러줄도 가능합니다
<h1> 태그를 넣어도 보이지 않는다<h1>
주석은 보이지 않는다.
-->
<!-- block tag -->
<h1>IDOL 소개페이지</h1><h2>AOA</h2>
초
<!-- inline tag:이미지,텍스트 -->
아<br>
설현<br>
민아<br>
<h2>EXID</h2>
<p>하니</p>
솔지<br>
정화<br>
</body>
</html>
결과창
IDOL 소개페이지
AOA
초 아
설현
민아
EXID
하니
정화
<p>
p태그 : paragraph
***********************************************************
연습해보기
자기소개홈페이지
이름:
나이:
전화번호:
주소:
좋아하는것
취미:
특기:
생일:
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>테시리홈피</title>
</head>
<body>
<font color=blue><h2>테시리 자기소개</h2></font>
<p></p>
이름 : 김태한<br>
나이 : 127세<br>
전화번호: 010-0101-0101<br>
주소:언주로 332길<br>
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
특기:잠<br>
생일:15월56일<br>
</body>
</html>
결과
테시리 자기소개
이름 : 김태한
나이 : 127세
전화번호: 010-0101-0101
주소:언주로 332길
좋아하는 것
취미:독서
특기:잠
생일:15월56일
************************************************************
하이퍼링크
a태그(앵커태그)
href
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="F:\workspace2\jsp_0812\WebContent">이름 : 아이유</a><br>
키 :161<br>
체중:44kg<br>
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="F:\workspace2\jsp_0812\WebContent">이름 : 아이유<br>
키 :161<br>
체중:44kg<br></a>
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
a태그의 범위가 늘어났다. a태그(앵커태그)
절대경로로 찾아가는 방식
"F:\workspace2\jsp_0812\WebContent"
절대경로방식은 상대방에게 될 수도 안 될 수도 상대컴퓨터에 해당 폴더,파일이 없으면 실행 안된다. 링크가 걸리지 않는다.
그래서 링크를 걸 페이지를 기준으로해서 상대경로를 이용한다.
동등한 위치를 찾는 "./ "
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="./iu.html">이름 : 아이유<br>
키 :161<br>
체중:44kg<br></a>
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
현재위치
./
웹콘텐트 우클릭 새 폴더 만든다 sub폴더
sub폴더로 아이유 파일을 옮긴뒤 저장후 실행해본다
해당페이지를 찾을 수 없습니다.
상대경로사용
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="../test1.html">이름 : 아이유<br>
키 :161<br>
체중:44kg<br></a>
<!-- test.html로 들어가는 경로 상대경로이용 -->
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
서로 주고받기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>테시리홈피</title>
</head>
<body>
<font color=blue><h2>테시리 자기소개</h2></font>
<p></p>
<a href="./sub/iu.html">이름 : 김태한<br></a>
나이 : 127세<br>
전화번호: 010-0101-0101<br>
주소:언주로 332길<br>
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
특기:잠<br>
생일:15월56일<br>
</body>
</html>
테시리 자기소개
이름 : 김태한
나이 : 127세
전화번호: 010-0101-0101
주소:언주로 332길
좋아하는 것
취미:독서
특기:잠
생일:15월56일
IU 소개
좋아하는 것
취미:독서
하이퍼링크로 들어가면 주고받는다
./ : 현재 있는 곳 현재위치
../ : 한계단 올라가는 것 : ../../../
이클립스 상에서 최상 폴더는 web content
위에거 수정
로엔, 아이유
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>로엔</title>
</head>
<body>
<font color=blue><h2>로엔엔터</h2></font>
<p></p>
<a href="./sub/iu.html">아이유<br></a>
써니힐<br>
지아<br>
<p></p>
</body>
</html>
***
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="../test1.html">소속:로엔엔터<br>
이름:아이유<br>
키 :161<br>
체중:44kg<br></a>
<!-- test.html로 들어가는 경로 상대경로이용 -->
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
***********
외부의 주소도 링크가능
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="https://twitter.com/lily199iu">소속:로엔엔터<br></a>
이름:아이유<br>
키 :161<br>
체중:44kg<br>
<!-- test.html로 들어가는 경로 상대경로이용 -->
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
**********************************************************
아이유를 다시 sub > iu 폴더 안에 넣고 조금 개선
아이유
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>아이유</title>
</head>
<body>
<font color=blue><h2>IU 소개</h2></font>
<p></p>
<a href="../../Test1.html"> 소속:로엔엔터<br></a>
<a href="https://twitter.com/lily199iu">이름:아이유<br></a>
키 :161<br>
체중:44kg<br>
<!-- test.html로 들어가는 경로 상대경로이용 -->
<p></p>
좋아하는 것<br>
<p></p>
취미:독서<br>
</body>
</html>
로앤
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>로엔</title>
</head>
<body>
<font color=blue><h2>로엔엔터</h2></font>
<p></p>
<a href="./sub/iu/iu.html">아이유<br></a>
써니힐<br>
지아<br>
<p></p>
</body>
</html>
**************************************
태그정리
<h?>태그</h?> : header
<br> : 줄바꿈
<hr> : 수평선 태그
<p> </p> : 문단태그
<a href="경로명"> </a> : 앵커태그
<img sec="이미지경로명> : 이미지 태그
*******
만든페이지 웹에 올리기
네이버 > 닷홈
http://www.dothome.co.kr/web/free/index.php
무료호스팅
공간만설치
신청하기
로그인
신청하기
thkim.dothome.co.kr
filezilla 오픈
파일질라 호스트에 닷컴 주소 붙여넣기
사용자명, 비밀번호 입력
빠른연결
***********************
'프로그래밍, 통계학 > HTML' 카테고리의 다른 글
| [26일차]2015.08.13.목, HTML 태그 (0) | 2015.08.13 |
|---|
테시리