//Google AdSense

HTML 작성 전 기본 설정 변경

- eclipse 편집기

- file > switch workspace 새 workspace

 

(다시보기)개발환경 세팅 및 workspace 설정☞

 

- 서버 추가 

 

 >1

 

 

 

 

or

 

>2

window > preferences >server > runtime environments > add

 

 

 

- 설정 변경

window > preferences > en 검색

workspace , css files, html file, jsp files의 EUC-KR을 UTF-8

 

 

- jsp 검색 > jsp files > editor > templates> New jsp file (html) >edit

 

내용을 수정해준다.


 

기본 설정이 모두 변경되었다.


* 새로고침만으로 페이지 갱신하기 (without run)

servers overview에서 server options의 serve modules without publishing을 체크해준다.

 


html vs. jsp

 

jsp에 하이라이트한 구문이 없다면 html밖에 안된다.


html debuging

 

debuging은 브라우저의 개발자 모드를 이용하는 것이 편리하다.

 

 


html 태그

 ※ html 필수 기본
  - 들여쓰기
  - 열고 닫기 
  - 주석  <!-- 타이핑하면 <!-- 주석 --> 자동완성!
  - 자식태그는 부모태그의 영향을 받는다.

 

↖서술한 태그와 출력된 모습↗ 

 

 

 


HTML 태그 종류

- 텍스트를 표현하는 태그

 

 

- 표를 구성하는 태그

 

 

표의 형태가 나타난 모습

 

 

- 속성 attribute

 

 

 

 

 

※ 요소, 속성, 객체?

요소 : 선택된 대상의 자식 전체 (태그 + 텍스트 포함) 
속성 : 선택된 태그의 세부 옵션 (데이터) 
객체 : 대상

 

 - table의 속성 > style~

 - thead의 속성 > align~

 - th의 속성 > width~

 

 


표의 여백 제거하기


CSS

 


실습해보기

 

 

1. 표 내용을 서술한다.

 


 

2. style type을 css로 적용하고 class마다 조건에 맞는 속성을 서술한다.

 

3. 조건별로 class를 지정한다.

 

 


조건에 맞게 완성된 표

 

4. 다른 방법

>> 두가지 class를 한 번에 적용할 수 있음

'UI/UX엔지니어링 > HTML' 카테고리의 다른 글

웹서버 세팅하기  (0) 2020.02.20

웹서비스

프로그램에서의 클라이언트 > 브라우저 (IE, Chrome, Safari ...) 

● 프로토콜 (통신규약) 
복수의 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약

 

 - 프로토콜 종류

  1) HTTP: Hyper Text Transfer Protocol

  2) HTTPS: Hyper Text Transfer Protocol Secure

   웹 서버와 웹 브라우저가 HTTP 규약을 따름.( ie, 사파리, 크롬 등)

  3) FTP: File Transfer Protocol

  4) Telnet: Terminal Network

  5) POP3: Post Office Protocol Version 3

  등등

 

 

 

http, https를 통해 아이피에 할당된 하드웨어를 호출, 웹 프로그램(web server)에 접근 

프로토콜//아이피:포트 

 

●http://localhost:8080/index.jsp 


- localhost = 127.0.0.1 
- :8080 > 포트=길 
  
 포트가 적혀있지 않은 경우

    http 기본 80번 포트 http://www.naver.com:80 
    https 기본 443번 포트 (보안화) https://www.naver.com:443 
  

- 포트 범위 : 0~65535

- 예약 포트 범위 : 0~1023 까지 (이 포트로는 설정하면 안된다.)

 

●Web Server -apache 
html 문서만 반응

 Web Container -tomcat (→WAS : web application server★)
웹 서버에서 읽지 못한 내용을 html로 변환하여 웹서버로 전달

 

(다시보기)개발환경 세팅, 웹서버 실행하기☞


html5는 <!DOCTYPE html> 뒤 내용 생략 가능

 

 

● html 기본 문법과 속성을 알기

● class : 그룹화

  id : 유일화

 

