차근차근정확하게

지역변수 선언public class User{     private String username;         public String getUsername(){              return this.username;     }}@ControllerListusers = new ArrayList();users.add(userA);model.attribute("users", list);

Model Attribute 출력 th:text 출력: 컨텐츠 직접 출력 = [[${data}]] 속성에서 출력${data} 이용하여 Model.attribute("data", [data값]) 출력 컨텐츠 내부 직접 출력"[[]]" 을 이용하여 직접 출력 가능  객체 출력** 사전 준비 **public class User{     private String username;     public String getUsername(){              return this.username;     }}List list = new ArrayList();Map map = new HashMap();list.add(userA);map.put('userA', userA);model.addA..

1. 시멘틱 태그란?2. 시멘틱 태그 종류  시멘틱 태그란?"의미론적 태그"를 의미한다.해당 태그를 추가함으로써, 웹페이지의 변화를 주는 것은 아니다하지만, 가독성이 높아지고 구분되어있는 특징으로 html 유지보수가 쉬워진다또한, 검색엔진의 페이지 탐색에도 도움을 준다 시멘틱 태그 종류 : 컨텐츠 구분 , div와 유사 : 컨텐츠 구분, section보다 더 구체적 내용을 담음 : 보조 정보 (본문과 상관없는 부분), 광고 / 배너가 이에 해당 : 내비게이션 또는 본문 윗부분에 해당하는 부분을 일컫음 : 홈 bar 와 같은 웹페이지 맨 상단에 위치하는 내비게이터 : 웹페이지 마지막 부분  위와같이, 시멘틱태그의 경우 웹페이지에 어떠한 영향도 주지 않는다다만, 유지보수의 편리함과 검색엔진의 도움을 주는 효..

, ,  HTML5 지원pdf 파일을 가져와서 표현type : "application/pdf" 형식 지정data : pdf 파일 경로width : 폭설정height : 높이 설정비디오 표현type : video/quicktype 형식 지정src : video 파일 경로width : 폭설정height : 높이 설정다른 페이지의 내용 가져오기src : 가져올 URL나머지 동일 주의할점아직 html5를 지원하는 브라우저가 없을 수 있기에 동작하지 않을 수 있다

1. 오디오2. 비디오 오디오src : audio 파일 경로 입력autoplay loop : 자동 재생controls : 컨트롤 패널 표현 : 여러 형식의 audio 중에 웹브라우저에서 지원되는 태그 표현 ( 나머지 태그 무시됨 ) 비디오src : 비디오 파일 경로muted : 음소거autoplay : 자동 재생controls : 컨트롤 패널 이용 지원하는 태그 표현 (나머지 태그 무시)

1. Form2. 입력 3. input 이외 입력 태그 Formmethod : 해당 폼을 서버로 전송하는 방법 ( Get 또는 Post 방식 )action : 해당 맵핑되어있는 URL로 전송type : 텍스트, 패스워드 등, 유형에 따라 결정id : label 과 연계 또는 해당 태그의 고유 속성값 부여name : 서버로 전송시, 해당 값을 보고 판단 (기준)  태그와 같이 사용되며, 해당 input 박스의 텍스트 설명으로 주로 사용됨for : id속성과 동일하게 사용하여 맵핑 일반 속성placeholder : 입력전에 표시되는 텍스트text텍스트 입력maxlenth : 최대 길이 설정size : 입력 공간 size 설정password입력시 비공개 처리number개수 설정 가능min : 최소 개수max..

1. 목록 만들기2. 테이블 만들기목록  만들기 ( ,  )Ordered Liststart : 순서의 시작 표시type : a , 1 .. 등  순서 표기를 위한 형식 지정Unordered List순서가 없는 리스트 테이블 만들기border : 표 둘레 두께 지정표제목 지정 , , : 시각적으로 html 문서에서 나타내기 위한 용도 ( 넣지 않아도 됨 ) : 표의 첫번째 행 ( 표의 제목에 해당하는 부분) : 표의 내용 부분 : 표 마지막 요약 부분 (없는 경우도 많음)행 (가로) 를 나타냄첫번째 행을 나타내는 부분 ( 행안에서 제목을 나타내는 부분) 행(가로) 안에서 값을 나타내는 부분

1. 이미지 2. HTML5 이미지 태그 3. 링크 태그  이미지src : 이미지 파일 경로 ( 상대 경로 / 절대 경로 )alt : 이미지 파일을 불러 올 수 없을때, 나오는 문구 작성width : 이미지 크기 지정 (가로)height : 이미지 크기 지정 (세로) HTML 5 전용 이미지여러 이미지들을 한번에 묶는 역할 태그를 이용하여, 이미지마다 크기를 지정할 수 있음이미지 다음줄로 자동 개행을 하여, 이미지의 설명 문단을 표현 링크a 태그를 이용하여 원하는 URL 로 맵핑 가능속성_self : 현재 탭에서 해당 링크로 이동_blank : 새로운 탭에서 해당 링크로 이동