-
Web의 3요소
HTML/CSS/JS
웹브라우저를 이용해서 웹서비스 이용할 때 보게 되는 3가지
각각의 요소들이 하는 역할이 정해져있음
HTML : 화면을 보여줄 때 값이나 정보들이 어떤 정보인지 알려주는 역할
<!DOCTYPE html><html lang="en"><head><title>하이</title><style>h1{font-size : 48px;color : red;}</style></head><body><h1 id="first">문서의 제목</h1><h1>두 개</h1>
<script>document.getElementById("first").innerText = 제목;</script><header><ul><li>목록에 보여질 정보</li><li>목록에 보여질 정보</li></ul></header>
<img src="이미지경로" >
<h1>하나 더</h1>
</body></html>=> 각각의 값들이 어떤 의미의 값인지 구조를 잡고 정의를 하는 역할
잡혀있는 구조들에 꾸며야겠다 할때 사용하는 친구가 CSS
브라우저에서 열어 봤을 때 내가 css를 이용해서 스타일 입힌 내용을 브라우저가 보고 해석해서 반영해가지고 스타일을 입혀준다
JS라는 프로그래밍 언어의 중요성이 점점 높아지고 있음
자바스크립트를 가지고 할 수 있는 작업이 무궁무진하게 많아졌음
속도도 빨라지고 할 수 있는 작업도 많아지고 활용도가 높아졌다
날이갈수록 중요도가 높아짐 꽤 중요한 친구
그렇다고 너무 어렵게 생각할 필요가 없는게 그 이유는 당분간 우리는 자바스크립트란 언어를 이용해서 어떤 목적으로 사용할거냐면
화면상에 만든 html을 조작하는 용도로만 당분간 쓸거에요
<h1>이라는 요소는 문서의 제목 요렇게 들어있어요
값을 바꾸고 싶은거에요 문서의를 빼는것 => 요소를 조작한다
html,css 두개만으론 요소를 조작할 수 없다. 그래서 우리가 자바스크립트란 친구를 사용한다
h1 요소가 여러개이면
3개중에 첫번째만 선택할거면 어떻게 해야 선택할수 있는가
문서상에서 딱 하나의 요소만 접근하고 싶다/선택하고 싶다라고 한다면
id속성만 생각하면되요
요소에 태그명 뒤에 붙은 친구를 html의 속성이라고 하는거에요
"id속성"
여는 태그에 보라보라친구들 전부 폼태그가 가진 속성
는하고 따옴표가 가진 값을 속성값이라 한다
"액션속성값" , " 네임속성값" "id속성값" "메소드속성값"
속성명 = 속성값
id라는 속성은 각각의 요소를 식별하는 역할로 테이블상에 PK와 같은 역할
속성값은 겹치지 않도록 작성이 필요함
<script>document.getElementById("first").innerText;</script>document를 이용해서 모든 요소에 접근할수 있음
getter 는 getElement
요소를 가져올 수 있는 게터가 많다
속성중에서 어떤 속성에 접근해야되냐면 innerText라는 속성에 접근
바꾸고 싶은 제목을 대입을 요렇게 해주면
이걸 다섯글자로
요소의 조작
요소접근 속성접근 값들을 넣어준다
각각 따로따로는 안중요한데 셋을 합쳐놓으면 매우 중요해짐
3친구를 사용자에게 보여주는 화면으로 사용하기 때문
우리가 만든 프로그램을 이용할 수 있는 화면
이 화면을 통해 값을 입력받고 출력하고
그중에서도 중요한게 바로 "폼태그"
현재상황에도 우리한테 어마어마하게 중요
왜? 우리가 사용자에게 값을 입력 받아야되니까
인풋요소 아니면은 텍스트area 둘중에 하나를 씁니다
html에 적어놓기만하면 아무 의미가 없어요
폼태그 안에 있어야 의미가 있어요
사용자가 아이디 비밀번호를 html에서 입력을 하자나여 인풋요소에다가 입력을해요
하고나면 꼭 버튼을 누르자나여 우리가
그 인풋요소가 폼태그안에 있어야되요
폼태그의 action속성값 요기 url로다가 적은값을 전달을 해준다구요
DB까지 들고가서 where 조건절에 써야되잖아요
name속성의값 요게 그 구분값
오케오케 나 요거 유저아이디 네임속성값에 적은거 요렇게 뽑고
인풋요소에 유저피더블유디에 적은거 요렇게 뽑아서 쓰죠
요거 가지고 구분을 하죠 어디 적은건지
두번째 폼태그에 뭐가 있어야되냐면 액션속성값이 있어야되요
우리가 만들어논 액션속성값이 많을거아니에요
회원가입 요청 수정요청 탈퇴요청 전부 다른요청이잖아요
고 구분하는 것이 액션 속성값 로그인/회원가입/정보수정/탈퇴
어떤 폼태그 이게 보세요 여러분 로그인이라고 써있으면은
폼태그를 갖다가 눌렀을때 요고 누르면은 login이렇게 요청이 가는거고 뮤라고 쓰면 누르면은 뮤라고 요청이 가는거고
요거는 정해진게아니고 내맘대로 적는거에요 뭘로 적어도 사실 상관없음
구분이 잘되게 무슨 작업인지 알수있게
로그인 요청이니까 결국 받아가지고 셀렉트하러 가야되잖아요
처리해줄 서블릿이란걸 만들어가지고 앞으로 넘어온 요거 똑같이 맞춰서 적어줘요
앞에서 뒤로다가 값을 넘기는 방법 요파트
사용자가 값을 적어서 보내면 요거 앞으로 뒤로 요거는 중요해요
값 받아가지고 처리하는거 DB갔다 오는거 계속해서 해보세요
평가는 하나도 안중요해요 쓰잘데기 없어요
자 그래서 이제 저는 하고 싶은얘기 다 했거든요
여러분 궁금한점 받을게요