HTML & CSS
-
[HTML] 공간 태그(div & span)HTML & CSS 2023. 9. 8. 10:47
div & span 태그 설명 div 블록 형식으로 공간 분할 span 인라인 형식으로 공간 분할 div 각 태그가 한 행을 차지해서 공간 분활 style="backgroud-color: 를 사용하여 공간 영역을 눈으로 볼수있게 표현 div 공간 영역1 div 공간 영역2 div 공간 영역3 div 공간 영역1 div 공간 영역2 div 공간 영역3 SPAN 각 태그가 글자 크기만큼 공간 차지 해서 왼쪽에서 오른쪽으로 쌓임 style="backgroud-color: 를 사용하여 공간 영역을 눈으로 볼수있게 표현 span 공간 영역1 span 공간 영역2 span 공간 영역3 HTML 삽입 미리보기할 수 없는 소스
-
[HTML] FORM 양식 태그HTML & CSS 2023. 9. 7. 17:35
FORM 양식 태그 FORM 양식 태그에는 input 태그를 제외한 다양한 태그가 있다. 태그 속성 설명 textarea 텍스트를 입력할 수 있는 박스 생성 cols 너비 지정 rows 높이 지정 select 선택 양식 생성 optgroup 옵션 그룹화 option 옵션 생성 fieldset 입력 양식의 그룹 지정 legend 입력 양식 그룹의 이름 지정 사용 결과 textarea 태그 사용 select 태그 사용 seleted속성 미리 선택된 값을 지정하는 속성 option 태그를 활용하여 목록을 표시한다. 김밥 떡볶이 순대 어묵 김밥 떡볶이 순대 어묵 optgroup 태그 사용 option 태그를 활용하여 목록을 표시한다. 목록에 그룹명을 부여해서 화면에 표시 html css javascript ja..
-
[HTML] Form 양식 태그 inputHTML & CSS 2023. 9. 7. 16:44
Form 양식 태그 사용자에게 정보를 입력받는 코드 GET 방식 : 간단한 데이터 전송, URL 주소이용 POST 방식 : 보안 및 많은 양의 데이터 전송 시 사용 태그 설명 name 폼의 이름 지정 action 폼 데이터를 처리할 웹 서버 응용프로그램의 이름 method GET, POST 폼 데이터를 웹 서버로 전송하는 형식 input 태그 태그는 전체 양식을 의미 화면에 보이지 않는 추상적인 태그 사용자가 실제 사용하는 태그는 태그 등 type 속성을 통해 종류, name을 통해 데이터의 이름, value를 통해 기본값 지정 태그 타입(type) 설명 input text 일반문자 password 비밀번호 submit 양식 제출용 버튼 reset 양식 초기화용 버튼 radio 한개만 선택할 수 있는 컴..
-
[HTML] 비디오,오디오 태그HTML & CSS 2023. 9. 7. 14:08
비디오,오디오 태그 태그와 함께 속성을 지정해서 웹페이지 에서 사용할 비디오,오디오를 지정한다. 태그 속성을 이용해 비디오을 상태를 지정 가능 태그 속성 설명 audio, video src 음악, 비디오 파일의 경로 지정 preload 음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정 autoplay 음악, 비디오의 자동 재생 여부 지정 loop 음악, 비디오의 반복 여부 지정 controls 음악, 비디오 재생 도구 출력 여부 지정 video width 비디오의 너비 지정 height 비디오의 높이 지정 코드 블록 브라우저 마다 지원하는 코덱이 다르기 때문애 한가지 형식만 사용하면 브라우저에 따라 작동하지 않을수도 있다 여러가지 형식을 지정해야 여러 브라우저에서 비디오 또는 오디오 가 작..
-
[HTML]테이블 태그HTML & CSS 2023. 9. 7. 13:53
테이블 태그 표를 만들어 주는 태그 테이블 태그의 속성을 사용하여 표 디자인을 변경할 수 있음 태그 설명 table 테이블 태그 tr 행 th 테이블 헤더 td 표의 일반 셀 생성(열) 테이블 태그의 속성 태그 속성 설명 table border 표의 테두리 두께 지정 tr colspan 셀의 너비 지정 ( 열 병합 ) th,td rowspan 셀의 높이 지정 ( 행 병합 ) 실행 결과 월 화 수 목 금 2교시 영어 국어 과학 미술 기술 th 태그를 사용한 요일은 b태그 효과가 적용 border = 1로 설정해서 표테두리 생성 월 화 수 목 금 2교시 영어 국어 과학 미술 기술 boder를 사용하지 않으면 아래와 같이 테두리가 생성되지 않음 월 화 수 목 금 2교시 영어 국어 과학 미술 기술
-
[HTML] 글자 모양 태그HTML & CSS 2023. 9. 7. 12:31
글자 모양 태그 글자 모양 태그 태그 설명 굵은 글자( bold ) 기울여진 글자( italic ) 작은 글자 아래 첨자( subscript ) 위 첨자( superscript ) 밑줄 글자( insert ) 취소선이 그어진 글자( delete ) 줄긋기 사용 가능 사용 결과 p 태그를 사용했습니다 p 태그를 사용했습니다 p태그bold 효과 사용했습니다 p태그bold 효과 사용했습니다 p 태그 기울림 효과를 사용했습니다 p 태그 기울림 효과를 사용했습니다 h5태그 스몰 효과 적용 h5태그 스몰 효과 적용 p태그 사용sub 사용했습니다 p태그 사용sub 사용했습니다 p태그 사용sup 사용했습니다 p태그 사용sup 사용했습니다 p태그 ins 사용 p태그 ins 사용 p태그 del사용 p태그 del사용