● 자바스크립트(JavaScript)

  동적으로 이벤트를 발생시키는 언어 (화면)


HTML(Hyper Text Markup Language)

 

HTML은 마크업 언어로서 웹 페이지를 표현하는 언어이다.

 

HTML 태그의 이해

① HTML의 모든 태그는 시작과 끝 태그로 이루어진다.
② HTML 태그에는 속성을 지정할 수 있다.
③ 웹 브라우저에 보여지는 내용들을 표현한다.

 

HTML의 레이아웃 관련 태그

실무에서 div, header, navigation, footer를 많이 사용한다.

 


CSS(Cascading Style Sheets)

웹 페이지 전체의 일관성을 유지할 수 있도록 스타일을 미리 저장해 둔 시트

 

CSS 문법

- 선택자(Selector)는 스타일을 적용하기 위한 대상

  (HTML 요소를 사용할 수도 있고 ID나 Class 형태로 정의할 수도 있다)
- 스타일은 다양한 형태로 지정할 수 있으며 ‘속성 : 값’ 형태로 지정

 

CSS 선택자

- 공용 선택자(Universal Selector. 일반 선택자)
HTML 요소를 선택자로 하여 스타일을 적용할 수 있으며, 이 경우 해당 HTML 요소
모두에 스타일이 적용된다.

 

- 태그 선택자(Type Selector)
지정한 태그에 대하여 스타일이 적용된다.

 

- 클래스 선택자(Class Selector) - 그룹화
클래스 선택자를 활용하면 특정 HTML 요소들을 그룹화하여 스타일을 지정하는 것이
가능하다.

 

-아이디 선택자(ID Selector) -유일화
특정 ID를 부여하여 ID에 스타일을 지정할 수 있다.

 


메모장으로 간단한 웹 페이지를 작성하고 실행하기

 

 

절대경로에서 호출한 상황

 

 

 

tomcat을 통해 호출

 

 

tomcat의 \webapps\ROOT 경로에 test.html 파일을 넣는다.

 

tomcat이 실행되지 않는다.

 

톰캣 구동시에 필요한 java path가 설정되어있지 않기 때문이다.

 


* java path 설정

 

내 컴퓨터>속성>고급시스템속성>환경변수>시스템변수

자바 PATH 시스템 변수를 추가한다.

 

내 컴퓨터>속성>고급시스템속성>환경변수>시스템변수>path>편집

 

변수로 추가했던 JAVA_HOME의 bin 폴더를 변수값으로 추가한다.

;%JAVA_HOME%\bin;

 


 

다시 tomcat을 startup한다.

tomcat이 실행되는 모습

 

페이지가 호출되는 모습

 

'UI/UX엔지니어링 > HTML' 카테고리의 다른 글

eclipse HTML 작업환경 설정 & HTML 태그 종류  (0) 2020.02.20

가입후리스트에서 수정화면까지

수정 버튼을 어디에 만들지 결정

 >user_list.jsp 에는 수정버튼의 위치만 

 >user_list_insert.jsp에 작동하는 수정버튼을 생성할 계획이다.

 

수정버튼을 클릭하면 user_update_form.jsp 화면으로 이동하도록 설정

 

구성이 비슷한 user_insert_form.jsp를 참고하여 만들 수 있다.

 

* (아직 배우지 않음) 화면 이동 사이에 데이터를 주고 받을 수 없는 상황

* 수정화면에 값을 보여주기

* ID 수정을 불가능하게 설정

 

 


 

user_list.jsp에 수정, 수정버튼에 대한 내용을 추가한다.

 

 

user_list_insert.jsp에 수정, 수정버튼에 대한 내용을 추가하고 2번 회원의 수정버튼만 작동하도록 경로를 설정한다.

run

 

버튼이 잘 보이는 것을 확인할 수 있다.

1번 회원의 버튼은 작동하지 않고 2번 회원의 버튼은 작동한다.

user_update_form.jsp 파일이 없기 때문에 404 error가 뜨게 된다.

 

* 404 error :파일이 없어가 경로설정이 잘못되었을 경우

 

 

