//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

+ Recent posts

티스토리툴바