전체 글
-
시멘틱 태그(<section>,<header>,<footer>,<aside>,<nav>)프로그래밍 언어/HTML 2024. 10. 16. 17:26
1. 시멘틱 태그란?2. 시멘틱 태그 종류 시멘틱 태그란?"의미론적 태그"를 의미한다.해당 태그를 추가함으로써, 웹페이지의 변화를 주는 것은 아니다하지만, 가독성이 높아지고 구분되어있는 특징으로 html 유지보수가 쉬워진다또한, 검색엔진의 페이지 탐색에도 도움을 준다 시멘틱 태그 종류 : 컨텐츠 구분 , div와 유사 : 컨텐츠 구분, section보다 더 구체적 내용을 담음 : 보조 정보 (본문과 상관없는 부분), 광고 / 배너가 이에 해당 : 내비게이션 또는 본문 윗부분에 해당하는 부분을 일컫음 : 홈 bar 와 같은 웹페이지 맨 상단에 위치하는 내비게이터 : 웹페이지 마지막 부분 위와같이, 시멘틱태그의 경우 웹페이지에 어떠한 영향도 주지 않는다다만, 유지보수의 편리함과 검색엔진의 도움을 주는 효..
-
외부 파일 및 문서 삽입 (<object>,<embed>,<iframe>)프로그래밍 언어/HTML 2024. 10. 16. 17:14
, , HTML5 지원pdf 파일을 가져와서 표현type : "application/pdf" 형식 지정data : pdf 파일 경로width : 폭설정height : 높이 설정비디오 표현type : video/quicktype 형식 지정src : video 파일 경로width : 폭설정height : 높이 설정다른 페이지의 내용 가져오기src : 가져올 URL나머지 동일 주의할점아직 html5를 지원하는 브라우저가 없을 수 있기에 동작하지 않을 수 있다
-
form 및 여러 입력 태그 (<form>,<input>,<select>,<textarea>,<progress>)프로그래밍 언어/HTML 2024. 10. 16. 13:49
1. Form2. 입력 3. input 이외 입력 태그 Formmethod : 해당 폼을 서버로 전송하는 방법 ( Get 또는 Post 방식 )action : 해당 맵핑되어있는 URL로 전송type : 텍스트, 패스워드 등, 유형에 따라 결정id : label 과 연계 또는 해당 태그의 고유 속성값 부여name : 서버로 전송시, 해당 값을 보고 판단 (기준) 태그와 같이 사용되며, 해당 input 박스의 텍스트 설명으로 주로 사용됨for : id속성과 동일하게 사용하여 맵핑 일반 속성placeholder : 입력전에 표시되는 텍스트text텍스트 입력maxlenth : 최대 길이 설정size : 입력 공간 size 설정password입력시 비공개 처리number개수 설정 가능min : 최소 개수max..
-
목록 및 표 만들기 (<ol>,<ul>,<li>,<table>,<tr>,<th>,<td>...)프로그래밍 언어/HTML 2024. 10. 16. 12:42
1. 목록 만들기2. 테이블 만들기목록 만들기 ( , )Ordered Liststart : 순서의 시작 표시type : a , 1 .. 등 순서 표기를 위한 형식 지정Unordered List순서가 없는 리스트 테이블 만들기border : 표 둘레 두께 지정표제목 지정 , , : 시각적으로 html 문서에서 나타내기 위한 용도 ( 넣지 않아도 됨 ) : 표의 첫번째 행 ( 표의 제목에 해당하는 부분) : 표의 내용 부분 : 표 마지막 요약 부분 (없는 경우도 많음)행 (가로) 를 나타냄첫번째 행을 나타내는 부분 ( 행안에서 제목을 나타내는 부분) 행(가로) 안에서 값을 나타내는 부분
-
이미지 및 링크 (<img>,<picture>,<a>)프로그래밍 언어/HTML 2024. 10. 16. 12:26
1. 이미지 2. HTML5 이미지 태그 3. 링크 태그 이미지src : 이미지 파일 경로 ( 상대 경로 / 절대 경로 )alt : 이미지 파일을 불러 올 수 없을때, 나오는 문구 작성width : 이미지 크기 지정 (가로)height : 이미지 크기 지정 (세로) HTML 5 전용 이미지여러 이미지들을 한번에 묶는 역할 태그를 이용하여, 이미지마다 크기를 지정할 수 있음이미지 다음줄로 자동 개행을 하여, 이미지의 설명 문단을 표현 링크a 태그를 이용하여 원하는 URL 로 맵핑 가능속성_self : 현재 탭에서 해당 링크로 이동_blank : 새로운 탭에서 해당 링크로 이동
-
컨테이너 태그, 텍스트 강조(<div>,<span>,<strong>,<em>,<mark>)프로그래밍 언어/HTML 2024. 10. 16. 11:54
1. 텍스트 강조 (strong, em, mark)2. 컨테이너 태그 (div, span)텍스트 강조 : 텍스트를 진하게 표시 : 텍스트 기울어짐 표시 : 텍스트 형광펜 강조 컨테이너 태그"컨테이너 태그"라고 불림 그룹별로 묶는 역할, 따로 웹페이지 상에서는 보이지 않음속성id스크립트 및 스타일 적용시 특정 요소 식별자한 html 문서 내에서 한번만 사용해야함class 요소를 그룹별로 묶는 식별자 역할html 문서내에서 여러번 사용 가능스크립트 및 스타일 적용 가능태그 안에 인라인으로 작성 가능"인라인 컨테이너"라고 불림
-
HTML 코드 개행 및 공백 ( <br> , Entity Code, <pre> )프로그래밍 언어/HTML 2024. 10. 16. 11:26
1. 개행2. 공백 개행 ( ) 태그를 이용하여 개행 표시 공백 ( Entity Code ) 일반적으로, 공백의 경우 여러개를 사용할 수 없다그래서, 엔티티 코드 (특수문자 표현)를 사용& 로 시작 ;로 끝나는 표현 방식 표시할문자엔티티코드표시할문자엔티티코드공백 '‘ / ’&&<"" / “>>··©© 있는 그대로 표현 ( )pre 태그를 이용하여, 있는 그대로 표현