웹언어/HTML5 (23) 썸네일형 리스트형 [HTML기초문법] 15강 SVG태그 Stroke속성 - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있습니다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. ## SVG태그 SVG그래픽 ... - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 2. SVG의 stroke속성 - SVG태그는 다양한 스트로크 속성을 제공합니다. - stroke : 선색 속성 - stroke-width : 선 굵기 속성 - stroke-linecap : 선의.. [HTML기초문법] 14강 SVG태그 Path와 TEXT활용 - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있습니다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. ## SVG태그 SVG그래픽 ... - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 2. 태그 - 태그는 일러스트레이터처럼 패스(선과 면)을 이용한 태그입니다. - 속성 중 d라는 속성에 다양한 패스 데이터를 사용할 수 있습니다. 1) 패스 데이터(path data) 데이터 종류.. [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기초문법] 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영상 옵션 - .. 이전 1 2 3 다음
