프론트엔드

 

 

Java Resource

백 자바 로직이 들어가야됨

모델 컨트롤러가 들어가야됨 mvc 중 m c

 

src

프론트 웹 view 가 들어감

html jsp css script

 

Html

프로그래밍 언어라고 부르지는 않는다.

화면을 구성

 

 

태그의 구성

태그는 잘 구성 하는 것이 중요하다.

“위치”가 중요

스크린 리더라는 보조기구를 사용하여 웹을 이용

눈에 보이는 대로 구성하면 안된다.

태그를 읽는 사람들을 생각해서 구성해야 한다.

 

“웹 표준 접근성 지침 준수”

 

태그를 시맨틱하게 구성해야한다.

 

태그

요소

엘리먼트

<>

Element

 

1. 블록 요소
2. 인라인 요소

 

a태그 링크담당

<a href= “”>링크를 담당하는 요소</a>

 

Img 태그

이미지를 누를 때 이동시키고 싶다면 a 태그로 감싸라

<a>

<img src =“images/teemo.png” alt=“티모 이미지를 누르면 타겟링크로 이동”>

</a>

 

 

Gnb,lnb 들은 <div class=“gnb”></div> 요즘은 nav 잘 안씀

 

 

 

 

HTML  페이지의 골격

CSS     페이지의 디자인

JS     페이지의 동작

 

 

표지 페이지 : 인덱스 페이지

 

 

<form action="어디로 데이터를 보낼지에 대한 URL 경로" method="어떤 방식으로 보낼지">

 

</form>

 

사용자의 입력값을 받는 input 태그를 위한 공간 form  태그

 

 

Action 속성

어디로 값을 보낼지

경로

 

Method 속성

어떻게 값을 보낼지 

방식

 

GET

url 에 직접 값을 파라미터로 기입

url 에 어떤 값을 보내는지 노출됨

ex) selectOne, 검색, …

 

POST

상대적으로 GET 보다는 보안에 상대적으로 유리

(url 에 값이 안보이니까)

요청헤더에 값을 넣어서 전달

ex) 로그인, CUD, …

 

<form action="generic.html" method="GET">
		<input type="checkbox" checked name="apple"/> <input type="checkbox" name="apple"/> <input type="checkbox"/> <br>
		<input type="radio"/> 
		<input type="radio"/>
		<input type="hidden" disabled readonly disvalue="사용자 화면에보이지 않는 input"/>
		사용자의 입력 : <input type="text" placeholder="글자를 입력하세요"/> <br>
		<input type="date"/> <br>
		<input type="email" required/> <br>
		<input type="file"/> <br>
		<input type="number" min="1" max="5" value="3"/> <br>
		<input type="password"/> <br>
		<input type="range"/><br>
		<input type="submit" value="보내기"/>
	</form>