html5 (15) 썸네일형 리스트형 [HTML기초문법] 13강 SVG태그 및 이미지 활용 - OSSAM강좌 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있습니다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. ## SVG태그 SVG그래픽 ... - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 2. 모양 요소의 종류 - SVG에는 개발자가 사용할 수 있는 몇 가지 요소가 미리 지정되어 있습니다. 1) 사각형 : 2) 정원 : 3) 타원 : 4) 선 : 5) 다각선 : 6) 다각형 : 7.. [HTML기초문법] 12강 시멘틱구조태그 - OSSAM강좌 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=WBSKYz7oUQQ 1. 시멘틱 구조 태그란? 1) 정의 ## 시멘틱 태그란? - 시멘틱(Semantic) 태그란 의미에 맞게 태그를 작성하는 것을 의미합니다. 의미에 맞게 태그를 작성하여 브라우저나 개발자가 그 태그의 사용의미를 잘 받아들일 수 있도록 코딩하는 것이 중요합니다. ## 시멘틱 구조 태그란? - 과거 XHTML1.0를 웹표준으로 쓰던 시대에는 [div]태그로 대부분 구조를 짰습니다. - [div]태그란 여러 태그를 하나로 묶는 태그를 의미합니다. - 그러다보니 [div]태그를 너무 많이 사용하게 되었습니다. 그래서 클래스나 아이디로 [div]태그를 식별해서 사용하게 됩니다. - 대.. [HTML기초문법] 11강 파비콘과 아이콘연결 1. 파비콘이란? - 홈페이지 타이틀 옆에 붙는 조그만 아이콘 - 실제 작업시 16x16사이즈로 제작해야함 - 확장자는 ico 혹은 png 확장자로 제작하면 된다. 1) 문법 - [HTML기초문법] 10강 기본 input태그의 속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=bh9KvHaB9c0 1. input의 텍스트상자(text, password)의 속성 1) 속성의 종류 속성 설명 id label태그와 이어지게 해주는 id값 value 사용자가 입력상자에 작성하는 값, 미리 값을 표시할 수 있다. maxlength 사용자가 입력할 최대 글자수 지정 속성 placeholder 예시텍스트 disabled 입력상자를 사용불가능하게 막는 속성 2) 코드 로그인 폼 수량선택 - + 주소입력 - 로그인 폼의 입력상자에는 placeholder예시 텍스트로 [아이디입력], [비밀번호입력]을 처리 예시 텍스트는 클릭시 사라짐 - 로그인 폼의 입력상자는 maxlength를 8.. [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기초문법] 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기초문법] 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 현재 페이.. 이전 1 2 다음
