프론트엔드 프로그래밍/HTML
-
HTML5 시멘틱 구조 태그프론트엔드 프로그래밍/HTML 2022. 1. 26. 14:26
HTML5 시멘틱 구조 태그 - 시멘틱(Semantic) : 의미의, 의미론적인 - 역할과 기능에 맞는 요소로 영역 구분해서 사용 - 각 요소(태그)가 의미가 있다는 것 - : 헤더 (제목) - : 내비게이션 (메뉴) - : 사이드 바 - : 컨텐츠 (내용) - : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) - : 푸터 (주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 - HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 - 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 HTML5 시멘틱 구조의 장점 - 소스만으로도 문서 내용 쉽게 이해 - 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 ..
-
입력 양식 태그 <form>, <label>, <input> ...프론트엔드 프로그래밍/HTML 2022. 1. 26. 14:22
입력 양식 태그 - 입력 양식 (form)을 만들 때 사용하는 태그 - - - - - 태그 - 입력 양식을 구성하는 기본 골격 제공 - - 다양한 입력 양식 태그 포함 - - 태그 - 폼요소에 캡션(라벨) 붙이기 - 태그 - 데이터를 입력 받기 위한 태그 - 태그의 type 속성에서 사용 가능한 유형 라디오 버튼 (radio) - 여러 항목 중에 한 개를 선택할 때 사용 - 1학년 - 4학년 - name : 그룹 이름 - value : 선택한 버튼의 값 (서버로 전송되는 값) - checked : 처음부터 선택된 상태로 만들기 모든 입력 태그에서 - name 속성 : 서버에 전달될 때 서버에서 인식하는 이름 - id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름 체크박스(ch..
-
HTML 기본 태그프론트엔드 프로그래밍/HTML 2022. 1. 26. 11:37
기본 태그 - HTML 문서 구조 태그 - 텍스트 관련 태그 - 하이퍼링크 태그 - 목록 태그 - 테이블 테그 - 이미지 / 이미지 맵 태그 - 문서 삽입 태그 - 오디오 / 비디오 태그 - 입력 양식 태그 - 공간 분할 태그 - HTML5 시멘틱 구조 태그 문서 구조 태그 - - - 태그 - - 문서의 시작과 끝 표시 - 크게 두 부분으로 구성되어 있음 - - 제목 표시 (크기1) 제목 표시 (크기2) 제목 표시 (크기3) 제목 표시 (크기4) 제목 표시 (크기5) 제목 표시 (크기6) 텍스트에 장식 효과를 주는 태그 - text.html h3 : 텍스트에 장식 효과를 주는 태그들 b : 굵은 표시 (텍스트 강조) em : 텍스트 강조 i : 이탤릭체 (텍스트 강조) 텍스트sub : 아래 첨자 태그 -..
-
HTML이란 + 태그에 대해프론트엔드 프로그래밍/HTML 2022. 1. 26. 11:29
HTML 문서 작성 HTML (Hyper Text Markup Language) - 웹 브라우저에서 하이퍼텍스트 기능을 구현하는 웹 페이지 작성 언어 하이퍼 텍스트 - 문서간에 서로 링크가 설정되어 있어서 - 링크 설정 부분을 클릭하면 해당 문서로 이동하는 기능 태그(tag) - HTML에서 사용하는 명령어 (문자열 기호) - 원하는 모양과 형태로 브라우저에게 명령을 내림 - 태그 사용 형식 - 대부분 시작 태그()와 종료 태그()를 함께 사용 - 출력 내용 - 문서 제목 - 문단 형식으로 출력 - 출력 내용 - 이동 - 예외로 종료 태그 없이 혼자 사용 태그 - : 줄 바꿈 - : 이미지 삽입 - : 수평선 삽입 - 태그는 대소문자 구별 없이 사용