HTML CSS/HTML (12) 썸네일형 리스트형 4-2. <input> 태그 태그 사용자가 입력하는 부분은 거의 태그를 이용해 처리 입력하는 내용의 종류는 태그의 type 속성을 통해 지정 type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다 태그의 id 속성 여러 번 사용된 폼 요소를 구분하기 위해 사용 태그를 이용해 캡션을 붙일 수 있다. CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다. type = “hidden” 화면 상의 폼에는 보이지 않는다. 폼을 서버로 전송할 때 서버로 함께 전송되는 요소 type = “text” 한 줄짜리 텍스트 입력 필드 주로 아이디나 이름, 주소 등 텍스트 입력 type = “password” 비밀번호 입력란 사용자가 입력하는 내용이 ‘ * ’나 ‘•’로 표시된다 텍스트 필드와 패스워드 필드의 속성 (단, 패스워드 필드에는 v.. 4-1. 폼 만들기 웹에서 만나는 폼 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼 (form) 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 이런 작업은 모두 데이터베이스를 기반으로 한다. 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 여기에서는 서버 프로그래밍에 대해서는 다루지 않고 브라우저 에 표시될 폼을 만드는 태그들에 대해 살펴본다. 예시 폼의 동작 방식 사용자가 [아이디]와 [비밀번호]에 정보 입력 ㅡ> [로그인] 클릭 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내짐 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져서 사용자가 보내온 아이디와 비.. 3-2. 링크 만들기 하이퍼링크 다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능 외부 사이트나 외부 페이지로도 연결. 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다. 태그, href 속성 텍스트 속성 설명 href 링크한 문서나 사이트의 주소를 입력합니다. target 링크한 내용이 표시될 위치(현재 창 또는 새 창)을 지정합니다 download 링크한 내용을 보여 주는 것이 아니라 다운로드합니다. rel 현재 문서와 링크한 문서의 관계를 알려줍니다. hreflang 링크한 문서의 언어를 지정합니다. type 링크한 문서의 파일 유형을 알려줍니다. target 속성 – 새 탭에서 링크 열기 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때 현재 페이지는 그대로 유지하면서 새 창이나 .. 3-1. 이미지 웹 문서와 이미지 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다. 태그 웹 문서에 이미지를 삽입할 때 사용 태그의 속성 src 속성 이미지 파일 경로 웹 문서 파일의 위치를 기준으로 이미지 경로 지정 HTML과 이미지 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적음 images라는 하위 폴더에 이미지 파일이 있다면 하위 폴더까지 같이 적음 웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용 할 수 있다. alt 속성 이미지를 설명하는 대체 텍스트 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌. (웹 접근성) 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시 텍스트 자체를 이미지.. 2-4. 표를 만드는 태그 표(table) 자료를 보기 좋게 정리 표를 만드는 태그 ~ : 표 전체 ~ : 행 ~ : 셀, ~ 제목 셀 1행 1열(제목) 1행 2열 1행 3열 2행 1열(제목) 2행 2열 2행 3열 colspan, rowspan 속성 – 행 또는 열 합치기 이름 연락처 주소 자기소개 – 표 제목 제목이 위쪽 중앙에 표시됨 Modern Browser 브라우저 제조업체 다운로드 크롬(Chrome) Google https://www.google.com/chrome/ 국내에서 자주 사용하는 모던 브라우저 , – 표 제목 위치에 따라 표의 위나 아래에 제목 표시 국내에서 자주 사용하는 모던 브라우저 브라우저 제조업체 다운로드 크롬(Chrome) Google https://www.google.com/chrome/ , , – .. 2-3. 목록을 만드는 태그 , - 순서 없는 목록 각 항목 앞에 불릿이 붙여짐 CSS의 list-style-type 속성으로 불릿 수정 , - 순서 목록 각 항목 앞에 숫자가 붙여짐 태그의 속성 type 속성 : 불릿 앞의 숫자 조정 start 속성 : 중간 번호부터 수정 reserved 속성 : 역순으로 표시 1일차 해녀박물관 낚시체험 2일차 용눈이오름 만장굴 카약체험 여러 항목이 나열될 때 태그를 생략해도 다음에 오는 태그를 만나면 자동으로 그 전에 태그가 있는 것처럼 인식함 , , - 설명 목록 ‘제목’과 그에 대한 ‘설명’으로 이루어진 목록 과 , 태그 사용 하나의 에 여러 개의 값을 가질 수 있다 올레 1코스 코스 : 시흥 초등학교 옆 - 광치기 해변 거리 : 14.6km(4~5시간) 난이도 : 중 올레 2코스 코스 : .. 2-2. 텍스트를 한 줄로 표시하는 태그 , – 굵게 표시 - 중요한 내용이라서 강조해야 할 때 - 단순히 굵게 표시할 때 , – 이탤릭체로 표시하기 - 흐름상 특정 부분을 강조하고 싶을 때 - 단순히 이탤릭체로 표시할 때 태그 – 인용 내용 표시 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시 인용 내용 앞뒤에 따옴표(“ “) 추가됨 제주 이색 여행지 - 이중섭 거리 주말마다 '서귀포문화예술디자인시장 '이 열립니다. '아트마켓'이라고도 부르는데, 문화예술체험이나 공연관람을 할 수도 있고 작가들이 직접 만든 창작예술품 등을 판매하기도 합니다. – 형광펜 효과 태그로 묶은 부분의 배경색이 노랑으로 표시됨. , – 영역 묶기 - 줄 안에서 (인라인) 묶기 - 줄 바꿔 (블록) 단락으로 묶기 야외 텐트를 닮은 건축물 "테쉬폰" 아일랜드 출신 임피제.. 2-1. 텍스트를 묶어주는 태그 태그 – 제목 표시 기본형 : 제목 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그 크기 : h1 > h2 > h3 > h4 > h5 > h6 태그 – 줄 바꾸기 기본형 : 줄을 바꿀 위치에 태그를 사용. 닫는 태그가 없음 태그 – 분위기 전환 기본형 : 주제가 바뀔 때 분위기 전환. 수평 줄 생김 태그 – 텍스트 단락 기본형 : 텍스트 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐 태그 – 인용문 넣기 기본형 : 인용 내용 다른 텍스트보다 안으로 들여 써짐. 태그 – 입력한 그대로 표시 기본형 : 텍스트 소스에 표시한 공백이 그대로 표시됨. 프로그램 소스를 표시할 때 유용함. 제주 이색 여행지 제주 이색 여행지 야외 텐트를 닮은 건축물 "테쉬폰" 아일랜드 출신 임피제 신부가 195.. 이전 1 2 다음
