반응형 앱 만들기396 비디오 태그 예제 HTML 웹문서에서 비디오 재생을 위해서는 비디오 태그를 사용합니다. 비디오 태그 예제를 살펴보겠습니다. 비디오 태그 예제 입니다. 비디오 태그에서 중요한 속성은 하기와 같습니다. src : 비디오 파일의 경로를 지정합니다. (비디오 파일들만 별도로 관리하는 것이 효율적입니다) controls : 컨트롤 바를 보여줍니다. 즉, 컨트롤바로 비디오를 제어할 수 있습니다. width : 비디오 화면의 크기를 설정합니다. 가로 크기만 설정해도 세로는 가로비율에 맞게 조정됩니다. px 고정 크기와 퍼센트로 브라우저 크기 대비 설정이 가능합니다. autoplay : 자동 재생 기능입니다. loop : 반복 재생 기능입니다. 웹 문서의 비디오 재생 태그 였습니다. 감사합니다. 오디오 태그 예제 사운드 재생을 위한 오.. 앱 만들기/HTML5 study 2023. 3. 7. 오디오 태그 예제 사운드 재생을 위한 오디오 태그 예제입니다. 브라우저에서 사운드 플레이를 위해서는 라는 태그를 사용해야 합니다. 예제를 보겠습니다. 오디오 태그 예제 입니다 태그 중 핵심적인 역할의 속성은 두 가지 압니다. src : 사운드 파일의 위치를 정해줍니다. (일반적으로 폴더를 별도로 만들어서 관리하는 것이 좋습니다) control : 컨트롤 바를 표시 해줍니다. 추가로 하기 속성으로 자동재생 되면서 반복재생되도록 만들 수도 있습니다. autoplay : 자동 재생 loop : 반복 재생 여러 속성이 있겠지만, 사운드 재생을 위해서는 src, control, loop 등만 잘 사용해도 괜찮을 거 같습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 3. 6. html 표 셀 합치기 예제 표에서 특정 셀 영역을 병합(확장) 하기위해서 사용되는 태그는 과 입니다. 해당 예제를 살펴봅니다. span 이란 한국에서 흔히 말하는 "스판" 으로 잘 늘어나는 신축성 소재에서 사용되는 그 단어가 맞습니다. 즉, colspan 이라는 태그는 colum span 열을 늘인다. row span 행을 늘인다 라는 뜻이기에 병합(확장)한다고 이해할 수 있습니다. 위 표에서 '역사'를 나타내는 두개의 행 셀을 병합(확장)하기 위해서, 태그에 행 을 합치는 rowspan 속성을 사용해서 크기를 설정합니다. '생물'의 경우도 두개의 열 셀을 병합(확장)하기 위해서, colspan 으로 크기를 설정 합니다. 참고로, 합쳐지는 셀들은 주석 및 코드를 삭제해야 합니다. 시간표 세션 월요일 화요일 수요일 목요일 금요일 1.. 앱 만들기/HTML5 study 2023. 3. 4. 이미지를 표현해주는 태그 예제 이미지를 브라우저에서 불러오기 위해서는 태그를 사용해야 합니다. 태그 예제를 살펴봅니다. 이미지 태그 예제 입니다 이미지 태그 속성 이미지 태그에서 중요한 부분은 2곳 입니다. src : 이미지 경로를 기재 합니다. 로컬 경로 와 온라인 상의 URL 경로도 모두 지원 합니다. alt :대체 테스트를 의미 합니다. 이미지가 나오지 않는 상황에서도 해당 이미지의 정보를 나타내 줄 수 있으며, 시각장애인을 위해 화면 낭독기에서 해당 텍스트를 읽어줍니다. alt 는 필수 속성으로 반드시 기재해주어야 합니다. 이외 width의 경우 이미지 가로사이즈를 지정합니다. 사이즈는 퍼센트(%) 와 고정사이즈 px 로 지정 가능합니다. 퍼센트(%) : 브라우저가 줄어들어도 해당 크기에 맞게 조정이 됩니다 PX : 고정사이즈.. 앱 만들기/HTML5 study 2023. 3. 3. html 표 만들기 표를 만드는 태그 예제 입니다. 표를 만들기 위해서는 , , , , 태그가 사용됩니다. 각 태그의 의미와 동작은 하기와 같습니다. 표를 정의합니다. table 태그 사이에 표를 이루는 하기 구성요소를 넣어야 합니다. 표의 제목을 표시하며, 생략이 가능합니다. 행을 나타냅니다. (table row) 제목을 나타내는 열을 만듭니다.(table header) 행안에 각각의 열을 나타냅니다. (table data) 해당 태그의 예제를 살펴봅니다. 시간표 세션 월요일 화요일 수요일 목요일 금요일 1교시 역사 국어 체육 영어 과학 2교시 한문 영어 수학 생물 지리 3교시 미술 수학 과학 생물 영어 4교시 음악 한문 체육 수학 과학 예제의 결과 값은 하기와 같습니다. 이상 표를 만드는 table, caption, t.. 앱 만들기/HTML5 study 2023. 2. 28. <dl> 태그 예제 , 태그 처럼 리스트를 만들수 있는 태그 가 있습니다. 바로 태그 입니다. 태그는 description list 의 약자로 용어에 대한 설명을 리스트로 표현할 수 있는 태그 입니다. 태그는 내부에 용어의 뜻을 나타내는 와 그 용어의 세부설명인 태그로 구성됩니다. dt : description term. (설명 용어) dd : description data (설명 내용) 으로 시맨택 태그의 본연의 의미를 내포하고 있습니다. 하기는 dl 태그 예제 입니다. A조 AC밀란 맨유 바이른뮌헨 AS로마 B조 레알마드리드 파리생제르망 인터밀란 리버풀 위 예제의 결과 값은 하기와 같습니다. 잘 정돈된 리스트가 탄생되었습니다. dl 태그를 사용하면 용어와 그 단어에 대한 설명을 부연 목록으로 만들 수 있습니다. 태그 예.. 앱 만들기/HTML5 study 2023. 2. 27. <ul>태그 예제 태그는 unordered list 의 약자로 순서가 없는 리스트를 만듭니다. 예제를 통해서 태그를 확인해 봅니다. 나이키 아디다스 푸마 프로스펙스 결과 값은 하기와 같습니다. 순서가 없기에 순서대신 기호가 붙습니다. 이 기호를 불릿(bullet) 이라고 부릅니다. 블릿 기호는 list-style 속성을 추가하여 변경이 가능합니다. 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 블릿 list-style 속성 - disc : 검정색 원 기호(속성 없을때 기본값) - circle : 흰색원 기호. - square : 사각형 기호. https://soo0100.tistory.com/2123 태그 속성 태그 사용법 태그는 odered list 의 약자로 순서가 있.. 앱 만들기/HTML5 study 2023. 2. 26. <ol> 태그 속성 태그 사용법 태그는 odered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다. HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 ol 태그를 사용하면 됩니다. 그럼, 실제 예제를 살펴보겠습니다. 나이키 soo0100.tistory.com 지난 시간 살펴본 태그에는 속성 값을 줄 수 있습니다. 속성 값이란 태그의 기본 기능에 부가적인 기능을 추가한다라고 이해하면 됩니다. 예제를 통해서 보면 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 태그 내부에 type 이란 속성은 순서를 표현하는 방법이며, start는 그 표현의 몇 번째부터 보이는 가입니다. 결과를 도출해 보면 하기.. 앱 만들기/HTML5 study 2023. 2. 19. 비주얼스튜디오 주석처리 하기 주석 주석이란. 코딩내용을 설명해주는 내용입니다. 그렇기에 실행코드에는 아무런 영향을 주지 않습니다. 하지만, 코딩 시 주석처리는 매우 중요합니다. 실무 프로젝트 시 여러 사람이 소스를 만지다 보면, 이 함수가 어떤 역할을 하는지 주석처리가 되어 있다면 빠르게 유지보수가 가능합니다. 하지만 그보다도 본인이 짠 코드도 한 1년 후 보면 긴가 민가 합니다. 그렇기에 그 당시에 수정한 날짜 및 해당 기능 및 수정사항에 대해서 자세히 적어두면 둘 수록 좋습니다. 귀찮다고 주석없이 짰다가 현재는 편할지 몰라도 어느 정도의 시간이 지나면, 인간의 뇌는 기억이 그리 오래 남지 않다는 것을 금방 알 수 있습니다. 그렇기에 주석은 메모와 유사하다고 생각 하면 됩니다. 비주얼스튜디오 웹 문서에 주석처리 하는 방법을 알아봅.. 앱 만들기/비쥬얼스튜디오 코드 2023. 2. 8. <ol> 태그 사용법 태그는 ordered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다. HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 ol 태그를 사용하면 됩니다. 그럼, 실제 예제를 살펴보겠습니다. 나이키 아디다스 푸마 프로스펙스 내용 부분인 안에 태그를 명시해줍니다. 태그를 만나는 순간 브라우저는 아~순서있는 리스트가 나오겠구나 하고 알게되는 것 입니다. 태그 하부에는 각 리스트 별로 태그 (list 의 약자) 를 배치시킵니다. 순서대로 1 부터 숫자가 붙여지기에 원하는 목차만큼 기재하면 됩니다. 순서가 있는 목록 리스트를 만들기 위해서는 하기 기본 구조를 머리 속에 생각하면 좋겠습니다. 나이키 아디다스 푸마 프로스펙스 태그 사용법 이였습니다. 감사합니다. 태그 속성 태그 사용법 태그는 oder.. 앱 만들기/HTML5 study 2023. 2. 6. 이전 1 ··· 11 12 13 14 15 16 17 ··· 40 다음 반응형