웹언어/HTML5 (25) 썸네일형 리스트형 [HTML기초문법] 9강 form관련 태그input, select, textarea, label 등 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=bh9KvHaB9c0 1. form태그 - form태그는 사용자가 입력한 값을 수집하는데 사용되는 양식을 정의한다.(묶어서 표현한다.) 1) form태그의 속성 속성 설명 action form양식의 데이터내용을 전송할 때 데이터가 보내질 서버 페이지 주소를 작성하는 속성 target 제출 된 결과가 새 브라우저 탭, 프레임 또는 현재 창에서 열리는지 여부를 지정 method 데이터를 제출할 때 사용할 HTTP 메소드 ( GET 또는 POST )를 지정 - get : 데이터들이 주소표시줄에 표시됨, 보안이 필요없는 데이터에서 사용 - post : 데이터들을 주소표시줄에 표시하지 않음, 보안이 필.. [HTML기초문법] 8강 iframe태그와 youtube영상 넣기 및 옵션 설정 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=VVVmPjnqT8U 1. youtube영상을 HTML에 넣기 1) 유튜브 사이트에 접속 주소 : https://www.youtube.com/ YouTube www.youtube.com 2) 원하는 영상을 선택 - 원하는 영상을 찾아 클릭한다. 3) 영상의 공유버튼 클릭 - 영상의 하단쪽에 있는 공유버튼을 클릭한다. 4) 새로 뜨는 대화상자의 [퍼가기버튼] 클릭 - 빨간색으로 체크한 퍼가기 버튼을 클릭 5) 보이는 iframe태그를 드래그해서 복사한다. - 빨간색으로 체크한 태그를 복사한다. 6) 현재 작성하는 html문서에 붙여넣기 한다. 7) 코드 완성 뷰 2. youtube영상 옵션 - .. [HTML기초문법] 7강 멀티미디어 태그 - audio, video태그 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=lnIJqgJLDaM&t=275s 1. audio태그 - audio는 플러그인 도움없이 음악을 재생할 수 있는 태그 - 저작권 때문에 음악은 현 블로그에서는 제공하지 않음 1) audio태그의 속성 속성 설명 src 음악 파일의 경로를 작성하는 속성 controls 음악 재생도구를 출력 autoplay 음악을 자동재생할지 지정 - 현재 브라우저들이 자동재생은 막고 있다. muted 음악 소리 제거 loop 음악 무한 재생 preload 음악을 재생하기 전에 모두 불러올지 지정 2) 코드 3) 코드 완성 뷰 - 음악 파일이 보이는 것이 확인 4) 태그 추가 - 브라우저 별로 인식되는 파일의 종류가 .. [HTML기초문법] 6강 테이블(table)태그 ** 영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=SMjXH6Qnd_o - 테이블 태그란? 홈페이지에서 정보를 행과 열의 표로 보여주는 태그 1. 기본구조 1) 기본구조 관련 태그 태그 정리 table table전체를 감싸는 태그 caption table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본 tr 테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다. th 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬. td 테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값: 왼쪽.. [HTML기본문법] 5강 <div>태그와 <span>태그 1. 태그 설명 태그 설명 div 여러 태그를 묶어 CSS를 한번에 적용하는 태그 - 구역태그 혹은 박스태그라 부름 span 한 태그를 나눠 여러 CSS를 적용하는 태그 - 분리태그 2. 태그 예제 1) 태그에 CSS를 각각 적용했을 때 코드뷰 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 2) 태그에 CSS를 각각 적용했을 때 코드완성뷰 3) div태그로 하나로 묶어 CSS를 적용하는 경우의 코드 뷰 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 4) div태그로 하나로 묶어 CSS를 적용하는 경우의 코드 완성뷰 3. 태그 예제 1) 코드뷰 - li태.. [HTML기초문법] 4강 이미지 태그 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=lnIJqgJLDaM&t=275s 1. 이미지태그 1) 이미지 태그 기본문법 - 위 2개의 속성을 작성하지 않으면 웹표준에 어긋남 2) 이미지 태그의 속성 속성 설명 src 이미지의 경로를 작성하는 태그 alt 이미지의 대체텍스트로 경로가 잘못되는 경우 대체텍스트가 보인다. 웹접근성에서 중요한 의미로 시각장애인에게 스크린리더기로 읽어주는 역할을 한다. width 이미지의 가로크기 속성으로 값에 단위를 작성하지 않는다. (px단위로 자동인식) CSS에서 대체 가능하다. 미작성시 원래 사이즈로 처리 height 이미지의 세로높이 속성으로 값에 단위를 작성하지 않는다. (px단위로 자동인식) CSS에서.. [HTML기초문법] 3강 a(앵커)태그와 하이퍼링크 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=Oo4zI6fuRHA&t=1259s 1. 태그의 속성문법 1) 정의 : 태그가 갖은 특징을 기술한 것이 속성 2. a(앵커)태그 1) 하이퍼링크(Hyper Link) - 링크가 걸린 컨텐츠를 클릭하면 다른 문서(html페이지)로 이동하는 기술을 의미 2) a태그의 속성 속성 설명 href 이동될 페이지 경로를 작성 target 이동될 페이지의 위치 지정 title 링크에 대한 설명텍스트를 툴팁으로 보여줌 target 속성값 설명 _self 클릭한 컨텐츠를 담은 html과 동일한 창(현재 창)에서 페이지를 이동(속성 생략과 같음) _blank 새창 혹은 새탭에서 페이지 이동 _parent 현재 페이.. [HTML기초문법] 2강 글자형태태그, 첨자태그, 강조태그 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=lPEwKzviD0I&t=16s 1. 글자 형태 태그 1) 문법 : 보통 글자의 형태를 바꾸며, CSS언어로 모두 대체 가능하다. 태그 설명 글자를 굵게 하는 태그 글자를 기울이는 태그 글자에 밑줄주는 태그 글자에 가운데줄주는 태그 글자를 작게하는 태그 2) 코드 뷰 글자를 굵게 하는 태그 글자를 기울이는 태그 글자에 밑줄주는 태그 글자에 가운데줄주는 태그 글자를 작게 하는 태그 3) 코드 완성뷰 2. 첨자태그 1) 문법 : 글자 위나 아래에 첨부되는 글자를 만드는 태그 태그 설명 위첨자 태그 ex) a² 아래첨자 태그 루비문자 태그 - 일본어에서 한문위에 히라가나를 첨부하듯이 사용하는 태그 태그.. 이전 1 2 3 4 다음
