목차
접기
728x90
반응형
자주 사용하는 프론트엔드 함수
- alert()
- confirm() : 매개변수로 String(문자열) 타입을 가지고 리턴값이 bool(참 : true,1 / 거짓:false, 0) 값에 따라 프로그램 제어할 수 있음.
기억해야 하는 html 태그
- p : p태그는 문장을 나타내는 태그이다. 하나의 단락을 차지한다.
- span : span태그는 단어나 문장의 글자만 선택을 해준다. br태그는 줄바꿈을 해주는 태그이다.
- br : 줄바꿈
- hr : 수평 줄 삽입
- a (anchor) : 다릅 웹 페이지나 웹 페이지 내부의 특정 위치로 이동
- href : hyper reference를 의미
- href="#test" : id 지정한 태그 위치로 이동할 수도 있다.
- _self : 기본창(본인 창) default
- _parent : 부모 프레임에 연결해주는
- mailto:EMAIL
- id="#top" : html5 내부적으로 인식을 하여 문서의 맨 처음으로 이동을 시켜준다.
- b : 굵은 글자
- i : 기울어진 글자
- strong : 굵은 글자
- small : 작은 글자
- sub : 아래 첨자
- sup : 위 첨자
- ins : 밑줄 글자
- del : 취소선이 그어진 글자
목록 태그 (네비게이션 메뉴)
- ul : 순서가 없는 목록 생성(넘버로 매겨지지 않는)
- ol : 순서가 있는 목록 생성(숫자로 순서가 매겨지는 / 숫자 아닌 다른 순번 언어로도 가능)
type이라는 속성으로 숫자외의 다른 언어로 순서를 매길 수 있다.start라는 속성을 사용하면 원하는 숫자부터 목록을 출력할 수 있다.
- li : 목록 요소 생성
테이블 태그
- table : 표 삽입
- border : 표의 테두리 두께 지정
- tr : 표에 행(table row) 삽입
- align : "center"
- 셀 안의 텍스트 위치를 조정할 수 있다.
- th : 표의 제목 셀(table heading) 생성
- colspan : 셀의 너비 지정
- td : 표의 일반 셀(table data) 생성
- rowspan : 셀의 높이 지정미디어 태그
- 이미지, 오디오, 비디오 등 멀티미디어를 넣을 때 사용
- audio, video
- src : 음악, 비디오 파일의 경로 지정
- preload : 음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정
- autoplay : 음악, 비디오의 자동 재생 여부 지정
- loop : 음악, 비디오의 반복 여부 지정
- controls : 음악, 비디오 재생 도구 출력 여부 지정
- video
- width : 비디오의 너비 지정
- height : 비디오의 높이 지정
- img
- src : 이미지의 경로 지정
- alt : 이미지가 없을 때 나오는 글자 지정
- width : 이미지의 너비 지정
- height : 이미지의 높이 지정
웹 브라우저 제약이 없도록 음악 삽입하는 방법
- source 태그 사용
- 웹 브라우저마다 지원하는 음악 파일 확장자가 다른 문제 해결
- audio 태그나 video 태그 내부에 입력
예시)type 속성을 입력하지 않으면 웹 브라우저가 음악 파일을 다운로드한 후
재생 가능한 파일인지 확인하는 작업이 필요하므로 꼭 지정하도록 한다. <body> <audio controls="controls"> <source src="kalimba.mp3" type="audio/mp3"> <source src="kalimba.ogg" type="audio/ogg"> </audio> </body>
웹 브라우저 제약이 없도록 동영상 삽입하는 방법
예시)
<body>
<video controls="controls">
<source src="kalimba.mp4" type="audio/mp4">
<source src="kalimba.webm" type="audio/webm">
<video>
</body>동영상을 불러오는 동안 다른 이미지 보여주기
- poster 속성
- video 태그의 속성
- 동영상을 불러오는 동안 사용자에게 보여 줄 이미지를 지정
- 이미지 경로 입력
예시) <body> <video controls="controls" poster="http://placehold.it/640*360"> <source src="kalimba.mp4" type="audio/mp4"> <source src="kalimba.webm" type="audio/webm"> <video> </body>
html의 특수문자
- : 공백
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 중첩 태그 사용 예시 (0) | 2021.05.31 |
|---|---|
| video 태그 재생 전 이미지 삽입하는 방법(썸네일 만드는 방법) (0) | 2021.05.31 |
| 프론트엔드 개발을 도와줄 크롬 '확장 프로그램' / Web Developer (0) | 2021.05.31 |
| HTML, CSS, Javascript 본격 공부 시작! (0) | 2021.05.31 |
| text-underline 간격을 조금이라도 띄우는 방법 (0) | 2021.05.19 |