웹언어/HTML5 (23) 썸네일형 리스트형 [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² 아래첨자 태그 루비문자 태그 - 일본어에서 한문위에 히라가나를 첨부하듯이 사용하는 태그 태그.. [HTML기초문법] 1강 텍스트태그 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=lPEwKzviD0I&t=16s 1. 제목태그 1) 텍스트 태그의 종류 태그이름 설명 h1 첫번째로 큰 제목 글자 태그, 로고를 담는 태그 h2 두번째로 큰 제목 글자 태그 h3 세번째로 큰 제목 글자 태그 h4 네번째로 큰 제목 글자 태그 h5 다섯번째로 큰 제목 글자 태그 h6 여섯번째로 큰 제목 글자 태그 - 제목이 되는 것을 순서에 맞게 논문을 작성하듯이 순서를 맞춰서 시멘틱(의미론적)으로 작성하는 것이 중요 2) 코드 테스트 Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 3) 코드 완성뷰 2. 문단 태그 1) 문법 - : 긴 문단을 작성하.. 이전 1 2 3 다음
