css3
![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(3) audio, iframe](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FoLJHf%2Fbtrr5VEcjnN%2FAAAAAAAAAAAAAAAAAAAAADWmQ8Z9dNuDrftkykvqZemX88L8-1hj_nmo__5-Jaj6%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DtBVF%252Fm96xHTRRfX19%252BVaZga%252Fcnc%253D) 
                    
                    [2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(3) audio, iframe
이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 audio : video태그와 마찬가지로 한 방에 정리할 수 있는 태그. 과거 N사 블로그의 블로그배경음 서비스 그 기능을 떠올릴 수 있음 (지금은 없어진 기능) iframe : video태그와의 차이 = 해당 영역에 프레임을 쳐놓고 그 안에다 타 사이트의 동영상 등을 불러올 수 있음 inline frame의 약어. 자주 보지 못 한 유형의 태그. 어쨌든 하나의 블록요소로 보자면, 초과 될 경우 스크롤 기능이 지원된다는 특성이 있는데 이 안에 텍스트를 불러올 경우에는 차라리 div에 overflow scr..
![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(2) video](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcwpLHt%2Fbtrr1nI9BkY%2FAAAAAAAAAAAAAAAAAAAAAFueL6yha_fqJGb-7dtRYwxDoLLMOb_UegYTC-52jXqb%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DMt%252FxYfKgCaARcvygz0coT3GPbqY%253D) 
                    
                    [2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(2) video
이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 작성은 video 따로, source 따로 했지만 굳이 이렇게 나눠서 하지 않아도 된다. 출력물 더보기 동일한 내용을 한방에 정리한 태그 이게 더 깰끔
![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(1)-{1} form 예제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbzUOux%2Fbtrr7pyeGYR%2FAAAAAAAAAAAAAAAAAAAAAEtKrUdzqpMcAuo_wa7Rtl88OS0giYNmtQwFBbrgFuVy%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DQniGirZQX5Q35Y6LYycQoUfc%252Bg4%253D) 
                    
                    [2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(1)-{1} form 예제
이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 예제 이미지 : Step 1: 로그인 정보 아이디 비밀번호 비밀번호 확인 회원 등급-이거 틀림 Step 2: 개인 정보 이름 메일 주소 연락처 Step 3: 코딩 숙련도(상,중,하) 결과물: 더보기 지금은 쓰이지 않는 구닥다리 center 태그로 제출 버튼에 정렬을 준 특이성 있음 (그냥 이거 써보면 뭔가 가운데 정렬이란 의미 아냐? 싶어서 center 썼던 기억이...) 회원등급-이거틀림 은 겉보기에는 datalist 띄우는 부분이 아닌 고로.. 진짜 제출 후에 틀린 게 확인된 부분
![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(1) form 복습](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FoqiVR%2Fbtrr3nnEa0z%2FAAAAAAAAAAAAAAAAAAAAAElLkrguCXzeUX98u1h2-9jpWs8W09BoV-JxiCPWjzu0%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DI6SvaIJsqy7w0P%252BZLJKy5bsdPD8%253D) 
                    
                    [2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(1) form 복습
이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 첫 타자로 올릴 내용은 14일에 이은 form 복습이고, 새로운 input 타입을 배운 부분. 1. 카드 타입 선택 : 이 당시 배운 방식은 input type=text를 먼저 입력한 후 datalist를 넣어 따로 선택지를 출력하고 선택해서 text에 출력시키는 방법이었음 2. input type="datetime-local" : 유효기간 및 날짜를 선택, 입력할 수 있는 태그 type유형에 date, month, week, time도 있음 3. input type="file" : 이미지 업로드, 파일 ..
![[2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(4) form 양식 복습](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F45W75%2Fbtrr3nuliEn%2FAAAAAAAAAAAAAAAAAAAAALNPLN0z5snPl3a6DaCreiDebZbX_5K20y30C59nCB32%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DjPu88sWlAEmf6VqWvTEqkR6sRtE%253D) 
                    
                    [2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(4) form 양식 복습
키친 파스타를 마크업 한 후에는 form 양식을 복습 form 양식 중에서 새로 배운 것 1. input type = number : 개수 선택, 또는 연령 선택에서 주로 쓸 수 있는 2. input type = color : RGB 색상 선택 3. input type = range : 슬라이드 바로 범위 출력 가능 개인정보입력 이름 비밀번호 전화번호 주문내용 상품명 주문개수 상품검색 상품검색 사이트 주소 입력 메일주소 배송 주소 결제 방법 추가선택사항 색상선택 form 양식은 어떻게 코딩하는 게 좋을까...? 담임 강사는 ul, ol, dl로만 마크업 하시던데 실제 사이트들 보면 div로만 묶는 경우도 있고.. 간단하게 항목 1개만 필요한 경우 form fieldset 없이 그냥 label input으..