✅ 답안과 비교하여 스스로 HTML 문서 작성 개선점 짚어보기 완료(2022.02.10) [실습3]폼 관련 태그1. ✅ 답안에서는 에서 cols="20"을 굳이 작성하지 않은 모습이었다. 실제로 rows="3" 속성만으로 똑같이 출력되는 것을 확인했다. 또, 최상단에 '고객명'과 같은 텍스트들은 에 넣지 않고 그냥 바깥에 고객명 : 처럼 작성한 게 새로웠다. 내 문서에 굳이 바꿔적진 않았고, 이렇게도 작성이 가능하다는 것만 알아두고자 한다. 고객명 : 전화번호 : E-mail : 피자 선택 : 페퍼로니피자 하와이안피자 내인생피자 피자를 선택하세요 피자 사이즈 Small Medium Large 토핑 선택 베이컨 치즈 양파 버섯 희망 배송 시간 : 배송 시 요청사항 : [실습4]폼 관련 태그2. ✅ 중간에 ..
목차 1-1. 속성 action, method 1-2. method 속성의 get/post 3-1. ~~ 사용 예시 3-2. 속성 submit과 reset 3-3. 텍스트 관련 속성 3-4. 숫자 관련 속성 3-5. 날짜/시간 관련 속성 3-6. 속성 radio와 checkbox 3-7. 색상, 파일, 히든, 버튼 속성 과 5-1. 5-2. 와 6-1. 6-2. 6-3. ~ 사용 예시 1. 은 HTML에서 사용자가 입력할 양식을 제공하는 태그이다. 사용자 입력 양식이란 예를 들면 로그인 시 또는 회원가입 시에 id와 pwd를 입력하도록 하는 일종의 형식들을 말한다. form 태그 내의 input 태그들을 통해 사용자가 입력하는 정보를 서버로 넘기는 역할을 수행한다. 1-1. 속성 action, metho..
✅ 답안과 비교하여 스스로 HTML 문서 작성 개선점 짚어보기 완료(2022.02.09) [실습1]글자 목록 태그1. ✅ 불필요한 줄바꿈이나 들여쓰기는 자칫 코드를 더 복잡하게 보이게 만드는 것 같아 삼가야겠다. 특히 '프로그래밍 언어' 리스트들은 개행 없이 한 줄로 나눠쓰는 것이 알맞다. 리스트도 들여쓰기 없이 써도 된다. HTML5 정복 담당 강사 : 김햇살 이메일 : bettermyself@dream.or.kr 프로그래밍 언어 Java 데이터 베이스 Oracle 화면 구현 HTML5 CSS3 JavaScript JQuery 서버 개발 기술 JDBC Servlet JSP AJAX 소프트웨어 모델링 DB_Modeling UML 프레임워크 Spring My..
목차 하이퍼링크 태그 1-1. 하이퍼링크 기본 작성(문자) 1-2. 태그 이용해 링크 1-3. 한 페이지 내에서 점프 1. 하이퍼링크 태그 href 링크한 페이지의 id값이나 사이트 주소 지정 target(_blank or _self) 링크 페이지에 표시될 위치 지정(새 창 or 현재 창) download 링크한 페이지를 표시하지 않고 다운로드하도록 지정 rel 현재 페이지와의 관계 지정 hreflang 링크한 페이지의 언어를 지정 type 페이지의 파일유형 지정 는 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동시키는 태그이다. 외부 사이트에 연결하거나 문서 내부간 이동이 가능하다. 1-1. 하이퍼링크 기본 작성(문자) 글자태그 글자태그라는 텍스트 문구에 주소값이 지정된 형태로 출력되며, 클릭 시..
목차 이미지 태그 1-1. 경로 src 1-2. 이미지 설명 alt 1-3. 사진 너비와 높이 width, height 1-4. 이미지맵 usemap 2. 미디어 태그 와 2-1. 오디오 태그 2-2. 비디오 태그 1. 이미지 태그 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그이다. src 삽입할 이미지 경로를 지정하는 속성 alt 이미지에 대해 설명하는 텍스트 속성 width, height 이미지 크기를 설정하는 속성(너비, 높이) 1-1. 경로 src src 속성에 경로를 설정하여 이미지 파일을 불러온다. 설정 방식에는 ① 절대경로 방식, ② 상대경로 방식이 존재한다. ① 절대경로 방식은 파일이 저장된 물리적 위치 전체를 말한다. 즉 D드라이브 폴더 안에 담겨있다면 D:\...부터 파일 확장자..
목차 페이지 영역 분할 태그 또는 1-1. 1-2. 다른 웹 페이지 추가 2-1. 속성 시맨틱 태그 3-1. HTML5 페이지 구조 3-2. 시맨틱 태그 사용 예시 ❗ 여기서 사용한 지정은 두 가지 방법이다. ① 태그마다 id를 부여하고, 내부에 을 작성한다. ② 해당 시작태그에 style 속성 및 속성값으로 설정한다. 1. 페이지 영역 분할 태그 또는 1-1. 태그는 이미 존재하는 태그 다음 줄에 영역이 설정된다. 블록(block) 형식을 따른다. 즉 공간을 수평으로 분할하며, 페이지상에서 보았을 때 한 줄을 다 차지한 모양새이다. 영역간에 딱 붙어서 이어진다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 시작태그에서 속성 및 ..
목차 테이블 1-1. 테이블 관련 태그 1-2. 테이블 관련 속성 1-3. 테이블 구조 설정 태그 테이블 예시 2-1. 기본 테이블 2-2. 테이블 행과 열 병합 2-3. 테이블 구조 설정 1. 테이블 웹 문서에서 자료 정리를 위해 주로 쓰인다. 행과 열로 구성돼 있고, 행과 열이 만나는 지점을 셀이라고 칭한다. 1-1. 테이블 관련 태그 1개의 행을 만드는 태그 1개의 열을 만드는 태그 열의 제목을 표시하는 태그 ※ 자동 가운데 정렬+굵게 표시 테이블의 제목 또는 내용을 추가하는 태그 ※ 기본 출력 위치는 테이블 위 정중앙 1-2. 테이블 관련 속성 태그의 border 속성 통해 표(table)의 테두리 두께를 지정한다. 태그의 rowspan 속성은 지정한 개수만큼 행을 병합한다. 태그의 colspan..
목차 순서 없는 목록 태그 순서 있는 목록 태그 2-1. 기본 순서 표기 2-2. 영문 소문자로 표기 2-3. 영문 대문자로 표기 2-4. 로마 숫자 소문자로 표기 2-5. 로마 숫자 대문자로 표기 2-6. 시작 값 변경 2-7. 역순으로 항목 표시 정의 목록 태그 ✅ 리스트 요소 등록에는 태그를 사용한다. 1. 순서 없는 목록 태그 HTML5 CSS3 JavaScript 순서가 필요하지 않은 목록을 만들 때 사용한다. 리스트 앞에 특정 모양이 출력된다. 디폴트는 위 예시와 같은 검은색 불릿(⦁)이며, CSS 이용해 수정할 수 있다. 2. 순서 있는 목록 태그 순서가 있는 목록을 만들 때 사용한다. 속성으로서 순서 형식을 정하는 type, 시작 순서를 명시하는 start, 역순으로 표시하는 reverse..
목차 제목 개행 페이지에 수평선 구분 단락 구분 또는 4-1. 4-2. 4-3. 와 비교 예시 글자 형태 관련 태그 5-1. 글자 강조 또는 5-2. 글자 기울임 또는 5-3. 인용문구 또는 5-4. 형광펜 5-5. 밑줄 5-6. 작은 글씨 5-7. 아래 첨자 와 위 첨자 5-8. 취소선 5-9. 툴팁 출력 5-10. 참고한 웹 문서 표시 ❗ .html 문서 최상단에 HTML5 문서 형식 선언한다.
목차 웹(Web) 1-1. 웹 표준 1-2. 웹 처리 과정 1-3. 웹 특징 1-4. 반응형 웹 HTML 2-1. HTML5 특징 2-2. HTML 구성 요소 2-3. HTML 주의사항 HTML 기본 구조 3-1. 3-2. 3-3. Visual Studio Code 4-1. vscode 설치 4-2. extension 추가 1. 웹(Web) 인터넷 통신망 위에서 작동하는 서비스에는 웹, FTP, 이메일 등등 그 종류가 다양하다. 그 중에서도 웹은 가장 널리 사용되어온 인터넷 서비스이다. 웹이란, 인터넷 통신망 위에서 작동하는 서비스 중 하나로 인터넷에 연결된 컴퓨터 통해 사람들간에 정보 공유가 일어나는 공간을 말한다. 인터넷의 등장은 1960년대로 거슬러 올라간다. 팀 버너스리(Tim Berners-Le..
