웹1(HTML)

제이·2023년 4월 13일

html web

웹

목록 보기

1/15

웹으로 프로그램은 만들면 우리가 얻게 되는 장점은?
어떤 준비를 하지 않아도(사전작업없이) 어디서든지 접근이 가능하다.
정보를 관리하는 측면에서도 편리하다.

원래는 우리가 하는 일이 뭐냐면 클라이언트가 해달라고 하면 서버가 다 해주는데 서버가 못버틴다.그래서 서버가 하는 일의 일부분을 클라이언트에게 맡긴다.

엔터프라이즈시장에서는 자바가 최강자다.

• 개발 언어 : 자바
• 웹/어플리케이션 서버 : HTTPD(아파치 웹 서버)나 NGINX, 톰캣, 웹로직 등
• 서버 웹 기술 : JSP와 서블릿
• 서버 웹 기술을 위한 프레임워크 : 스프링 MVC
• 클라이언트 웹 기술 : HTML, 자바 스크립트
• 클라이언트 웹 기술을 위한 프레임워크나 라이브러리 : jQuery, 앵귤러JS 등
• 데이터베이스 연동 : JDBC, MyBatis, JPA
• DBMS : MysQL, MS SQL, 오라클
• 통신 프로토콜 : HTTP
• OS : 센트OS, 윈도우 서버 2012 등

WAS(Web Application Server)

: 소켓같은 걸 만들어주는 프로그램. 자바가 사용할 수 있도록 만들어준다.
: http 기반으로 동장한다.
: 우리는 톰캣을 사용할 것이다.
:WAS는 Web Server + Web Container
   Web Server는 클라이언트의 요청을 받아서 Container로 전송함.
   Container란 JSP, Servlet을 실행시킬 수 있는 소프트웨어를 말한다.
   즉, WAS는 JSP, Servlet 구동 환경을 제공한다.

서버 웹기술/클라이언트 웹기술

클라이언트프로그램을 우리가 만들지 않는다. 클라이언트프로그램은 브라우저이다. 크롬이됐든 엣지가 됐든 정해져있다. 이런 애들이 클라이언트 애들이 된다. 이걸 동작할 수 있도록 서버프로그램을 만드는 것이다.
클라이언트는 하나인데 서버는 여러개.
둘은 어디서 연산을 하느냐로 알 수 있다.

클라이언트 = 브라우저(고정) - 브라우저에서 연산이 되는 거.⭐⭐

브라우저가 읽어낼 수 있는 거 = HTML, JAVASCRIPT, CSS (언어이다.)
브라우저는 HTML, JAVASCRIPT, CSS이라는 언어만 읽어낼 수 있다.

HTML : 문서의 구조 담당
JAVASCRIPT: 간단한 연산을 담당
CSS : 어떻게 보여주는가- 눈에 보여지는 부분을 담당

위의 3개 특징은 코드가 전부 다 눈으로 확인된다는 것이다.
그러나, 서버언어는 어떻게 만들어졌는지 클라이언트는 알 수가 없다.

자바스크립트라는 언어에서 사용하는 라이브러리
: JQuery, 앵귤러JS - 언어X.

서버 = 자바 (JSP, SERVLET) - 서버측에서 연산이 되는 거.⭐⭐

읽어 들일 수 있는 것이 HTML, JAVASCRIPT, CSS뿐이어서
서버는 이 3개가 읽어낼 수 있는 것들을 만들어야 한다.
String 형태로 전달된다.

jsp, servlet 의 주목적 : 브라우저가 읽어낼 수 있는 형태의 응답을 만들어내는 것이다.

서버와 클라이언트의 관계가 모호해지는 경우가 있는데 서버와 클라이언트는 완전 다른 것이다. 물리적으로는 같으나 논리적으로는 완전히 독립된 내용이다. 클라이언트는 우리가 만든 것이 아니다.

언어들이 어디서 일을 하는지 즉, 서버에서 일하는 언어인지 클라이언트에서 일하는 언어인지를 확실하게 알아야한다.

스프링MVC : 모델뷰컨트롤러

모델 : 제이리스트모델 - 값을 관리하는 거
뷰
컨트롤러 : 제이리스트자체가 컨트롤러가 되는 것이다.

이렇게 해야지 유지보수가 편하다. 고치기 쉽게 만들어야 한다.
노가다를 안하게 해주는 거 -> 우리가 더이상 구조에 대해서 고민하지 않게 해주는 것이다.
mvc형태를 이해하고 있는가 각 레이어의 목적이뭔가 뭐 그런 게 중요..

JDBC : 자바와 DB를 연결해주는거.
MyBatis : JDBC역할을 좀 편하게 해주는 거..

데이터베이스는 sql이라는 언어만 알아들을 수 있다.
개발은 sql을 이해하는 것이지, 데이터베이스를 자체를 이해할 필요는 없다.

