Frontend/HTML (19) 썸네일형 리스트형 GET / POST 전송 방식 입력 양식에 데이터를 입력하고 submit 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달 전달 방식 및 전달 장소는 속성을 통해 지정 ... action 데이터를 전달할 목적지 method GET 주소에 데이터를 직접 입력해 전달 보안에 취약 데이터 용량에 제한이 있음 ... POST 별도의 방법을 사용해 데이터를 해당 주소로 전달 주소가 변경되지 않음 비밀스럽게 데이터 전달 데이터를 별도로 전송하기 때문에 데이터 용량에 제한 없음 ... <input> 태그 개념과 속성 사용자로부터 입력을 받을 수 있는 입력 필드 정의 사용자가 데이터를 입력할 수 있는 입력 필드를 선언 요소 내부에서 사용됨 요소의 type 속성값을 다르게 하여 여러 가지 모양으로 나타낼 수 있음 빈 태그 (닫는 태그가 없는 태그 (공백 태그; empty tag)) -> 속성만을 포함하고 있음 요소 사용 -> 요소의 라벨 정의 가능 태그의 속성 name 요소의 이름 명시 form 해당 요소가 포함될 하나 이상의 요소 명시 value 요소의 초깃값 명시 type 속성값에 따라 다른 용도로 사용 버튼 내 텍스트 정의 : button, reset, submit 입력 필드의 초깃값 정의 : hidden, password, text 해당 입력 필드 선택 시 서버로 제출되는 값 정의 : checkbox, image.. <link> 태그의 개념과 속성 ( rel / href / type ) 현재 문서와 외부 리소스의 관계 명시 스타일시트를 연결할 때 가장 많이 사용 사이트 아이콘, 파비콘 연결 등에도 사용 파비콘 : 인터넷 웹 브라우저 주소창에 표시되는 웹사이트 대표 아이콘 media 특성 사용 -> 미디어 유형 및 쿼리 지정 가능 (해당 미디어 조건 만족 시에만 리소스 불러옴) 외부 스타일시트 연결 파비콘 연결 태그의 속성 rel 관계(relationship)를 의미 현재 문서와 연결한 아이템의 관계 설명 요소의 제일 중요한 기능 중 하나 (필수적으로 명시되어야 하는 속성) href 연결할 리소스의 URL 절대/상대 URL 모두 가능 type 링크된 외부 리소스(콘텐츠)의 타입을 명시 link가 어떤 형태인지 명시적으로 알려주는 역할 반드시 href 속성이 설정되어 있어야만 사용할 수 있.. 공간 분할 태그와 HTML5 시맨틱 구조 태그 공간 분할 태그 태그 : block 형식으로 공간 분할 태그 : inline 형식으로 공간 분할 HTML5 시맨틱 구조 태그 시멘틱(Semantic) : 의미의, 의미론적인 역할과 기능에 맞는 요소로 영역 구분해서 사용 각 요소(태그)가 의미가 있다는 것 : 헤더 (제목) : 네비게이션 (메뉴) : 사이드 바 : 컨텐츠 (내용) : 컨텐츠 안의 내용 (컨텐츠 영역 세분화 할 때 사용) : 푸터 (주소 / 저작권 / 연락처 등) HTML5 시맨틱 구조의 특징 HTML4로 만든 웹 문서의 결과 화면과 HTML5로 만든 웹 문서의 결과 화면 -> 웹 브라우저에 보이는 모습은 동일 그러나 실제로 웹 브라우저에서 문서를 처리할 때에 있어서는 큰 차이가 있음 HTML5 시맨틱 구조의 장점 소스만으로도 문서 내용 쉽.. 입력 양식 태그 입력 양식 태그 입력 양식 (form)을 만들 때 사용하는 태그 모든 입력 태그에서의 name과 id 차이 name 속성 : 서버에 전달될 때 서버에서 인식하는 이름 id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름 태그 입력 양식을 구성하는 기본 골격 제공 다양한 입력 양식 태그 포함 태그 폼요소에 캡션(라벨) 붙이기 태그 데이터를 입력 받기 위한 태그 속성 속성값 설명 name 문자열 입력 상자의 이름 type text password checkbox radio 입력 유형 size 숫자 입력 상자의 크기 value 문자열 초기값 / 태그가 지닌 값 maxlength 숫자 최대 길이 placeholder 문자열 입력할 내용의 힌트 표시 readonly 읽기 전용 필드 au.. 이미지/이미지 맵 태그 & 문서 삽입 태그 & 오디오/비디오 태그 이미지 태그 태그 인라인 태그 -> 이미지 바로 옆에 다른 요소가 나란히 배치 여러 개의 태그를 사용하면 계속해서 오른쪽에 표시 이미지 태그의 속성 속성명 설명 src 이미지 경로 (필수) align 정렬 방식 alt 이미지 출력 안 될 때 사용하는 대체 텍스트 title 마우스 위치에 출력되는 툴 팁 설명 width 가로 길이 height 세로 길이 border 테두리 hspace 좌우 여백 vspace 상하 여백 align, border, hspace, vspace는 더이상 HTML5 지원 X 이미지 파일 경로 HTML 파일과 같은 폴더에 있는 경우 이미지 파일명만 적어도 접근 가능 하위 폴더에 있는 경우 폴더명/이미지 파일명 하위 폴더가 아닌 다른 폴더에 있는 경우 ../폴더명/이미지 파일명 이미지.. 목록 태그 & 테이블 태그 목록 태그 기본 목록 : 정의 목록 : 기본 목록 태그 : 순서가 없는 목록 (Unordered List) : 순서가 없는 목록 (Ordered List) : 목록 내 각 항목 (List Item) 순서가 없는 목록 의 태그 속성 속성명 속성값 설명 type disc 검은 원 (기본 값) circle 흰 원 square 사각형 순서가 없는 목록 의 태그 속성 속성명 속성값 설명 type 1 숫자. 기본값 a 영어 소문자 A 영어 대문자 i 소문자 로마 숫자 I 대문자 로마 숫자 start 숫자 시작 숫자 지정 reversed 역순으로 표시 목록 태그 중첩 사용 예제 프로그래밍 웹 프로그래밍 JSP/Serverlet HTML/JavaScript/jQuery 모바일 프로그래밍 Java 안드로이드 웹 및 모바.. HTML 문서 구조 태그 & 텍스트 관련 태그 & 하이퍼링크 태그 문서 구조 태그 태그 문서의 시작과 끝 표시 크게 두 부분으로 구성되어 있음 태그 및 포함되는 태그들 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아두어야 할 문서 정보 포함 태그 문자 인코딩, 문서 키워드, 문서 정보 등 태그 외부 리소스 연결 : 문서 제목 : 자바스크립트 코드 삽입 태그 문서의 몸통 부분 실제 화면에 보이는 문서 내용 포함 대부분의 태그가 와 사이에 위치 종료 태그 뒤에 다른 태그를 위치시키지 않음 공백 / 괄호 등의 특수 문자 사용 연속된 여러 개의 공백은 하나로 인식 -> 여러 개의 공백 입력을 원한다면 특수 문자 사용해야 함 공백 : & : & 텍스트 관련 태그 제목 : (예: ) 본문 : 앵커 태그(하이퍼링크) : (텍스트 클릭 시 이동) 텍스트 .. 태그(tag)의 개념 및 HTML의 기본 태그들 태그(tag) HTML에서 사용하는 명령어 (문자열 기호) 원하는 모양과 형태로 브라우저에게 명령을 내림 대소문자 구분 없이 사용 태그의 분류 및 사용법 내용을 가질 수 있는 태그 -> 시작 태그와 종료 태그를 함께 사용 내용 내용 내용을 가질 수 없는 태그 -> 종료 태그 없이 혼자 사용 : 줄 바꿈 : 이미지 삽입 : 수평선 삽입 기본 태그 HTML 문서 구조 태그 텍스트 관련 태그 하이퍼링크 태그 목록 태그 테이블 테그 이미지 / 이미지 맵 태그 문서 삽입 태그 오디오 / 비디오 태그 입력 양식 태그 공간 분할 태그 HTML5 시맨틱 구조 태그 이전 1 2 3 다음