저번주 금요일에 모기 정보를 Json을 통해 파싱하고 DB에 저장하는 것 까지 완료 했는데 오늘은 그 DB에 있는 데이터를 불러와서 .csv 파일로 만드는 것을 해봤다.
먼저 DB 접속과 파일연결을 해주는데 DB접속 실패확률이 더 높기에 이 것을 더 위에서 해준다고 하셨다.
그런 다음 불러올 데이터에 따라 sql 양식을 작성해주고 date가 있기에 simpledateformat으로 string으로 바꿔주고 bw 기능을 통해 바로 csv 파일에 넣어준다.
별 이상 없을 때 성공이 출력되고 catch에서 예외사항이 있을 경우 실패가 return 되게 해놓고 메인(C)에서 처리한다.
물론 return된 String은 V에서 출력해준다.
이제 드디어 자바는 끝이고 웹 기초로 넘어간다고 하셨다.
그러시더니 갑자기 인터넷 구조에 대한 설명을 하셨다.
전에도 말했 듯 컴퓨터가 통신하려면 ip주소가 필요한데 223.130.195.95 이거 도메인에 검색 해보라 하셔서 했더니 네이버가 나온다. 네이버 웹서버의 ip주소이다. 그런데 전화번호 처럼 저 숫자가 네이버인지 뭔지 숫자만 보고 알 방법이 없다.
cmd 창에서 ipconfig/all을 치면 DNS 서버 주소가 나오는데 이것이 전화번호부 정도 되는 것이라 하셨다.
www.naver.com = 223.130.195.95
www.daum.net = 112.24.43.11
브라우저에 www.naver.com을 검색하면 브라우저가 DNS서버에 이게 뭐냐고 물어보고 223.130.195.95 이거라고 알려준다. 그럼 브라우저는 그 웹 서버에 html을 요청하고 웹 서버는 이에 응답한다.
HTML은 웹사이트 디자인 언어로 SQL 처럼 문법만 외우면 되는 언어이다.
이것도 글자적히는 프로그램 아무거나 있으면 되는데 eclipse로 할 거다.
이제는 감당할 수 없을만큼 프로젝트가 많아졌기에 저장 파일을 변경해서 따로 관리를 해줘야겠다.
웹에서 static, 정적인 프로젝트로 간다.
다시 한번 짚어 가는 이 바닥 문화 프로젝트, 파일명은
숫자로 시작 X
Java 클래스 외의 것 대문자로 시작 X
body에 아무거나 쓰고 브라우저에 파일을 끌어다 놓으면 열린다.
<marquee> 안에 글을 쓰면 브라우저에서 그 단어가 오른쪽에서 왼쪽으로 움직인다.
타이틀안의 내용을 바꾸면 이렇게 된다.
그리고 html의 기본 세트는 돔 객체로 이루어져 있다.
주석 처리는 <!-- 주석 --> 이렇게 한다.
<html> </html> 로 시작해서 끝나는 돔 객체로 이루어져 있지만 맨 윗줄에 !DOCTYPE 이것만 다르다.
이 파일의 버전을 나타내는 것이란다. 안 적혀져 있으면 html5 버전 있으면 그 적혀있는 버전.
그리고 <head>는 위쪽(주소 검색 등)
<body>는 안쪽 이다.
그리고 우리가 썼던 Java는 컴파일러방식이고 컴파일 할 때 문법이 이상해서 기계어로 번역이 불가하면 에러가 발생한다.
HTML은 인터프리터방식으로
.html - 실행 - 실행하면 한줄씩 기계어로 바꿔서 실행되고 문제가 있어도 에러가 안 난다.
다음은 글자를 좀 보자 하셨다.
이곳에서 엔터키는 <br>이다.
그리고 <hr>은 라인 하나 긋고 줄 바꾸기다.
그리고 <p>는 두줄 바꾸기 라기 보다는 문단을 구분할 때 이용한다.
정렬 오른쪽, 가운데
그리고 폰트 변경
색깔 같은 경우 지금 처럼 orange, red 같은 왠만한 것들은 영어로 치면 다 나온다. 그런데 왠만하지 않은 색상들, 색깔이 섞여있는 것들은 RGB[16진수]로 설정이 가능하다. 그런데 이런거 외우고 다닐 수 없으니까 그냥 rgb 색상표라고 치면 나오는 거에서 원하는 색깔의 태그를 가져다가 쓰면된다.
그리고 빛과 물감의 성질은 다르다.
빛 : 다 섞으면 흰색 (여기서는 빛이라고 생각하면 된다.)
물감 : 다 섞으면 검정
검색창에 android color를 검색하면 The color system이 있다. 밑으로 쭉 내려가면 다채로운 색깔이 있다. 이런 사이트를 이용하는 것도 괜찮을 것이다.
그리고 우리가 폰트를 지정해서 html을 만들었을 때 사용자 컴퓨터에 그 폰트가 없다면 어떡할 것인가? 또한 최대 7까지 밖에 안 되는 size 등 html은 디자인적으로 한계가 크다. 그래서 이 HTML을 서포트할 CSS가 있다.
아무튼 그래서 저 font 태그는 안 쓴단다. 또한 동일한 이유로 안 쓰이는 태그들이 많이 있다.
<h1> ~ <h6>
제목용 태그, 굵게, 줄바꿈, 크기조절 가능(인데 딱히 상세하게 하진 않는다)
ol : 순서가 있는 리스트
ul : 순서가 없는 리스트
이렇게 여러번 띄어쓰기는 안 먹히기 때문에
뛰어쓰기를 여러번 넣고 싶으면 이렇게 넣어준다.
여기서도 Java에서 눈치 보며 문법 피해갔던 것 처럼 주의해야할게 몇 개 있다.
괄호를 넣고 싶다면 <(괄호열기)내용 >(닫기)
&를 글자로 쓰고 싶다면 &
"를 글자로 쓰고 싶다면 "
Multimedia
그림, 음악, 영상, pdf 아무거나 다 집어 넣으란다.
이렇게 경로를 통해 이미지 업로드도 가능하다.
경로는 절대경로와 상대경로 2가지로 나뉜다.
절대경로 : 정확한 상세 위치
상대경로 : 내 위치를 기준으로
지금은 내 pc에서 이 상세 위치를 통해 이미지가 html에서 잘 나오지만 다른 피시에서는 안 보일 것이다. 즉 실전사용은 불가능하다.
같은 파일에 사진을 갖다놔서 상대적인 위치이기에 저렇게만 적어도 잘 나온다.
이 public 파일안에 파일을 하나 더 만들어서 그곳에 저장한 사진 또한
이렇게만 해줘도 된다. 그런데 한단계 위 폴더에 있는 것을 불러올 때는
.. 을 이용한다.
아무튼 우리가 개인 PC에서 작업을 한 다음 서버로 옮길텐데 당연히 이 이미지는 같은 파일 내에 넣어주어야 하고 서버 pc로 옮길 건데 절대경로를 써 놓게 되면 당연히 안 먹힐 것이니 상대 경로를 써야한다는 것이다.
이미지 사이즈 조절은 어떻게 해야할까? - 안 해야된다.
이건 디자이너가 해주는 것 지금 웹사이트에 딱 맞도록 그림작업을 해줘야 함.
근데 우리가 사이즈 조절을 하게 되면 깨진다.
가로나 세로 중 하나만 건들면 원본비율 보존 단위를 안 붙히면 px단위다. 아무튼 건들면 깨지니까 그냥 안 해야 된다. 만약 해야된다면 css에서 하면 된다.
HTML 4.01이 아주 긴 세월동안 주력이였는데
flash, shockwave, active-x
(이런 다양한 프로그램으로 HTML을 서포트 했다.)
HTML 5 버전이 출시되고 add-on 프로그램 없이 html만으로 끝내자가 추구하는 것이었다.
초창기에 플래시 지원이 안 되서 난리난리였단다.
그렇게 다양한 기능들이 생겼는데 <audio>, <video> 등이 그것이다.
그리고 IE는 HTML 5가 지원이 안 된다.
(근데 나이 꽤나 있는 사람들은 다 이걸 쓰려고 하다 보니(심지어 프로그래밍을 맡기는 고객도) 개발자들이 참 골치가 아프단다.)
Link
웹 피이지 이동
중간에 네이버가즈앙을 누르면 href에 넣은 주소로 접속한다.
그런데 저 <a></a> 사이에 동영상이나 음악 같은 원래 클릭을 해서 행동이 일어나는 것들은 넣을 수 없고 눌러봤자 아무일도 없는 그림 같은 것들은 가능하다.
이렇게 말이다.
그런데 보통 수업은 html을 이렇게 까지만 알려주고 끝내서 문제란다.
이 바닥의 약속 중 하나가 주소 뒤에 아무것도 안 쓰면 index.html로 인식을 한다.
방금 내가 만든 html도 연결이 가능하다. 그런데 이 a 기능을 html 열기라고 생각하면 섭섭하다.
이렇게 그림파일도 열린다. 그냥 파일 열기 기능이라 생각해야 된다.
아무 파일이나 a 태그에 넣어보라 하셔서 .jar 파일 넣어봤더니 다운로드를 한다. 브라우저가 열줄 아는 거는 열어주고 열줄 모르는건 다운을 받게 한단다.
SPA(Single Page Application)
요즘 대세라는데 막상 찾으려면 없단다.
한 페이지에 다 써놨는데 위에 메뉴 탭 누르면 그쪽으로 사라락 가지는 페이지들이 SPA다.
스크롤이 생길 정도로 뭔가를 써보란다. 하고 싶은 것은 a를 누르면 그 쪽으로 이동하는 기능이다.
이게 가능하긴 한데 스크롤 애니메이션 없이 저 위치로 순간이동 한다.
그리고 사라질 기능이니 쓰지말라고도 돼있다.
맨 위로 기능은 그냥 위치 지정 없이도 된다.
그런데 위 처럼 html내에서 특정위치 이동 기능은 자제 좀 해달라 하셨다.
Table
본인이 원하는 대로 테이블의 위치를 잡는게 html의 하이라이트라고 할 수 있다고 하셨다.
저 table 태그 안의 속성 중 border는 테두리다. 문제는 저 테두리가 개못생겼는데 지금은 css 모르니까 일단 쓰자하셨다.
그리고 저 속성에 그냥 행, 열 설정해주면 될 것 같은데 그렇지 않다.
테이블 속에 tr 행이 1개 td 열이 1개 td를 더 만들면 열이 2개 3개
그리고 각 셀 마다 글자 정렬을 따로 줄 수 있다.
2행 4열짜리 테이블 하나 만들어보란다.
여기서 밑에 열을 하나 추가하면?
이 테이블은 칸수 기준이 많은 쪽을 기준으로 한다. 안 맞으면 그냥 하나 비워 버린다.
아까 처음에 만든 테이블을 밑으로 가져와서 첫줄의 2칸을 합쳐버리라 하셨다.
그럼 1행의 2열을 없애버리고 1열에게 자리를 차지하게 한다.
이번엔 4번, 6번칸을 합치고 싶다.
6번 을 지우고 4번에게 rowspan을 넣는다.
이제 국민예제 장미모양 테이블을 만들어보라 하셨다.
그냥 3열 3행 짜리 테이블 만들고 필요 없는 부분 지워가면서 하니까 빨리할 수 있었다.
Frame (한국말로 -틀-)
화면 나눠서 메뉴 어쩌고 하는 중요한 기술인데 이 기술은 죽었다. 요즘엔 안 쓰는 기술이란다.
그냥 html로 페이지 마다 위에 있는 메뉴가 나오도록 만들면 되는 것 아닌가 굳이 frame으로 안 해도 jsp에서 frame 스럽게 만들 수가 있다.
그리고 최근 모니터의 크기와 비율이
640 x 480
800 x 600
1024 x 768 까지는 4:3 이였는데
-----------------------------------
1280 x 1024 비율이 다채로워짐.
1280 x 960
1900 x 900
....
이렇게 되버려서 위쪽에서는 화면 그냥 꽉 차게 디자인 하면 됬었는데 밑에쪽은 그렇게 하면 개판이 난단다.
요즘 웹사이트 접속을 하면 화면에 꽉차게 하기 보단 양 사이드에 여백을 많이 둔다. 그런데 이런 것들을 하기에는 frame은 최악이다.
이 frame에 대해서는 내일 마저 하기로 하고 나머지 기타 등등을 해보자고 하셨다.
input
뭐 입력할 수 있는 칸, 사용자가 입력하는 것에 제한을 둘 수 있게 type을 이용한다. 기본이 text고 number, datetime-local(달력 날짜 지정) 등등이 있다. 사용자의 입력을 받을 수 있기는 하나 값을 읽지는 못한다. 이건 jsp로 한다.
그런데 type 중에 대부분은 html5에서 생긴거라 IE를 위해 자제해야 한다.
button
누를 수 있는 버튼이긴 한데 아무 반응은 없다.
어찌됐든 HTML만 있으면 웹사이트 개발은 가능하나 디자인도 구리고 기능(이벤트)도 없다. 그래서 나온 것들이 CSS와 JavaScript이다.
HTML : 웹사이트 뼈대
CSS : 웹사이트 디자인 서포트 (피부, 살)
JavaScript : 웹사이트 이벤트 서포트 (뇌)
내일은 진짜 웹사이트스럽게 뭔가를 만들었으면 좋겠다고 하셨다. 예를들면 실제 웹서버에 업로드 하는 느낌으로..
'비전공자의 코딩 일지 > 학원 수업 정리' 카테고리의 다른 글
| Html, Css 문법 정리 (0) | 2022.07.12 |
|---|---|
| 코딩 학원 26일차(CSS) (0) | 2022.07.12 |
| 코딩 학원 24일차(MVC 패턴, Json과 SQL) (0) | 2022.07.09 |
| 코딩 학원 23일차(MVC 패턴, Java + Oracle DB) (2) | 2022.07.07 |
| 코딩 학원 22일차 (Java + Oracle DB) (1) | 2022.07.06 |