user_update_form.jsp 파일을 생성한다. 

 

 

run

 

 

경로가 제대로 설정되었지만 파일 내용이 없어 빈 화면이 출력된다.

 

 

 

user_update_form.jsp의 내용을 수정, 작성한다.

 

 

run

 

내용이 잘 수정된 모습

 

 

* 수정화면에 값을 보여주기

 > value 값을 지정해준다.

run

 

수정화면에서 값이 보이게 되었다.

 

 

* ID 수정을 불가능하게 설정하기

 > 속성을 읽기전용(readonly)으로 추가


수정화면에서 수정처리후리스트까지

 - user_update_form.jsp 수정화면에서 수정을 완료하면

   user_list_update.jsp 수정처리 후 리스트가 출력되도록 설정

 

user_update_form.jsp의 action 경로를 user_list_update.jsp로 변경한다.

 

user_list_update.jsp 파일이 없기 때문에 run 하면 404error가 발생할 것이다.

 

user_list_update.jsp 파일을 생성한 뒤 내용을 수정해준다.

 

 

 

run

 

 

화면이 제대로 출력되는 모습

 


삭제버튼 클릭시 삭제후 리스트 

user_list.jsp  > 삭제버튼 텍스트만

user_list_insert.jsp > 삭제버튼 (경로이동)

user_list_update.jsp > 삭제버튼 (경로이동)

 

user_list_delete.jsp > 삭제처리 후 리스트 최종 완성

 

 

 

user_list_insert.jsp와 user_list_update.jsp의 내용을 추가하여 삭제버튼을 만들고 경로를 user_list_delete.jsp로 설정한다.

 

user_list_delete.jsp를 생성하고 내용을 작성한다.

(user_list.jsp의 내용을 참고한다.)

 

run

 

 

회원 등록 후 삭제하는 모습

 

회원등록, 수정 후 삭제하는 모습

 

 



상품등록, 리스트, 관리 화면 만들기

 

1. 상품 작업을 위한 폴더 및 파일명 정하기.

 

2. eclipse 를 이용하여 실습한 내용과 같이 상품관리 페이지를 만든다.

 

>이미지를 폼으로 제출하고 수정가능하게 만드는 방법을 알고싶어졌다.

 

회원 한명 리스트 만들기

 

html을 구글링하여 html 참고 사이트를 찾는다.

 

https://www.w3schools.com/

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself » CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: center

 

www.w3schools.com

 

 

html tables 메뉴에서 참고할 코드를 탐색한다.

 

TEST 폴더 생성 table.jsp 파일 생성하여 참고사이트의 html 코드 복사, table.jsp 에 붙여넣기한다.

 

표의 내용을 수정한다.

 

아래 불필요한 내용 삭제

 

run

 

 

내용을 추가한다.

 

 

run 

 

 

index.jsp와 table.jsp를 참고해서 user_list.jsp를 완성할 수 있다.

 

 index.jsp의 전체 내용 복사해서 user_list.jsp의 내용을 모두 지우고 붙여넣기

 - index와 내용이 같아 화면의 변화는 없지만 경로의 변화가 있다.

table.jsp 내용을 일부 (<head><style>~<body/>) 복사해서 user_list.jsp의 내용 부분에 붙여넣기

 

*css 태그 별도

 

table.jsp의

 

를 user_list.jsp의 <head><head/>사이에 붙여넣기

 

 

table.jsp의 <table><table/>의 내용을 user_list.jsp의 내용 부분에 붙여넣기

 

run

 

 

적용된 모습

 

 

* 스타일을 주석처리 해보기

 

표의 모양이 사라졌다

style태그가 table, th, td 태그에 영향을 미치는 것을 알 수 있다.

 


회원가입 화면에서 가입 후 리스트 경로 까지

 - user_insert_form.jsp 가입버튼을 클릭하면 두명의 리스트 화면으로 이동하게 만들기

 

 user_list_insert.jsp 생성

 

user_insert_form.jsp의 form action 경로 확인

 index.jsp를 run 하여 가입버튼 클릭 후 경로 확인

