본문 바로가기

전체 글

(113)
JSP(JavaServer Pages)란? JSP (JavaServer Pages)HTML 코드에 JAVA 코드를 넣어 동적 웹페이지를 생성하는 웹 어플리케이션 도구JSP가 실행되면 자바 서블릿(Servlet)으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행→ 생성된 데이터를 웹페이지와 함께 클라이언트로 응답  웹 어플리케이션 (Web Application)웹에서 실행되는 응용프로그램, 인터넷에서 하는 여러 서비스를 총칭사용자가 필요한 요청을 하고 서버에서는 이에 해당하는 요청을 수행한 뒤 요청한 데이터를 응답웹 브라우저 (Web Browser)클라이언트에서 요청을 하고 전달받은 페이지를 볼 수 있는 환경 (크롬, IE, ...)웹 서버 (Web Server)클라이언트로부터 요청받아 서버에서 리소스를 클라이언트에 전달→ 주로 ..
[HTML] 폼(FORM) form사용자가 입력한 데이터(입력값)을 서버로 보내기 위해 사용하는 태그 서버와 클라이언트클라이언트가 요청하면 서버는 그에 대한 응답으로 정보를 제공클라이언트의 요청이 어떤 것인지에 따라 응답은 달라짐 예1) 사용자가 네이버 홈페이지로 이동하고 싶은 상황클라이언트 : 네이버 홈페이지 주소 입력 → 엔터 → 서버에 네이버 홈페이지로 이동한다는 요청 보냄서버 : 요청을 받아 응답으로 네이버 웹페이지 보냄 (홈페이지 html 문서)클라이언트 : 사용자 웹브라우저에 네이버 홈페이지 오픈됨 예2) 네이버 로그인 상황클라이언트 : 로그인을 위한 아이디, 비밀번호 입력 후 로그인 클릭 (엔터)→ 3가지의 입력 요소서버 : 로그인 정보 확인 후 맞으면 로그인 성공 화면 / 틀리면 로그인 실패를 알림3개의 입력 요소로..
[HTML] SELECT와 TEXTAREA select다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴option 태그 ≫ 메뉴 안에 포함되는 옵션드롭다운이 나타나 사용자 선택 가능첫 번째 선택 항목이 선택된 상태에서 시작 스타벅스 커피빈 이디야 탐앤탐스 textarea여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소input 태그로는 한 줄만 입력할 수 있지만 textarea 태그는 여러 줄 가능name 속성 추가 가능줄 수가 많아지면 자동으로 스크롤이 생김  키우고 싶은 동물 고르기 강아지 고양이 햄스터 앵무새 기본적으로 쓰여 있는 텍스트  selectmultiple 속성 ≫ 여러 개를 선택할 수 있도록 펼쳐진 상태여러 개..
[HTML] 입력 요소 만들기 input 태그사용자로부터 값을 입력받을 수 있는 대화형 컨트롤 (필드)인라인 요소단일 태그 type 속성입력 요소의 형태나 입력 데이터 유형 등이 type 속성에 따라 달라짐적용할 수 있는 추가 속성의 종류도 달라짐type은 20여 가지기본값은 text ! name 속성input 태그에 식별자 추가각각의 입력 항목에 대한 이름  색을 골라보세요! text ≫ 텍스트 입력받음placeholder 속성 - 안내 메시지 : 사용자 입력 전에만 보이는 텍스트maxlength 속성 - 문자 개수 제한 : 특정 개수 이상 문자 입력 불가button ≫ 클릭을 입력받음value 속성 - 버튼 위에 텍스트 표시color ≫ 팔레트를 통한 색상 선택추가적으..
[HTML] 목록 표시하기 : 순서 있는 목록 (ordered list) : 순서 없는 목록 (unordered list) li 태그 (항목 태그)목록에 들어가는 항목 하나 하나 표현 시 사용감싸는 태그 (ul / ol 태그)에 따라 웹 브라우저에 나타나는 기호가 달라짐≫ , , 는 모두 블록 레벨 요소를 만드는 태그 !  귀여운 동물 목록 강아지 고양이 두더지 햄스터 프로그래밍 공부 순서 HTML CSS JAVASCRIPT NODEJS , , 는 모두 블록 태그이므로 안에 인라인 태그 추가 가능실행 결과HTMLCSSJAVASCRIPTNODEJS
[HTML] 링크 만들기 링크현재 문서에서 다른 문서로 이동할 수 있는 수단a 태그 ≫ href 속성을 통해 다른 페이지, 전화번호, 이메일 주소, 그 외 다른 url로 연결할 수 있는 링크인라인 요소콘텐츠는 주로 링크의 목적지 나타냄네이버 target 속성새로운 문서를 열 때, 현재 탭에서 열지 새로운 탭에서 열지 결정"_self" : 현재 탭에서"_blank" : 새로운 탭에서기본값은 self ! ≫ 지정하지 않으면 현재 탭에서 열림 전화 걸기 / 메일 쓰기웹문서 주소 뿐 아니라 전화번호, 메일 주소 등을 href에 지정tel / mailto 문자열 지정010-1234-5678 전화걸기emailaddress@naver.com 메일 전송  네이버 구글 ..
[HTML] 컨테이너와 전역 속성 컨테이너 태그콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그콘텐츠 내용 구분 / 공통적인 스타일 적용 등에 사용 : 블록 레벨 컨테이너 : 인라인 컨테이너  일단 문서를 만들자 공부 다짐하기 공부를 열심히 하기로 했다! 운동 열심히 하기 건강을 위해 운동을 열심히 하자! 콘텐츠 내용이 크게 2종류로 구분됨 → 컨테이너 태그를 통해 분류모두 블록 레벨로 작성되어 있으므로 (, ) 태그 사용브라우저에는 변동사항이 없지만 개발자 도구에서 표시됨커서를 갖다 대면 나누어진 블록 확인 가능 태그 사용콘텐츠에 사용하면 그 글씨만 따로 표시됨 (개발..
[HTML] 이미지 표시하기 img 태그이미지를 표시할 때 사용단일 태그콘텐츠를 적지 않고 표시할 이미지에 대한 정보를 속성으로 지정 src 속성표시할 이미지의 위치 정보와 파일명을 입력받는 속성이미지의 url을 입력받음서버에 위치한 이미지 파일 / 내 컴퓨터에 저장된 이미지 파일 ≫ 모두 가능url 작성 방법내 컴퓨터에 있는 이미지 파일같은 파일 내에 images 파일 생성 후 사진 추가"images/이미지파일이름"서버에 위치한 이미지 파일서버에서 원하는 이미지 파일의 주소 복사"복사된이미지파일주소" alt 속성alternative의 약자 ≫ 대체 텍스트 역할이미지가 로딩되기 전 / 이미지 로딩에 실패한 경우 ≫ 이미지 대신 대체 텍스트가 표시됨올바른 url 지정 후 alt 태그 지정하면 대체 텍스트는 나타나지 않음 이미지 크기 ..