ncs 학습모듈 -> 20.정보통신 -> 01. 정보기술 -> 02. 정보 기술개발 -.ui/ux -> ui구현
프로토개발
front-end ; 화면:사용자 측면
back-end ; 자바:개발자
1. Server and Client
1-1. Client : 상황에 따라 지칭하는 것이 다름
프로그램, 브라우저, 고객
오늘 수업의 client ; 브라우저 : IE, 크롬, 파이어폭스, 사파리 등등
1-2. 프로토콜을 이용하여 해당IP를 호출, IP에 할당 된 컴퓨터(하드웨어)에 접근,
웹서버를 호출(HTML확장자만 읽고쓰기가 가능한데 다른 확장자(jsp 등등)의 접근시 Web컨테이너(WAS)를 문서 해 석하기 위해 부름 WAS는 문서 해석후 HTML로 웹서버에 뿌려줌[렌더링])
해석된 문서를 가지고 웹서버가 브라우저에 다시 응답하여 화면을 뿌려줌
프로토콜(통신규약) : 여러가지 많음, 주로 http를 사용, 기본 포트 번호는 생략 가능
1. http:// 보안X 기본포트 80
2. https:// 보안O 기본포트 443
포트란? 외부와 통신하기 위해 지정 된 길,통로. 한 컴퓨터에 같은 포트가 지정 될 수 없다.(지정시 충돌-교통사고)
포트범위는 0~65535까지 설정 가능함 but예약 포트 범위는 0~1023까지이기 때문에 이 포트로는 설정 충돌 가능성이 있음
ex)
http://www.naver.com => 아이피 주소로 되어있으나 도메인을 바꾸어 사용
사용자가 위 도메인을 브라우저 주소창에 검색시 ip가 웹서버로 호출 하여 위 가정을 거쳐 우리가 알고 있는 네이버 화면을 띄워준다.
프로토콜://IP:포트
2. 웹
website ; webpage의 묶음
webpage ; 각각의 문서
homepage ; 처음에 시작하는 webpage
3. HTML
3-1. 기본적인 구조(이거는 외우고 있기)
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
화면에 구현에 사용되는 태그 기록
</body>
</html>
1. <!DOCTYPE html> 웹페이지가 html5 문서임을 의미.
doctype은 작성할 html이 어떤 문서인지를 선언. <html> 태그 앞에 가장 먼저 선언되어야함.
버전에 따라 제공되는 태그가 있고 안되는 태그가 있다.
2. <html></html> html 문서의 시작과 끝을 의미
3. <head></head> 머리 부분에 해당. 스타일과 스트립트를 선언하는 부분
4. <title></title> 브라우저의 제목 표시
5. <body></body> 사용자에게 보여주는 실제 내용이 구현되는 부분
3-2. html 태그의 이해
1. html의 모든 태그는 시작과 끝 태그로 이루어진다.
2. html의 태그에는 속성을 지정할 수 있다.
3. 웹 브라우저에 보여지는 내용들을 표현한다.
3-3. html에서 많이 사용되는 태그 : Div, head, nav, footer
4. CSS (Cascading Style Sheets)
웹 페이지 전체의 일관성을 유지할 수 있도록 스타일을 미리 지정해 둔 시트를 의미
전체 페이지의 내용을 한꺼번에 처리할 수 있어 간편하고 페이지의 일관성을 유지 할 수 있다.
4-1. CSS 문법 : CSS는 html 문서 내에 작성되거나 외부 파일 형태로 작성 가능하다.
P{coler : red; text-align: center;}선택자{속성 : 값; 속성 : 값;} ";"은 마침, 종료의 의미
선택자는 스타일을 적용하는 대상. html요소, id, class 형태로 정의 할 수 있다.
스타일은 다양한 형태로 지정할 수 있으며 '속성:값' 형태로 지정한다.
요소 : 선택 된 대상의 자식 전체 [태그, 텍스트 포함]
속성 : 선택 된 태그의 세부 옵션 [데이터]
객체 : 대상
4-2. CSS 선택자
4-2-1. 공용 선택자 (일반선택자) : html 요소를 선택자로 하여 스타일을 적용 할 수 있으며, 이 경우 해당 html 요소 모두에 스타일이 적용된다.
*{속성: 값 ; 속성 : 값 ; 속성 : 값;}4-2-2. 태그 선택자 : 지정한 태그에 대하여 스타일이 적용된다.
태그{속성 : 값 ; 속성 : 값; 속성 : 값;}4-2-3. 클래스 선택자 : 특정 html 요소들을 그룹화하여 스타일을 지정함
.클래스명{속성 : 값 ; 속성 : 값 ; 속성 : 값;}4-2-4. 아이디 선택자 : 특정 ID를 부여하여 ID에 스타일 지정
#id명{속성 : 값 ; 속성 : 값 ; 속성 : 값;}*Java와 Java script 구분하기*
Java -> back-end를 구성
Java script : 움직임을 주는 언어, 브라우저에서 사용하는 언어-> front-end를 구성
5. 웹페이지 편집도구
5-1. 메모장
어떤 종류의 포맷도 지원하지 않는 에디터. 웹 사이트에서 사용하였던 모든 포멧을 제거 해주어 사용이 편리함
5-2. eclipse : 앞으로 진행 할 프로그램
workspce 초기 설정이 중요함
5-2-1. UTF-8 설정하기
5-2-2. eclipse 구성 폴더를 봐보자요
ⓐ bin ; 부팅과 관련 된 파일들이 들어있음
ⓑ cof ; 웹서버의 정보. 옵션 사항들이 들어있음 (xml)
ⓒ lib ; 라이브러리. 프로그램 자료파일이 들어있음
ⓓ logs ; txt 파일로 저장 됨
ⓔ webapps ; 배포 하는 역할. 지정 서버가 업다면 root 폴더에 넣으면 배포 됨
6.태그 (tag)
6-1. 태그의 종류
1. 텍스트
<h1>h1:제목표기</h1>
<span>span : 텍스트의 범위 지정</span>
<label>label : 태그의 명칭 지정할때</label>
<strong>strong : 굵게</strong>
<small> small : 기본 폰트 사이즈 보다 작게</small>
<p>p : 엔터</p>
2. 레이아웃
3. 테이블 : 표를 구성하는 태그, 정렬 된 데이터를 표현할 때 쓰는 태그
구성
table > tr > td set
tr : 행 , td : 열, table : tr이 묶음 처리
tbody : 표의 본문을 표기 할 때 쓰는 태그
thead : 표의 제목을 표기 할 때 쓰는 태그
th : thead의 자식 요소의 태그로 표의 제목을 표기 할 때 쓰는 태그
4. 정보전송 <- 앞으로 배울 것. 이게 중요 ☆★
★앞으로 해야 할 것,
1] 블로그 [매일매일 배운 것 정리]
https://r-0o0-j.tistory.com/10
2] 영문타자연습 [min 250타] / 2020.02.20.
3] 용어 정리 & 숙지
request ;요청에 대한 정보
response ; 화면에 대한 정보가 담겨있는 객체
○ 오늘의 단축키
1. 주석처리하기 <!-- -->
2. Alt + ↑, ↓ 이동
3. Ctrl + Alt + ↑, ↓ 복사 붙여넣기 <- 따로 복사 안해도 되서 익숙해지면 짱 편할 듯
4] 프로젝트
'Backend > JAVA' 카테고리의 다른 글
| java 하나의 package 내, 하나의 class에서 method를 선언 및 호출 하기 (2) | 2020.02.25 |
|---|---|
| 6일차 디지털 컨버전스 융합 SW 개발자 YERIEL (0) | 2020.02.24 |
| 3일차 디지털 컨버전스 융합 SW 개발자 YERIEL (0) | 2020.02.19 |
| 35기 디지털 컨버전스 융합 SW 2일차 (0) | 2020.02.18 |
| 35기 디지털 컨버전스 융합 SW 1일차 (0) | 2020.02.17 |
댓글