1. HTML - audio, table, iframe 태그

티스토리 뷰

💻 Web/프론트엔드 입문 스터디

1. HTML - audio, table, iframe 태그

싱 이 2022. 10. 7. 14:55

[ 1주차 HTML 실습 내용 및 참고 자료 정리 ]

1. 구현한 페이지 내용

: 자기소개 웹페이지를 만들어보는 실습으로, 이름, 학교, 전공을 포함한 기본적인 내용을 포함해 관심을 가지고 있는 분야들 및 개인적으로 좋아하는 것들에 대한 내용을 담은 페이지이다. ~~오류 대잔치였음 이미지 깨지고,, 음악 자동재생 안되고,, 표 테두리가 없고,,~~

2. 코드

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <style>
            
        </style>
    </head> 
    <body>
        <audio controls autoplay>
            <source src = "/0139. Picnic - AShamaluevMusic.mp3" type="audio/mp3">
            Your browser does not support the audio element.
        </audio>
        <div class = "aboutMe"></div>
            <h1>자기소개</h1>
            <img src="intropic.jpg" alt="picture" width= "200">
            <table style="border:solid 1px #000;border-collapse:separate; width: 200px;">
                <tr>
                    <th style="border:solid 1px #000;border-collapse:separate;">Name</th>
                    <td style="border:solid 1px #000;border-collapse:separate;">내 이름</td>
                </tr>
                <tr>
                    <th style="border:solid 1px #000;border-collapse:separate;">학교</th>
                    <td style="border:solid 1px #000;border-collapse:separate;">내 학교</td>
                </tr>
                <tr>
                    <th style="border:solid 1px #000;border-collapse:separate;">전공</th>
                    <td style="border:solid 1px #000;border-collapse:separate;">내 전공</td>
                </tr>
            </table>
        <div class = "interests">
            <h3>관심분야</h3>
            <ul>
                <li>웹</li> <br>
                <dt>- 최근 웹에 관심이 생겨 올해 여름부터 본격적으로 웹 공부를
                    시작했습니다. Html / Css / 자바스크립트를 공부하며 개인 프로젝트도 진행해보았습니다.
                    2학기에는 웹을 공부하고 팀 프로젝트 경험을 쌓기 위해 오픈sw플랫폼 과목을 수강 중입니다. 
                </dt> <br>
                <dt>- <a href = "https://yelynnoh.github.io/AboutME/#turnoff3"> AboutME 개인 프로젝트</a>를 구경하고 싶으시다면 클릭해주세요!
                </dt> <br>

                <li>알고리즘</li> <br>
                <dt>- 개발자에게 필요한 소양 중 알고리즘이 가장 중요한 소양일 것이라는 생각이 들어 
                    알고리즘 공부를 본격적으로 시작했습니다. 개인적으로 관련 도서를 읽고 문제를 풀면서 알고리즘 공부를 하고 있습니다.</dt> <br>
            </ul>
        <div class = "likes">
            <h3>좋아하는 것들</h3>
            <h4>영화 보기</h4> 
            <ul>
                <li>
                    '인생은 아름다워' 라는 영화를 좋아합니다!
                </li>
            </ul>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/LC903LkokMA" title="YoutubeVideo"></iframe>
    </body>
</html>

3. 구현한 기능

1) <audio> 태그

<audio controls autoplay>
      <source src = "/0139. Picnic - AShamaluevMusic.mp3" type="audio/mp3">
</audio>

해당 화면에서는 사용자가 페이지를 접속하면 자동적으로 배경 음악을 틀어주는 기능을 구현했다. 이는 간단하게 audio 태그를 활용하면 임베드할 수 있다. audio 태그 안에는 여러 속성 (attribute)들이 포함될 수 있는데, 포함할 수 있는 태그들은 아래와 같다.

controls
- 음악의 재생, 소리 크기 등을 조절할 수 있는 컨트롤러를 화면에 표현하고 싶다면 controls 속성을 넣어주면 된다.

src
- 임베드하고 싶은 오디오의 주소를 넣어주는 곳이다.

