전체 글
-
HTML5 시멘틱 구조 태그프론트엔드 프로그래밍/HTML 2022. 1. 26. 14:26
HTML5 시멘틱 구조 태그 - 시멘틱(Semantic) : 의미의, 의미론적인 - 역할과 기능에 맞는 요소로 영역 구분해서 사용 - 각 요소(태그)가 의미가 있다는 것 - : 헤더 (제목) - : 내비게이션 (메뉴) - : 사이드 바 - : 컨텐츠 (내용) - : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) - : 푸터 (주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 - HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 - 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 HTML5 시멘틱 구조의 장점 - 소스만으로도 문서 내용 쉽게 이해 - 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 ..
-
입력 양식 태그 <form>, <label>, <input> ...프론트엔드 프로그래밍/HTML 2022. 1. 26. 14:22
입력 양식 태그 - 입력 양식 (form)을 만들 때 사용하는 태그 - - - - - 태그 - 입력 양식을 구성하는 기본 골격 제공 - - 다양한 입력 양식 태그 포함 - - 태그 - 폼요소에 캡션(라벨) 붙이기 - 태그 - 데이터를 입력 받기 위한 태그 - 태그의 type 속성에서 사용 가능한 유형 라디오 버튼 (radio) - 여러 항목 중에 한 개를 선택할 때 사용 - 1학년 - 4학년 - name : 그룹 이름 - value : 선택한 버튼의 값 (서버로 전송되는 값) - checked : 처음부터 선택된 상태로 만들기 모든 입력 태그에서 - name 속성 : 서버에 전달될 때 서버에서 인식하는 이름 - id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름 체크박스(ch..
-
HTML 기본 태그프론트엔드 프로그래밍/HTML 2022. 1. 26. 11:37
기본 태그 - HTML 문서 구조 태그 - 텍스트 관련 태그 - 하이퍼링크 태그 - 목록 태그 - 테이블 테그 - 이미지 / 이미지 맵 태그 - 문서 삽입 태그 - 오디오 / 비디오 태그 - 입력 양식 태그 - 공간 분할 태그 - HTML5 시멘틱 구조 태그 문서 구조 태그 - - - 태그 - - 문서의 시작과 끝 표시 - 크게 두 부분으로 구성되어 있음 - - 제목 표시 (크기1) 제목 표시 (크기2) 제목 표시 (크기3) 제목 표시 (크기4) 제목 표시 (크기5) 제목 표시 (크기6) 텍스트에 장식 효과를 주는 태그 - text.html h3 : 텍스트에 장식 효과를 주는 태그들 b : 굵은 표시 (텍스트 강조) em : 텍스트 강조 i : 이탤릭체 (텍스트 강조) 텍스트sub : 아래 첨자 태그 -..
-
HTML이란 + 태그에 대해프론트엔드 프로그래밍/HTML 2022. 1. 26. 11:29
HTML 문서 작성 HTML (Hyper Text Markup Language) - 웹 브라우저에서 하이퍼텍스트 기능을 구현하는 웹 페이지 작성 언어 하이퍼 텍스트 - 문서간에 서로 링크가 설정되어 있어서 - 링크 설정 부분을 클릭하면 해당 문서로 이동하는 기능 태그(tag) - HTML에서 사용하는 명령어 (문자열 기호) - 원하는 모양과 형태로 브라우저에게 명령을 내림 - 태그 사용 형식 - 대부분 시작 태그()와 종료 태그()를 함께 사용 - 출력 내용 - 문서 제목 - 문단 형식으로 출력 - 출력 내용 - 이동 - 예외로 종료 태그 없이 혼자 사용 태그 - : 줄 바꿈 - : 이미지 삽입 - : 수평선 삽입 - 태그는 대소문자 구별 없이 사용
-
개발 환경 설정 / 이클립스 환경 설정백엔드 프로그래밍/JAVA 2022. 1. 26. 10:46
개발 환경 설정 - JDK 11 (17) - Apache Tomcat 9 - 웹 서비스 운영을 위한 서버 프로그램 - 다운로드 / 압축 해제 / 폴더 이동해서 - 이클립스에서 서버로 설정 - Eclipse IDE for Java EE Developers (Web 지원) - 최신 버전 (버전 상관 없이 사용) - 다운로드 다시 설치 프로그램 설치 시 주의!!! - 모든 프로그램의 설치 경로 : 최단 - 바탕화면에 설치 안 함 - 한글 폴더 사용 안 함 - 사용자 이름 영문 - 변수/함수/클래스명 한글 사용 안 함 --------------------------------------------------------------------------------------- 이클립스 환경 설정 - 폰트 설정 - ..
-
백엔드 (5) - JSP, EL, JSTL, Core 태그백엔드 프로그래밍 2022. 1. 1. 00:06
맥북은 왜 티스토리 사진 업로드만 하면 글이 안써지는가 진짜 불편하다 진짜 불편하다 진짜 불편하다 개발자들 일 좀 해라 제발 답답하다 참 JSP(2) 자바 빈 액션 태그 예제 빈 클래스 : StudentBean.java (DTO/VO와 동일) 패키지 생성 : sec01 Getters / Setters studentBean.jsp useBean 액션 태그 setProperty 액션 태그 getProperty 액션 태그 Getter 사용한 것과 결과 동일 자바 빈 액션 태그 예제2 폼에서 입력한 값으로 setProperty 액션 태그를 사용해서 한꺼번에 값을 설정하는 예제 studentForm.jsp newStudentOk.jsp 표현 언어 : EL (Expression Language) JSP 발전 과정 ..
-
백엔드 (4) - JSP(Java Server Page)백엔드 프로그래밍 2021. 12. 30. 23:36
JSP (Java Server Page) JSP와 Servlet (서블릿) JSP (Java Server Pages) HTML 내에 Java 언어를 삽입함 문서 jsp Servlet (Server + Applet) Java 언어로 이루어진 웹 프로그래밍 문서 자바 코드에 의존적 .java JSP (Java Server Page) Java 기반 HTML 문서 내에 자바 코드를 삽입해서 웹 서버에서 동적으로 웹 페이지를 생성해서 클라이언트(웹 브라우저)에게 반환해 주는 언어 서버 사이드 스크립트 언어 JSP를 통해 HTML과 동적으로 생성된 컨텐츠(DB 연동된 실시간 데이터)를 혼합해서 사용 가능 Servlet을 보완한 스크립트 방식 표준 언어 Servlet 기능 + 추가 기능 JSP(.jsp)는 실행되면서..