Web Language/HTML&CSS (5) 썸네일형 리스트형 HTML form 태그 Form Tag ▶ form tag 데이터를 전송하기 위한 태그 1) form 태그의 속성에 method,action을 설정하여 전송방식 및 전송경로를 지정해야 한다. 2) form 태그의 자식 요소에 input, select, textarea 등 데이터 입력 태그를 두고 submit을 실행하면 데이터가 전 송이 된다. 3) method 속성의 값은 post와 get으로 설정이 가능하며, post 방식은 데이터를 body에 숨겨 전송, get방식은 url로 전송을 한다. 4) action 속성의 값은 전송될 경로를 입력한다. ▶ form tag 종류 1. input 텍스트 등록 태그 (type 속성에 text, raido, checkbox 설정가능) 1) text, password input type=".. 테이블 병합 테이블 병합하기 td의 속성을 지정하여 병합을 할 수 있다. - colspan : 가로 병합 - rowspan : 세로 병합 테이블 안의 td에 rowspan 속성을 부여하면 ("rowspan="2") td 크기가 커지며(병합) td가 한칸 밀려난다. 밀려난 td를 지운다. 번호 카테고리 제목 5 국어 국어점수1 5 국어점수2 5 수학 수학점수 세로 셀이 병합된것 처럼 보인다. 마찬가지로수학 점수를 지우고, 수학 td를 colspan 속성을 부여한다. 번호 카테고리 제목 5 국어 국어점수1 5 국어점수2 5 수학 더보기 번호 카테고리 제목 5 국어 국어점수1 5 국어점수2 5 수학 레이아웃 구성 이해 ▶ uI / GUI - UI : User Interface - GUI : Graphic User Interface 1) 레이아웃 구성의 규칙 - 화면 설정 : 기본적인 화면 설정 내용 전달 - 공통 규칙 : 공통적인 리소스 정보를 전달함. - 구성 항목 : 네비게이션, 테이블, 툴팁, 탭, 아이콘 - 레이아웃 : header, container, footer - 네이밍 : 공통 규칙에 따라 파일명을 정한다. 공통 : 형태_의미_상태. 대분류_중분류_소분류 이미지 : 영문 소문자, 숫자 css _ 컨셉 분류에 따라 '서비스_대분류명' 카멜 표기법 낙타 등 모형이 닮았다 하여 붙여진 이름 파스칼 표기법 member name 이라는 변수를 만들때 member Name 형태의 모형으로 변수를 만들 수 있다. m.. Html과 CSS 이해 HTML ▶ html의 구조 ① 웹 페이지가 HTML5 문서임을 의미. HTML5에는 반드시 표기해야 함. ② ... HTML 문서의 시작과 끝을 의미 ③ 스타일과 스크립트를 선언하는 부분 ④ ... 브라우저의 제목 표시 ⑤ ... 사용자에게 보여주는 실제 내용이 구현되는 부분 ▶html 태그 종류 1) 텍스트를 표현하는 태그 ☞ h1 : 제목을 표기 ☞ span : 텍스트 범위 지정 ☞ label : 태그의 명칭 지정 ☞ strong : 텍스트를 굵게함 ☞ small : 기본 폰트 사이즈 보다 작게 ☞ p : 새로운 줄에 택스트를 입력함 더보기 h1 : 제목 표기하는 태그 span : 텍스트 범위 지정 label : 태그의 명칭을 지정할 때 strong : 굵게 small : 기본 폰트 사이즈보다 작게.. HTML 화면 구성 ▶ 회원 관리 화면의 구성 요소 ▶ 레이아웃 화면구성 index 파일과 main.css 파일을 연동시킨다. - request.getContextPath() 은 절대 경로로 Layout35 프로젝트 폴더를 의미한다. request.get까지 치고 ctrl+space 누르면 자동완성이 뜸. 경로를 지정할때 타자를 쳐서 잡지 말것. "/(폴더명 클릭-복사-붙여넣기)/(파일명 클릭-복사-붙여넣기)" ▶상단 메뉴 설정 4개의 상단 메뉴를 구성함. 01회원가입과 02회원리스트에 경로를 설정함. ▶ 회원가입 폼의 예시 상단 메뉴에서 01회원가입 버튼 클릭시 나타나는 화면. 입력화면의 종류. -text 타입의 입력화면 -submit 타입의 입력화면 주석 설정 ctrl+shift+/ 글씨크기 설정 ctrl+shift+(.. 이전 1 다음