작업한 내용이 없으므로 빈 화면이 출력 된다.

 

 user_list.jsp의 내용을 전체 복사하여 user_list_insert.jsp 붙여넣고 user_list_insert.jsp 에 한명을 추가하고 리스트 이름을 바꾸어준다.

run

 

잘 작동되는 모습

템플릿 불러오기

 

 

이클립스에서 프로젝트 LayoutTemplate 생성

 

LayoutTemplate 폴더 중 WebContent 폴더 복사

 

이클립스 프로젝트 익스플로러에서 LayoutTemplate 프로젝트 클릭 후 ctrl+V

덮어쓰기 선택

 

템플릿들이 프로젝트로 복사되었다.

 

 

복사된 템플릿중 14-2의 index.html을 run 한 모습

 

 

 

 


레이아웃 실습

 

실습을 위해 Layout35 프로젝트를 생성하고 WebContent에 index.jsp를 생성한다.

참고할 레이아웃 템플릿의 index.html 내용 일부 (title 이하)를 index.jsp의 title 이하에 붙여넣는다.

 

index.html의 내용을 run 해본 결과물이다.

텍스트만 출력되는 것으로 보아 css가 레이아웃의 색상, 사이즈 등을 결정한다는 사실을 알 수 있다.

 

그렇다면 왜 css가 실행되지 않을까?

 

1. main.css 파일이 없다.

2. 파일이 있어도 경로를 잡지 못하면 실행되지 않는다.

 

 

css 폴더를 만들고 main.css 파일을 css 폴더에 main.css 파일을 붙여넣는다.

 

main.css가 존재하는 경로가 다르므로 경로를 설정해주어야 한다.

 

 

 

request.get ctrl+space를 한 모습

getContextPath()를 선택

 

더보기

메모

/>폴더명복사>/>파일명복사 

경로를 굳이 타이핑할 필요 없다.

타이핑을 믿지 말고 경로를 복사, 붙여넣기 하자.

 

 

 

ctrl+shift+/   주석

ctrl+shift+\  주석해제

 

 

= /Layout35 (프로젝트 명을 구하는 함수)

 

경로를 수정하고 Run 한다.

 

css파일이 적용된 모습.

 


 

 

회원 관리를 위한 화면 구성을 적었다.

 

구상한 화면 구성대로 WebContent 하위에 user 폴더를 생성하고

user 폴더 하위에 user_insert_form.jsp, user_list.jsp 등을 생성한다.

 

 

 

index.jsp 파일의 메뉴부분을 한글로 수정한다.

한글화가 완료된 메뉴

 


상단메뉴 4개 추가

 

상단 메뉴 4개를 추가하고 경로를 연결한다.

 

 

상단 메뉴가 추가된 모습

 

user_insert_form.jsp와 user_list.jsp은 아무것도 작성하지 않았기 때문에 상단 메뉴에 연결된 페이지는 빈 화면이 출력된다.

 


회원가입화면 연결

 

 

user/user_insert_form.jsp를 열어 회원 가입 화면을 작성한다.

 

레이아웃을 유지하기 위해 index.jsp의 내용을 모두 복사해 user_insert_form.jsp에 붙여넣고

 

오른쪽 영역( Download this CSS Layout 부분)에 회원가입 화면을 위한 폼을 넣는다.

 

 

회원가입화면 폼이 완성된 모습.

 

 

 

 

index

 

회원가입 선택시 회원 가입 화면

 

 

 

멋이 없긴 합니다만 굴러가네요!

 

웹서버를 실행시키고 html, css로 화면을 구성

 

 

 


개발환경 세팅 

 

 

개발환경 다운로드 사이트

1) 자바프로그램 개발 을 위해서 필수 다운로드 및 설치

http://www.oracle.com

 

Oracle | Integrated Cloud Applications and Platform Services

About Oracle Unlock endless possibilities A culture of innovation has propelled Oracle since its inception. Today, thanks to exceptional people, we lead the market in autonomous, cloud, and applications technologies.

www.oracle.com

JDK ( Java SE Development Kit ) : 개발환경