CRUD

Create(생성), Read(읽기), Update(갱신), Delete(삭제)

웹에서 crud가 되느냐를 알아보기 위해서 게시판을 만들어내려고 한다.
게시판 만드는데 얼마냐 걸리냐? - 반나절이면 할 수 있어요 정도는 해야 취업을 할 수 있다.

참고 사이트 : https://www.w3schools.com/

HTML

HTML : 비선형문서를 태그로 바꿔주는 문서이다.

특징

웹표준문서양식
비선형문서 : 차례가 없는 문서 (다음문서를 내가 선택할 수 있음)
마크업 : 태그로 이루어져있는 것. 뒤에 '~ml'로 끝나면 태그로 이루어져 있다고 보면 된다.
태그는 복수 개의 속성을 가질 수 있다.
-> <a> : 여는 태그 </a> : 닫는 태그
속성
: alt=" ", src= " " 형태로 이루어 진 것들이 속성이다.
html은 대문자 소문자로 다써도 속성은 소문자로 쓰는 것이 좋다.
속성형태 : = + ""
html은 텍스트 파일이다. 메모장에서 볼 수 있다. 메모장같은 걸로 만들 수 있어야 한다.
확장자는 .htm , .html 이다.
결과확인은 웹브라우저를 통해서 할 수 있다.

문서구조

위사진은 원래 기본 구조

구조적 특징(코드)

<html>로 시작해서 <html>로 끝나야 한다!!
html 열고 닫는 이 사이(내부부분)는 크게 두가지 헤드와 바디로 구성.
헤드<head>: 아래 설정같은 것들.
바디<body> : 실제로 우리눈에 보이는 파트.
타이틀 : 브라우저의 제목으로 나타남.
  : 줄바꿈
 : 문단을 구분
<hn> ~ </hn> : 순서 등을 적용
주석 : <-- 주석 -->
ctrl + B : 실행

여는 태그가 있으면 닫는 태그가 있어야 한다!!!!!!!!!!!!
끝나는 태그에는 '/'가 붙는다.
태그안에 태그가 가능하다.(아래예시)

그러나 잘못 닫으면 안된다.(아래예시)

Empty Tag
<x>, </x> 또는 <x/>: 이거는 줄여서 쓸 수 있다.

` ` : 줄바꿈

코드

결과

바디사이에 enter를 사용하면 공백한칸이다.
태그 여는 거 닫는 거 있어야 하는데 사이에 뭐 할게 없으니까
<'br/'> 이렇게 /가 뒤로 간다. 근데 <'br'> 이렇게 안붙이고 써도 된다.
xhtml은 좀 엄격하고 html은 관대한 편이다.
우리는 좀 엄격하게 사용하기.

`` : 문단을 구분

p align ="center" : 가운데정렬
p align ="left" : 왼쪽 정렬
p align ="right" : 오른쪽 정렬

'어떻게 보이는 가'는 CSS로 표현한다.

html : 문서의 구조 담당. -> 폰트같은 것들 사용안함.
CSS : 어떻게 보여지는 지 -> 폰트(글자색,글자체) 같은 것들.
그래서 html과 CSS를 같이 사용한다.

`<hn> ~ </hn>` : 대단위-소단위

약간 n번째. 이런 느낌.
n에는 숫자가 들어간다.
눈에 보이는 효과는 크기가 맞지만,
이건 제목-대단위-소단위 이런느낌이다. 제목을 나타낸다.
벨로그의 H1, H2, H3로 쓰는 거랑 같음.

시멘틱태그

: 의미가 있는 태그라는 뜻.
: 예시 - 검색엔진의 최적화, strong

구글같은데서 검색했을 때... 검색과 관련된 사이트를 어떻게 찾아냈을까?
웹봇이 이 사이트가 어떤 주제를 다루고 있느 사이트인지를 수집하고 분류한다. 이걸 판단할 수 있는 첫번째 기준이 위의 hn이다.
저기에 안 써져있으면 검색이 안된다.
눈에는 안보이지만 대부분 다 이렇게 구성되어 있다.
 : html에서 사용하는 시멘틱태그의 예시 중 하나이다.

검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 등을 판단.
strong이라고 적혀 있는 부분은 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

html은 어디에 적용이 되는지 구분할 수 있어야 한다.
어디에 둘러싸져 있는지 구분할 수 있어야 한다.

`<ul> ,<ol>, <li>`

<ul> : 언올덜드리스트 - 순서없는 목록입니다라는 뜻.
스퀘어 등 종류가 있음.
<li>: 리스트아이템
<ol> : 순서있는 목록 - 앞에 숫자를 붙여준다.(1,2,3...)
: css 사용하면 더 많은 종류 사용할 수 있다.

04.13수업

제이

Hello :)

다음 포스트