autoplay
- 사용자가 웹페이지를 들어가면 자동적으로 음악을 재생해주는 속성이다. 단순히 autoplay 속성을 적어준다면 자동재생이 되지만, 오류가 많이 발생하는 부분인듯 하다. 크롬 브라우저의 경우 디폴트로 음악 자동재생이 되지 않게 막아두었기에 제대로 기능이 작동하지 않는 경우가 많다. 나는 엣지로 작업을 했는데, 이게 될 때도 있고 안될 때도 있었다. 구글링 해보니 autoplay 속성 뒤에 muted 속성을 넣어주게 되면 음소거된 상태로 자동재생이 되어 해결이 된다는 사람도 있었고, 접근하려는 웹페이지 전에 인트로 형태의 새로운 페이지를 만들어 그 페이지 안에서 버튼을 누르면 오디오 재생 + 접근하려는 웹페이지 접근이 동시에 이뤄지도록 하는 해결방법도 있었다. 그리고 크롬에서 작업할 경우 사이트의 디폴트 설정을 바꿔주는 방법도 있었다.

loop
- 반복재생을 하고 싶을 경우 사용해주면 되는 속성이다.

width & height
- 컨트롤러의 가로와 세로 길이를 정해주는 속성이다.

muted
- 음소거를 하고 싶을 경우 쓸 수 있는 속성이다.

참고자료

https://www.w3schools.com/html/html5_audio.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

https://www.everdevel.com/HTML/audio-tag/

2) table

<table style="border:solid 1px #000;border-collapse:separate; width: 200px;">
	<tr>
		<th style="border:solid 1px #000;border-collapse:separate;">Name</th>
		<td style="border:solid 1px #000;border-collapse:separate;">내 이름</td>
	</tr>
	<tr>
		<th style="border:solid 1px #000;border-collapse:separate;">학교</th>
		<td style="border:solid 1px #000;border-collapse:separate;">내 학교</td>
	</tr>
	<tr>
		<th style="border:solid 1px #000;border-collapse:separate;">전공</th>
		<td style="border:solid 1px #000;border-collapse:separate;">내 전공</td>
	</tr>
</table>

화면에서 내 이름, 학교, 전공에 대한 내용을 담은 표를 구현해보았다. 이 역시 <table> </table>이라는 태그를 이용하면 쉽게 구현을 할 수 있지만, 오류가 또 발생했다. 이에 대해서는 차근차근 얘기해보겠다😭 <table> 태그 이외에도 테이블의 기본 골격을 구성하는 태그들이 있고, 테이블의 디자인을 바꿀 수 있는 태그들이 있다.

테이블 기본 골격 관련 태그들

<table>
- 표를 만들어주는 태그이다. <th>, <tr>, <td> 포함한 다른 태그들의 상위에 위치한 태그로, '이 부분은 표에 관련된 코드입니다 여러분!' 라고 알려주는 태그이다.

<th>
- 표의 헤더부분을 만들어주는 태그이다. 해당 태그 안에 적힌 문장들은 자동적으로 굵은 글씨로 중앙 배열이 된다. 헤더 부분을 쉽게 만들 수 있는 태그이지만, 보통 <tr> 태그를 이용해 표 헤더를 만든다.

<tr>
- table rows의 준말로, 표의 행을 만드는 태그이다. <table> 태그로 전체 표를 감싸고, <tr> 태그로 각 행을 만들어 그 안에서 <th>와 <td> 태그를 사용한다.

<td>
- table data의 준말로, 표의 열을 만드는 태그이다. tr로 하나의 행이 가로로 쭉 생겼다면, td 태그로는 하나의 행을 몇 개의 칸으로 나눠주는 역할을 한다.

테이블 디자인 관련 속성들
- border
  - 표의 테두리를 변경할 수 있는 속성이다. 테두리를 수정하고 싶은 부분의 태그 안에 border = "1" 이런 식으로 지정을 해주면 테두리 두께가 변경된다. 이때, 숫자가 클수록 테두리가 두꺼워진다.
- bordercolor
  - 표의 테두리 색상을 변경해주는 속성이다. 디폴트 값은 검정색으로, 해당 속성을 지정해주지 않으면 검정색으로 보이지만 태그 안에 bordercolor = "blue" 이런 식으로 작성을 해주면 지정한 색으로 테두리 색이 바뀐다.
