오봉이와 함께하는 개발 블로그

FrontEnd_day3 정리 (2021.12.06 월요일) 시멘틱 구조 예제 index.html 로그인 이벤트 장바구니 고객센터 회원가입 메뉴 서브 메뉴 슬라이드 쇼 메인 내용 회사 정보 index.css @charset "UTF-8"; #wrap { margin:0 auto; width:1000px; background-color:white; color:white; } header { background-color:#0C3; text-align:right; padding-right:20px; height:40px; line-height:40px; } #mainMenuBox { margin-top:10px; margin-bottom:10px; height:35px; line-height:35px; ba..

FrontEnd_day1 정리 (2021.12.02 목요일) HTML5 시멘틱 구조 태그 시멘틱(Semantic) : 의미의, 의미론적인 역할과 기능에 맞는 요소로 영역 구분해서 사용 각 요소(태그)가 의미가 있다는 것 : 헤더 (제목) : 내비게이션 (메뉴) : 사이드 바 : 컨텐츠 (내용) : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) : 푸터 (주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 HTML5 시멘틱 구조의 장점 소스만으로도 문서 내용 쉽게 이해 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 ..

FrontEnd_day1 정리 (2021.12.02 목요일) 공간 분할 태그 block 형식으로 공간 분할 inline 형식으로 공간 분할 div1 div2 div3 div4 span1 span2 span3 span4

FrontEnd_day1 정리 (2021.12.02 목요일) 입력 양식 태그 입력 양식(form)을 만들 때 사용하는 태그 모든 입력 태그에서 name 속성 : 서버에 전달될 때 서버에서 인식하는 이름 id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름 입력 양식을 구성하는 기본 골격 제공 다양한 입력 양식 태그 포함 폼 요소에 캡션(라벨) 붙이기 데이터를 입력 받기 위한 태그 속성 name : 입력상자의 이름(속성값 : 문자열) type : 입력 유형(속성값 : text, password, checkbox, radio) size : 입력 상자의 크기(속성값 : 숫자) value : 초기값/태그가 지닌 값(속성값 : 문자열) maxlength : 최대 길이(속성값 : 숫자) ..

FrontEnd_day1 정리 (2021.12.02 목요일) 미디어 태그 오디오 태그 오디오 파일 재생 속성 src : 경로 preload : 재생 전 모두 다운로드 autoplay : 자동 재생 loop : 반복 재생 controls : 재생 도구 출력 미디어 파일 지정 여러 미디어 파일을 한꺼번에 지정 브라우저에 따라 지원하는 오디오나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우 일부 브라우저에서 지원하지 않는 경우 발생 여러 유형의 미디어 파일 지정해야 함 오디오 태그 예제 audio.html 비디오 태그 mp4, ogv, webm 파일 형식 속성 src : 경로 preload : 재생 전 모두 다운로드 autoplay : 자동 재생 loop : 반복 재생 controls : 재생 도..