본문 바로가기

✒️ GURU/HTML523

[HTML5] 11. 웹 폼 + <input>, <select>, <textarea> 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + <datalist> + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기 11. 웹 폼 + , , 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기 #웹 폼 : 웹 페이지에서 사용자 입력을 받는 폼으로 로그인이나 등록, 예약, 검색, 쇼핑 등에 사용된다. - 폼 요소 : , , 등의 태그를 사용한다. # 정보 검색 과정 및 방식과 폼 전송 과정 이해 + 1은 프론트 엔드, 2~5는 서버(백엔드)의 역할 1. 네이버 사이트에 접속 2. 입력 창에 'Elvis' 입력-> '검색' 버튼 누르면 브라우저는 태그의 action="https://search.naver.com/search.naver"을 참고하여 search.naver.com 서버에 접속 후 search.naver.. 2022. 7. 18.

[HTML5] 10. 여러 가지 시맨틱 태그들 + <figure>, <summary>, <details> 태그의 활용 + 시맨틱 인라인 태그 10. 여러 가지 시맨틱 태그들 + , , 태그의 활용 + 시맨틱 인라인 태그 # 문서 구조화 시 권장 사항 - 웹 페이지 전체를 구조화 후 시맨틱 태그로 분할 - 웹 페이지 전체 제목과 소개는 태그로 작성 - 본문은 으로 묶고, 본문 내 각 절이나 영역은 로 작성 - 링크나 메뉴들은 태그로 작성 - , , , 등에는 헤딩 태그( ~ ) 를 이용하여 제목 붙이기 - 배경 음악을 연주하는 태그는 영역에 삽입하기 - 문서의 모양( , , , 의 배치 )는 CSS3 스타일 시트로 꾸미기 # 여러 가지 시맨틱 태그들 시맨틱 블록 태그 시맨틱 인라인 태그 - : 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화나 소스 코드 등을 통상적으로 '그림'으로 표현한다. - : 상세 정보를 담는 태그 - : 로 구성되.. 2022. 7. 17.

[HTML5] 9. 문서의 전형적 구조 + HTML5의 문서 구조화 + 시맨틱 태그와 시맨틱 웹 9. 문서의 전형적 구조 + HTML5의 문서 구조화 + 시맨틱 태그와 시맨틱 웹 # 기존 HTML 의 한계 : 웹 문서의 구조를 표현하는 태그가 없었음 - 태그나 태그로 구조화되어 보이게 작성 - HTML 페이지의 소스를 보면 문서 구조 파악 불가능 # 문서 구조화의 이유 : 검색 엔진이 좋아하는 웹 페이지 작성의 필요성이 대두 - 정보 탐색이 중요해짐 - 사물인터넷으로 IT 기기들이 스스로 정보를 검색할 수 있게 됨 - 사용자가 만든 웹 페이지의 가치를 극대화할 수 있게 하기 위함 -> 탐색이 쉽도록 작성 # 시멘틱 웹 : 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹 - 기존의 태그 : , , , 등의 태그를 사용했으나 문서의 의미나 구조 전달이 어려웠다. - 시맨틱 태그 : 문서의 구조와.. 2022. 7. 17.

[HTML5] 8. 인라인 프레임 <iframe> + 브라우저 윈도우와 인라인 프레임의 계층 관계 8. 인라인 프레임 + 브라우저 윈도우와 인라인 프레임의 계층 관계 # 태그와 인라인 프레임 - HTML 페이지 안에 또 다른 HTML 페이지를 삽입 ex) 200x150 크기의 인라인 프레임에 iframe.html 출력 브라우저는 iframe 태그를 지원하지 않습니다. - src : 출력할 웹 페이지의 URL 주소 - srcdoc : 직접 HTML 태그로 작성된 텍스트로서 출력될 내용. srcdoc 속성이 있다면, src 속성은 무시된다. - name : 프레임 윈도우의 이름. 다른 웹 페이지에서 target 속성 값으로 사용됨 - width : 프레임의 폭, 픽셀 값으로 디폴트 값은 300이다. - height : 프레임의 높이이자 픽셀 값으로, 디폴트 값은 150이다. # 2개의 인라인 프레임을 가.. 2022. 7. 17.

[HTML5] 7. <a> 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target 속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 <audio>, <video> 태그 7. 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target 속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 , 태그 # 하이퍼링크와 태그 - 하이퍼링크 : 다른 HTML 페이지와의 연결 고리로, 이미지나 텍스트로 작성한다. 같은 웹 사이트 안의 페이지(상대 경로)는 물론 다른 웹 사이트 안의 HTML 페이지에 모두 연결이 가능하다. - 항해 : 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것 - href : 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커의 이름 - target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정 # 태그의 href 속성에 하이퍼링크 작성 - 같은 웹사이트 안에 있는 웹페이지 연결 (텍스트 작성) 클릭하면 사진 페이.. 2022. 7. 16.

[HTML5] 6. <table> 태그와 표 생성 + 이미지를 가지는 표 생성 + 셀 합치기 with rowspan & colspan 6. 태그와 표 생성 + 이미지를 가지는 표 생성 + 셀 합치기 with rowspan & colspan # 표 생성에 사용되는 태그들 - : 표 전체를 담는 컨테이너 - : 표 제목 - : 헤딩 셀 그룹 - : 바닥 셀 그룹 - : 데이터 셀 그룹 - : 행 (여러 , 포함) - : 열 제목(헤딩) 셀 - : 데이터 셀 # 행과 열 만들기 -표는 여러 행으로 구성되고, 한 행은 여러 셀로 구성된다. - , , 은 여러 개의 을 포함할 수 있다. 이름 HTML CSS 황기태 80 70 ... # 셀 합치기 - 가로로 합치기 : colspan + bgcolor 은 배경색을 의미함 - 세로로 합치기 : rowspan # 이미지를 가지는 표 만들기 2022. 7. 16.

이전 1 2 3 4 다음

티스토리툴바