목차 선택자 1-1. 선택자 종류 1-2. 선택자 우선순위 모든 선택자(전체 선택자) 태그 선택자 아이디 선택자 클래스 선택자 속성 선택자 6-1. 속성값=특정값 일치 6-2. 속성값~=특정값 공백 전후 포함 6-3. 속성값|=특정값 - 이전 포함 6-4. 속성값^=특정값 시작 6-5. 속성값$=특정값 끝 6-6. 속성값*=특정값 어디든 포함 자손/후손 선택자 7-1. 자손 선택자 7-2. 후손 선택자 동위 선택자 8-1. 동위선택자A + 바로 뒤에 있는 선택자B 1개 8-2. 동위선택자A ~ 뒤따르는 선택자B 전부 반응 선택자 9-1. 선택자:active 클릭 9-2. 선택자:hover 마우스오버 9-3. cursor 속성 상태 선택자 10-1. input[속성:속성값]:checked 10-2. inp..
✅ 답안과 비교하여 스스로 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..
목차 하이퍼링크 태그 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. 테이블 관련 속성 1-3. 테이블 구조 설정 태그 테이블 예시 2-1. 기본 테이블 2-2. 테이블 행과 열 병합 2-3. 테이블 구조 설정 1. 테이블 웹 문서에서 자료 정리를 위해 주로 쓰인다. 행과 열로 구성돼 있고, 행과 열이 만나는 지점을 셀이라고 칭한다. 1-1. 테이블 관련 태그 1개의 행을 만드는 태그 1개의 열을 만드는 태그 열의 제목을 표시하는 태그 ※ 자동 가운데 정렬+굵게 표시 테이블의 제목 또는 내용을 추가하는 태그 ※ 기본 출력 위치는 테이블 위 정중앙 1-2. 테이블 관련 속성 태그의 border 속성 통해 표(table)의 테두리 두께를 지정한다. 태그의 rowspan 속성은 지정한 개수만큼 행을 병합한다. 태그의 colspan..
목차 제목 개행 페이지에 수평선 구분 단락 구분 또는 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 문서 형식 선언한다.