- width & height
  - 표의 크기를 지정해주는 속성이다.
- bgcolor
  - 원하는 태그의 배경색을 지정해줄 수 있는 속성이다. bgcolor = "skyblue" 이런 식으로 작성을 해주면 태그가 적용된 표의 칸이 색칠된다.
- cellspacing
  - 셀 간의 간격을 지정해주는 속성이다. 즉, 셀과 셀 간의 간격을 조절해주는 역할을 한다. 이때, cellpadding과 다른 점은 cellpadding의 경우 데이터와 셀 간의 간격을 조절해준다. 헷갈리지 말자!
- colspan & rowspan
  - 행(column)과 열(row)을 병합하고 싶을 때 colspan과 rowspan 속성을 사용한다. colspan = "3" 식으로 속성을 지정해주면 되는데, 숫자 자리에는 몇 개의 셀을 합치고 싶은지 작성을 하면된다. 따라서 colspan = "3"의 경우 가로 행 중 3개의 셀이 합쳐져 나타난다.

크롬에서 표 테두리가 보이지 않는 문제점

그래서 어떤 오류를 겪었나. 표를 제대로 만들었는데 표 안에 내용만 보이고 표 테두리는 전혀 보이지 않는 문제가 발생했다. 또 열심히 구글링을 해보니 크롬/인터넷 익스플로러 9/파이어폭스에서 종종 표의 테두리가 보이지 않은 버그가 발생한다고 했다. 이럴 경우 표의 테두리를 직접 다 일일이 그려줘야 한다. border-collapse 속성을 이용해 border-collapse : separate; 식으로 명시를 해주면 표의 테두리가 생성이 된다. border-collapse 속성은 표의 테두리와 셀의 테두리 사이 간격을 처리하는 방법에 대한 속성인데, 기본적으로 표와 셀의 테두리 사이에 간격이 있는 separate로 지정이 되어있다. 이 외에도 collapse의 경우 표 테두리와 셀 테두리 사이 간격을 없애 한 줄로 나타낸다. initial은 기본값으로 설정을 하는 것이며, inherit은 부모 요소의 속성값을 상속받는다. 어찌저찌 오류 해결 완🤸‍♀️

참고자료

표 구성 관련 참고자료

https://coding-factory.tistory.com/184

https://godog.tistory.com/entry/html-%ED%85%8C%EC%9D%B4%EB%B8%94table-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://ossam5.tistory.com/69

colspan 관련해서 알아보고 싶다면 여기롯

오류 해결 관련 참고자료

https://lemonweb.tistory.com/21

https://www.codingfactory.net/10616

3) iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/LC903LkokMA" 
title="YoutubeVideo"></iframe>

iframe 태그를 이용해 유튜브로 내가 좋아하는 영화 예고편을 보여주려했다. 이것도 참 오류가 많았다. 처음에 디즈니 플러스나 넷플릭스 같은 OTT 홈페이지를 연결하려 했는데, 연결을 거부했다는 내용이 떴다. 그래서 유튜브 영상을 끌고 오자는 생각으로 평소 좋아하는 노래의 뮤비를 끌고 왔는데, 그것마저도 연결이 거부되었다. 그래서 용케 연결된 것이 영화 예고편이었다...

유튜브 영상 링크를 iframe 태그 속 src에 넣고 싶을 때는 일반 주소가 아니라 임베드된 주소를 끌고 와야한다. 먼저 끌고오고 싶은 영상 페이지로 이동을 하고 → '공유' 버튼을 누르고 → '퍼가기' 버튼을 누르면 → https://www.youtube.com/embed/영상주소 이런식의 주소가 뜬다. 이 주소를 src의 링크로 써줘야 한다!

'💻 Web > 프론트엔드 입문 스터디' 카테고리의 다른 글

3. Javascript(1) (0)	2022.11.03
2. CSS - 전체 선택자, hover, transition, transform (1)	2022.10.11

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

싱이의 devlog

티스토리 뷰