JRE ( Server Java Runtime Environment ) : 실행환경

2)웹서버(Web Server) ,웹어플리케이션서버 (Web Application Server)

apache-tomcat

http://tomcat.apache.org/

 

Apache Tomcat® - Welcome!

The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. The Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket specifications are

tomcat.apache.org

3)편집 도구 : eclipse

http://eclipse.org/

 

The Platform for Open Innovation and Collaboration | The Eclipse Foundation

The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source projects, including runtimes, tools and frameworks.

www.eclipse.org

 

( eclipse&apache-tomcat > 특정 폴더에 위치시키는 개념)

 

 

이클립스 편집도구를 통해 JDK, JRE와 웹서버를 연결하여 프로젝트를 생성한다.

 


워크스페이스 설정

 

이클립스를 실행하기 전에 워크스페이스를 생성한다.

 

D드라이브 이름폴더 하위에 htmlwork35 폴더를 생성했다.

 

이클립스를 실행하면 워크스페이스를 설정하라는 창이 뜬다.

 

워크스페이스로 생성한 htmlwork35의 절대경로를 입력한다.

 

 

<절대경로와 상대경로>


1.절대경로

원하는 경로를 Root 디렉터리부터 모두 적은 것
어떠한 웹페이지나 파일이 가지고 있는 고유한 경로


ex)
http://www.naver.com
C:\users\document\untitled.jpg


2. 상대경로

 현재 위치한 곳을 기준으로 한 그곳의 위치

  ex)
C:\users\document를 기준으로
C:\users\document\ex\untitled.jpg > \ex\untitled.jpg
C:\users\document > ./
C:\users > ../

 

 


새 프로젝트 생성

 

 

File> New> Dynamic Web Project로 새 프로젝트를 생성한다.

 

프로젝트 이름을 ex라고 적었다.

 

 

Target runtime은 웹서버를 의미한다.

new runtime을 선택해 웹 서버 타입을 Apache Tomcat v9.0로 선택한다.

 

tomcat installation directory 설정을 위해 browse를 클릭해 경로를 설정한다.

 

 

src는 JAVA 소스 코드의 위치이고

classes 는 compile, building 시 나오는 class 파일의 위치이다.

 

 

 

context root 와 project name이 같은 것을 확인할 수 있다.

 

WebComtent 하위에 html, css, Java Script, JQuery 등이 위치한다.

 

Finish를 눌러 프로젝트 생성을 마친다.

 

 

 

생성된 프로젝트 ex

 

이클립스에서 보여지는 프로젝트의 경로와 Windows에서 보여지는 폴더의 경로가 유사하면서도 차이점을 보인다.

 


웹 서버 서비스 해보기

 

프로젝트 탐색기에서 WebContent 폴더를 선택하고 JSP File을 생성한다.

 

 

생성된 JSP 파일 내용 <body>안에 통성명을 해보았다.

 

내용을 작성 후 run을 한다. run단축키는 ctrl+F11이다

 

Run을 하게되면 이런 창이 뜨는데 프로젝트 생성시에 설정했던 target runtime과 알맞은 apache-tomcat의 버전과 동일한지 확인한 뒤  Finish를 눌러준다.

 

내용이 잘 출력된 모습!

 

주고 받고만 잘 하면 SW 개발 끝

소프트웨어

 

① PC 환경 웹 (Web)

응용

Application

어플리케이션

어플

프로그램 

소프트웨어

시스템

개발환경
② 모바일 환경 웹
③ 반응형 웹
④ native 어플(앱)

⑤ hybrid 웹앱

web + native 어플(앱) 

*어플리케이션 OS에서 동작하는 응용 소프트웨어

 

① PC 환경에서의 웹

 

② 모바일 환경에서의 웹

 

③ 반응형 웹

 One Source Multiplatform

 단말의 종류와 화면 크기에 실시간 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹

 

④ native 어플

 <수준에 따른 구분>

  1. 실행, 종료 후 데이터가 남지 않는 수준

  2. 폰 내부에 데이터가 저장되는 수준

  3. 외부 서버에 데이터가 저장되는 수준

   →웹 sw 개발환경이 필요

 

⑤ hybrid 웹앱

 앱이 웹을 감싼 형태

 결과적 형태는 app

 

 


소프트웨어 개발환경

 

 

소프트웨어 개발환경의 구성을 그림으로 나타낸 것

 

OS DBMS WAS S.L C.L
Windows Oracle apache-tomcat Java 공통
Windows My-sql apache-tomcat Java 공통
Linux Oracle apache-tomcat Java 공통

.

.

.

소프트웨어 개발환경의 구성을 표로 정리해본 것

 

 

소프트웨어 개발환경을 서술하면

 

" Windows OS에서 Web 서버 apache-tomcat, 처리언어 Java, DBMS Oracle, client측 언어 html, css, java script, Jquery 등으로 구성된 응용프로그램 개발환경이다. "

 

 


알려진 확장자와 그 외의 확장자

알려진 확장자 그 외의 확장자

html

htm

php

php

asp

aspx

 

jsp

 

.naver

.nhn

.do

 

 

>만들어진 확장자

관심 가져보기

'SW개발' 카테고리의 다른 글

개발자의 길  (0) 2020.02.17

1. 포트폴리오

 

http://ksmart.or.kr/?c=16/19

 

한국스마트정보교육원 - 졸업작품

국비무료교육,전주 프로그래머,전주 개발자,모바일,웹,어플,자바,오라클

ksmart.or.kr

졸업생 선배들의 졸업 포트폴리오를 볼 수 있다.

나도 과정을 밟으면 멋진 작업물을 낼 수 있다고 생각하니 기대가 된다.

 

 

2. NCS (국가직무능력표준)

 

https://ncs.go.kr/index.do

 

NCS 국가직무능력표준, NCS 블라인드채용

NCS 메인에서 국가직무능력표준(National Competency Standards) 및 블라인드 채용에 대한 다양한 정보와 유용한 컨텐츠를 만나 보세요

www.ncs.go.kr

 

국가직무능력표준(NCS, National Competency Standards)은 산업현장에서 직무를 수행하기 위해 요구되는
지식·기술·태도 등의 내용을 국가가 체계화한 것이다. 학생 및 취업준비생들은 NCS를 활용하여 교육훈련담당자가 설계한 과정을 이수하게 되는 것이다. 기업인사담당자들은 NCS를 활용하여 인사기준을 마련한다. 또 직장인, 자기개발이 목적인 사람은 NCS를 활용하여 경력을 개발할 수도 있다. 그리고 직무능력 표준화 협약을 맺은 국가간이라면 해외 교류가 가능하다. 

 

 

 

3. KOSA (소프트웨어기술자 경력관리시스템)

 

https://career.sw.or.kr/

 

소프트웨어기술자 경력관리시스템

SW기술자신고 한번으로 두고두고 편리한 경력관리 SW기술자 신고제도는 SW기술자의 경력 입증의 어려움을 해소하고, 지속적인 경력관리를 통해 공신력있는 경력증빙 및 권익보호를 위한 신고제도 입니다. 경력신고 문의전화 - 상담시간 : 평일 9시 ~ 18시, TEL 02-2188-6980

career.sw.or.kr

매 1년마다 경력을 증명하여 인증받을 수 있다.

SW 개발업무 증명서를 기재하면 높은 퍼센트의 경력을 인정받을 수 있다.

 

 

4. 나라장터 조달청

 

http://www.g2b.go.kr/index.jsp

 

나라장터: 국가종합전자조달

 

www.g2b.go.kr

 

 

5. 개인 프로젝트 주제

권한 3개 이상 (ex: 구매자,판매자,관리자.. )의 내가 만들고싶은 모든 소프트웨어.

 

 

 

SW개발환경 + 업무흐름 ▶ 경영인의 마음을 가진 경력자 같은 신입 개발자

 

'SW개발' 카테고리의 다른 글

소프트웨어 개발 환경의 이해  (0) 2020.02.17

+ Recent posts