공대남의 정보수용소

안녕하세요 대남이입니다. 지난번 오디오, 음악 넣는법에 대해서 배워봤습니다. 이번에는 동영상을 웹페이지에 삽입하는 방법에 대해

알아보도록 하겠습니다. 브라우저에 영상을 삽입하시고 싶으실 때가 있으실텐데, html 태그를 이용하여 쉽게 하실 수 있습니다.

동영상 삽입태그는 <video> 입니다. 이 비디오 태그의 기본적인 구조를 알아보도록 하겠습니다.

비디오 태그의 기본 구조

비디오 태그의 기본적인 구조는 이와 같습니다. 처음 < video ..는 동영상 삽입 태그라는걸 나타냅니다. 

그 다음은 이제껏 많이 보셨듯이 src는 파일 소스 경로를 나타냅니다. 이때 영상의 파일명과 확장자명을 정확히 입력 해주셔야 됩니다.

autoplay는 브라우저에서 영상을 자동재생 시키는 요소입니다. 

controls은 화면에서 재상, 정지를 조절할 수 있는 제어기를 생성합니다. 비디오 태그는 이와같은 구조를 가집니다. 

그럼 autoplay , controls 같은 요소들이 있는데, 구체적으로 어떤 요소들이 있는지 알아보겠습니다.

비디오 태그의 요소들

이와 같이 정리 할 수 있습니다. 이를 이용하여 본인이 삽입하고자 하는 영상을

의도에 맞게 요소들을 사용하셔서 조절하시면 됩니다.

그럼 간단하게 영상을 넣는 코딩 예시를 보겠습니다.

src에 url을 정확히 입력하여 삽입하고자 하는 영상을 넣을 수 있습니다. autoplay를 이용하여 자동재생을 시키고

controls를 통해 제어기를 생성했습니다. 내부 스타일 시트를 이용하여 body 요소 즉, 배경을 회색을 나타냈는데,

제어기를 잘 보이게 하기위해 지정했습니다. <video> 와 </video> 태그 사이 텍스트는 브라우저가 영상을 출력하지 못했을 때

나타내는 텍스트입니다. 그럼 브라우저에 어떻게 출력되는지 살펴보도록 하겠습니다.

다음과 같이 브라우저에 출력되게 됩니다. 제어기 위에는 본인이 넣은 영상이 재생됩니다.

그리고 앞서 봤던 width, height 요소를 이용하여 본인이 표시하고자하는 크기만큼 넣을 수 있습니다.

예시로 너비 500px, 높이 300px로 조정해보겠습니다.

이렇게 비디오 태그에 width 와 heigth 요소를 넣어주시면 됩니다.

다음과 같이 설정하면 너비 500픽셀, 높이 350픽셀이 됩니다. 그러면 브라우저에는 다음과 같이 출력됩니다.

이와 같이 본인이 원하는 크기대로 출력할 수 있습니다.

여기서, 영상 파일의 출력을 실패할 때가 있습니다. 그때는 비디오 형식, 즉 확장자와 관련이 있습니다.

웹 브라우저마다 지원가능한 확장자가 다르기 때문에 발생하는 문제입니다.

비디오의 확장자는 크게 mp4 ,webM, ogg가 있는데, 웹 브라우저마다 지원하는 확장자를 밑에 정리해 보았습니다.

다음과 같이 정리할 수 있습니다. 앞서 알아본 것들을 이용하여 본인들이 넣고자 하는 영상을

의도에 따라 알맞게 잘 나타내시면 됩니다.

-

오늘은 비디오태그에 대해서 알아봤습니다. 도움이 되셨는지 모르겠습니다.

다음번에는 좀 더 유익한 정보와 좋은 강좌로 돌아오겠습니다. 감사합니다.

안녕하세요 대남이 입니다. 오늘은 html을 이용하여 웹 페이지에 음악 넣는 법, 오디오 태그에 대하여 알아보겠습니다.

브라우저에 오디오나, 비디오 파일을 삽입하여야 할 때가 있으실텐데, html에서 지원하는 태그를 이용하여 쉽게 삽입할 수 있습니다.

html5의 <audio> 태그로 음악을 재생 시킬 수 있습니다. 오디오 태그의 기본적인 구조는 다음과 같습니다.

일단 태그는 < audio .. 로 시작합니다. 그리고 src는 오디오 소스 파일의 경로를 나타내는 속성입니다. 이때 파일의 이름과 확장자를 정확히

입력해주셔야 합니다. src 속성 다음에는 재생 방식을 적는데, autoplay의 경우는 자동 재생을 나타냅니다.

그 다음 controls 라는 속성을 웹 브라우저에 재생, 정지를 할 수 있는 제어기를 생성하는 명령어 입니다.

오디오 태그는 기본적으로 이와 같은 구조를 가지는데요. 그럼 어떤 속성들이 있는지 구체적으로 정리하여 보겠습니다.

< audio > 태그의 요소들

다음과 같이 정리 할 수 있습니다.

웹 페이지에 본인의 의도대로 생성하자 할 때 적절히 사용하시면 됩니다.

그럼 이번에는 예시로 한번 오디오 파일을 웹페이지에 생성하는 코딩을 해보겠습니다.

<audio> 와 </audio> 사이에는 브라우저가 음악 파일을 출력하지 못했을 때 출력되는 텍스트 입니다.

src에 url을 입력하였고 오디오 요소들을 이용하여 자동재생 그리고 웹 브라우저 화면에 제어기를 생성하였습니다.

그리고 내부 스타일 시트를 이용하여 background-color : black 즉, 배경화면 색을 검은색으로 했는데,

제어기를 잘 표시하기 위해 바꿔주었습니다. 그럼 다음과 같이 출력됩니다.

제어기가 생성되었고 브라우저를 키면 자동재생 됩니다.

배경화면은 css를 이용하여 검은색으로 출력했습니다.

(css강좌 참조) 이런 방식으로 요소들을 적절히 사용하여 코딩을 하시면 쉽게 음악을 넣을 수 있습니다.

-

여기서, 음악파일의 출력을 실패할 때가 있습니다. 그때는 오디오 형식, 즉 확장자와 관련이 있습니다.

웹 브라우저마다 지원가능한 확장자가 다르기 때문에 발생하는 문제입니다.

음악 형식을 크게 mp3, wav, ogg가 있는데 밑에 표에 브라우저가 지원하는지 안하는지 정리해놓았습니다.

다음을 참고하셔서 코딩을 하시면 되겠습니다.

오늘은 오디오 태그에 대해서 알아봤습니다. 다음 번에는 비디오를 삽입할 수 있는 비디오태그를 알아보겠습니다.

다음번에는 좀 더 유익한 정보를 가지고 오겠습니다. 감사합니다 !

안녕하세요 대남이입니다. 오늘은 html 테이블 태그를 이용하여 표 만들기를 배워보겠습니다.

표에 관한 태그도 배워놓으면 자주 유용하게 쓰일 수 있기때문에, 도움이 되실겁니다.

1. <table> 태그

일단 표를 정의 하는 태그는 <table> </table> 로 정의 됩니다. 그리고, 표는 행과 열로 표시되는건 모두 아실 겁니다.

일단 태그로 표를 정의하시고, 몇 X 몇 표로 할지 정하셔야합니다. 이때, 하나의 행을 정희하는 태그는 <tr>

하나의 열을 정의하는 태그는 <td>가 됩니다. 그러면 2X2의 표를 간단한 예시로 들어 보겠습니다.

tr로 하나의 행을 정의하고 td로 채워가는데, 일단 하나의 행을 정의하고 하나의 td를 쓸때마다 1행1열, 1행2열

이런식으로 채워간다고 생각하시면 쉽게 이해 하실 수 있습니다. 그러면 브라우저에는 다음과 같이 출력됩니다.

이런식으로 출력이 됩니다. 하나의 행 -> 하나의 행의 열 -> 그 다음.... 이런식으로 표가 채워진다고 이해하면 됩니다.

별로 어렵지 않죠? 이게 표만들기의 기초입니다.

2. <th> 태그

다음으로 배워볼 태그는 th인데 이 태그는 표의 열의 제목을 나타내는 태그입니다.

가령 앞서 보았던 예제에서 1열은 이름, 2열은 점수 를 나타냅니다. 이것을 적을 수 있는 태그입니다.

제가 간단히 코딩한 예를 보며 어떤 태그들을 어떻게 썼는지 한번 보겠습니다.

처음 1행 1,2,3열은 열들의 제목을 나타냅니다.

그리고 표는 3X3 표입니다. 처음 1행은 <th>태그로 채워하고, 그 다음 두번의 행을 더 입력하고, 세번의 열을 입력하면됩니다.

그럼 해당 페이지의 소스를 보시겠습니다.

위 사진에서 보이시나요? 처음 행은 <td>가 아닌 <th>로 입력 했습니다.

그 밑으로는 처음 예시와 같이 입력해주시면 됩니다. 

표를 만드실 때는 본인이 원하는 만큼 행과 열을 추가시켜주시면 됩니다.

그리고 저기 테이블을 만드는 태그에 <table border="1"> 이라고 나타나있는데 border은 표 테두리의 두께를 나타냅니다

만약 이 border이 0 이거나 입력하지 않으면 다음과 같이 나타나게됩니다.

이처럼 테두리가 없는 상태로 나타나게됩니다. 필요에 따라 테두리가 있게 만드셔도 되고, 없게 만드실 수도 있습니다.

그럼, 표를 만들때 행과 열을 병합시켜줘야할 때 가 있습니다. 그 부분에 대해 알아보겠습니다.

3.행과 열 병합 ( rowspan , colspan )

표에서 각 셀들은 필요에 따라 얼마든지 병합될 수 있습니다. 행을 병합시키는것 colspan을 입력해주면 되고,

열을 병합시키는것은 rowspan을 입력해주면 됩니다. 쉽게 말해 상하 셀들을 병합 시켜 줄 때는 colspan

좌우의 셀들을 병합시켜줄때는 rowspan를 사용합니다. 그럼 예시를 하나 들어보겠습니다.

이번 예시에서는 1행과 2행을 병합시키고, 3행의 모든 열을 병합시켜볼텐데 일단, 브라우저에 출력된 값부터 보겠습니다.

이렇게 1행 1열, 2행 1열이 병합되어 있고, 3행은 모두 병합되어 있습니다. 이 표를 만들 때 주의 할 것은

1행 1열과, 2행 1열 즉 상하를 병합할때는 위의 1행 1열을 기준으로 아래로 병합됩니다. 그렇기 때문에

2행은 두개의 <td> 태그만 사용합니다. 그리고 3행의 경우 3열을 모두 통합했기때문에 하나의 <td>태그만 사용합니다.

그럼 해당 페이지의 소스를 보겠습니다.

이렇게 첫번째 1행1열에 rowspan="2"를 입력하여 1행 1열과 2행 1열, 즉 하나의 행이 병합됩니다. 그리고 두 행이 병합되었기 때문에

두번째에 <td> 하나 적게 입력합니다. 그리고 "2"는 두개의 셀을 병합한다는 의미입니다. 이와 같이 3행에서 colspan="3"을 입력하면

3행의 1열 2열 3열 세개의 셀을 병합한다는 의미로써 하나의 td만 적어주면 됩니다. 그러면 좌우 3개의 셀이 병합됩니다.

-

이번 글에서 표만들기, 그리고 셀의 병합의 대해서 배워보았습니다. 유익학 정보가 되었으면 합니다.

다음번에도 더 유익한 정보와 강의로 찾아뵙겠습니다. 감사합니다 !

안녕하세요 대남이입니다. 오늘은 html 문서에 이미지를 삽입하는 방법과 그 태그에 관하여 배워보겠습니다.

일단 어떤 웹페이지이건 간에 이미지 사용은 필수불가결합니다. 그렇기에 꼭 숙지하고 계셔야 하는 부분입니다.

일단 처음으로 간단한 이미지 태그에 관한 예시를 보고 셜명과 함께 예시 코딩을 해보겠습니다.

이미지 태그 : < img >

일단 기본적인 태그의 구성은 위와 같습니다. img는 이미지를 삽입을 위한 태그입니다. 

html 문서에 이제 이미지를 삽입하겠다고 선언하는 것입니다. 앞서 배운 링크태그에서의 href가 링크의 목적지를 나타내었다면,

이미지태그에서의 src는 이미지 파일을 지정하는 것입니다. 즉, 원하는 파일의 이름을 적으시면 됩니다.

그리고 width는 가로크기, heigth는 세로크기이며 픽셀로 계산됩니다.

그러면 이미지를 삽입하는 간단한 코딩의 예시를 보시겠습니다.

(border 테두리의 크기라고 생각하시면 됩니다. css 에서 자세히 다루는 영역입니다.)

예시 코딩을 보시면, src 에 제가 원하는 사진 이름을 넣고, width와 heigth로 가로 세로의 키를 정하였습니다.

그러면 밑에 사진과 같이 브라우저에 출력됩니다.

속성 alt

이미지 삽입은 어렵지 않지만 웹사이트를 꾸밀때, 또는 제품을 설명할 때 쇼핑몰의 경우 제품을 판매할 때, 많은 경우 이미지 삽입은 필수 입니다.

잘 알아두시면 많이 유용하게 쓰실 수 있습니다. 또, 위 코딩에서 alt는 무엇인지에 관한 의문을 가지셨을 겁니다.

alt 속성은 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못한 경우에, 대체 되어 표시되는 텍스트를 지정하는 것입니다.

저는 alt="PHOTO" 라고 했는데, 만약 브라우저가 이미지를 표시 못하였을 경우에는 밑에와 같이 출력됩니다.

이제 이미지 태그에 관한 기본적인 속성은 모두 배우셨습니다 !

그러면 이번에는 간단한 예시를 다시 연습해보겠습니다.

예시 연습

이 페이지를 보시고 어떤 태그들이 사용되었는지 감이 오시나요? 네 간단한 태그의 조합입니다.

헤딩태그와 단락 그리고 이미지의 조합입니다. 이미지 2장과 텍스트로 간단한 페이지를 만들어보았습니다.

이 페이지의 소스를 확인해보면 이와 같습니다.

이렇게 h2,p 태그와 img태그의 조합으로 코딩되었습니다. 만약 사진의 width와 height를 조정하면, 두 사진의 크기를 같게 할 수 도있고,

다르게 할 수 도있습니다. 그러면 더 나아가 이번에는 앞서배운 링크 태그와 응용한 예시를 들어 보겠습니다.

이번에는, 사진을 누르면 좀 더 자세한 사진의 페이지로 이동하는 예시입니다.

링크 태그와 이미지 태그의 응용

애플사의 제품인 맥북 프로 레티나를 소개하는 페이지를 만들어 보았습니다.

그리고 저 사진을 누르면 좀 더 자세한 사진을 볼 수 있는 페이지로 이동합니다.

이와 같이 사진이 좀 더 커지는 페이지로 이동하였습니다.

이 html 코딩이 뭔지 감이 오시나요?, 앞서 말했듯이 링크태그와의 응용입니다.

링크태그 <a> </a> 사이 이미지를 삽입하고 링크 태그의 href="mac.html"

즉, 링크의 목적지가 더 큰 사진이 있는 또 다른 html으로 설정하면 되는 겁니다. 정답을 보시겠습니다.

이것이 첫번째 페이지의 코드입니다. 링크의 목적지를 더 사진 페이지를 해놓고,

<a> </a> 사이의 추가 설명 부분에 이미지를 삽입하여 이미지를 누르면 이동하게되는 페이지를 만든 것 입니다.

그러면 두번째 페이지의 소스는 이와 같습니다.

이렇게 width와 height를 이용하여 더 큰 사진으로 자세히 볼 수 있게 하였습니다.

이 처럼 html 태그들은 홀로 쓰이기보다 조합되어 쓰이는 경우도 꽤 있습니다.

오늘은 쉽지만 중요한 이미지 삽입, 태그에 대하여 배워봤습니다 !

다음번에도 더 유익한 정보들을 가져와서 알려드리겠습니다. 감사합니다.

안녕하세요 ! 대남이 입니다. 오늘은 링크와 리스트에 관련된 태그를 배워보도록 합니다.

링크관련 태그는 아주 자주쓰여서 중요하니 잘 숙지해두시면 많은 도움이되실 겁니다.

일단 링크에 관련된 태그를 배워보고 리스트에 관련된 태그를 배워보도록 하겠습니다.

1. 링크

링크는 하이퍼링크라고도 하며 다른 무서로 점프할 수 있는 단어나 이미지입니다. <a> 태그로 링크를 정의할 수 있는데,

a는 "anchor"의 약자입니다. 이 태그의 구조를 살펴보도록 하겠습니다.

기본구조는 이와같습니다. href는 가장 중요한 속성인데 목적지를 나타냅니다. 다른 사이트주소를 삽입하면 클릭하면

그 사이트로 이동하게됩니다. 추가정보에는 텍스트나 이미지를 삽입할 수 있고, 커서를 올리면 클릭할 수 있는 모양으로 변합니다.

이미지삽입법은 이후에 자세히 배워 보도록하겠습니다.

그러면 화면에서 링크는 기본적으로 생성되는 색상이있는데 이 디폴트값을 살펴 보도록하겠습니다.

브라우저에는 이와같이 출력됩니다.

이렇게 생성됩니다. 클릭을 하게되면 이처럼 출력됩니다.

여기서 target은 링크가 클릭이 되었을 때 페이지가 열리는 위치를 결정하게 되는데, 

_blank 값은 새로운탭에서 페이지를 열게됩니다.

target 값들은 다음과 같습니다.

1-2. id 태그

이번에는 현재 페이지에서 특정 부분으로 이동하는 법을 배워보겠습니다. 이것도 <a>태그를 이용합니다.

이때 id 속성을 이용하여 HTML 안에 특정요소에 적용시킵니다.

예시를 보시겠습니다.

이와 같이 코딩하였습니다. p태그에 id를 적용시켰습니다. 그리고 a태그의 href속성에 #section1 이라고 p태그 id 속성을 입력합니다.

그러면 브라우저에는 이와같이 출력됩니다.

이와 같이 나오는데 링크를 클릭하게되면

이렇게 p태그로 이동하게 됩니다. 이처럼 a태그와 id속성을 이용하여 페이지내에서 이동이 가능하게됩니다.

번외로써, <a>태그를 이용하여 이메일링크나 다운로드링크도 생성할 수 있습니다.

2.리스트

리스트는 항목을 나열하기위해 사용 할 수 있는 태그입니다. 리스트태그는 크게 항목 번호가 있는 리스트와

없는 리스트롤 나눌 수 있습니다. 

2.1 번호 없는 리스트

번호 없는 리스트는 unordered lists로써 <ul>태그로 나타냅니다. 

각 리스트 항목은 <li> 태그로 시작합니다. 예시를 보시겠습니다.

이와 같이 코딩하면 다음과 같이 브라우저에 출력이 됩니다. 번호가 없는 상태로 출력됩니다.

2.2 번호 있는 리스트

번호 있는 리스트는 ordered list로써 <ol>태그로 나타냅니다.

예시를 보시겠습니다.

이처럼 ol 태그를 사용하면 다음 처럼 번호가 있는 리스트가 출력됩니다.

상황에 따라 리스트를 작성하실 때 편하신걸 사용하시면 됩니다.

다음으로 마지막으로 정의 리스트를 배워보도록 하겠습니다.

2.3 정의 리스트

정의 리스트는 definition list로써 항목들과 함께 항목의 정의가 표시되는 리스트입니다.

정의 리스트는 <dl> 태그로 생성할 수 있고, <dt> 태그는 항목을 나타내며 <dd> 태그는 그 항목에 대한 설명을 나타냅니다.

예시 코딩을 보시겠습니다.

dl태그로 정의리스트를 생성하고 이처럼 dt태그로 항목을 나타내고 dd태그로 항목에대한 설명을 적어주시면 됩니다.

그럼 다음과 같이 브라우저에 표시가 됩니다.

-

오늘은 여기까지 링크와 리스트에 관한 태그를 학습해보았습니다.

다음번에는 이미지 삽입에 대하여 배워 보도록하겠습니다. 감사합니다!

안녕하세요 ! 대남이입니다. 저번 시간에는 기본 구조의 대해서 설명드렸습니다.

이번에는 텍스트표시에 사용하는 태그들을 배워보도록합니다.

원래는 특별한 태그 없이도 <body> - </body> 안에서 텍스트를 표시할 수 있다.

하지만 여러 줄로 이루어진 텍스트는 단락을 생성한 후에 단락 안아에서 표시하는 것이 좋다. 단락을 생성하지 않으면 모든 텍스트가 연결되어서 하나의 

긴줄로 표시되기 때문에 줄 바꿈이 무시된다. 이 때문에 태그들을 적절히 사용하게 되면 좀 더 효율 적으로 나타낼 수 있습니다.

그럼 여러가지 태그가 있는데, 하나씩 배워보도록 하겠습니다.

가장 기본적인 태그라고도 말씀드릴 수 있습니다. 웹페이지의 컨텐츠를 나타내기 위해서 글을 쓸 때 p 태그를 이용하는게 가장 기본입니다.

단락은 <p>태그로 정의됩니다. 단락이란 전체글을 내용에 따라 나눌 때, 하나하나의 짧은 문장 토막을 말하는 것 입니다. 

웹 브라우저는 자동적으로 단락의 전후에 빈 줄을 추가합니다.

한번 코드를 작성해보겠습니다.

p태그를 추가한 것 이외에는 저번 강의 때 했던것과 같이 코딩을 했습니다.

자 이렇게 하면 브라우저에는 이렇게 표시가 됩니다.

이와 같이 나타납니다.

새로운 단락을 시작하지 않고 줄 바꿈을 원할때에 사용하는 태그입니다. <br>태그는 “break”에서 나온 용어이고, 

이 태그는 따로 종료 태그를 가지지 않습니다. 또 br 태그는 다른 태그 중간 중간에 쓸 수 있습니다.

그래서 줄 바꿈이 필요하실 때 마다 쓰실 수 있습니다.

그럼 예를 들어 코딩을 보시겠습니다.

이렇게 p 태그 속 중간중간에 < br > 태그를 삽입하여 줄바꿈이 필요 할 때마다 사용하였습니다.

따로 <p>태그를 여러개 사용할 수 도있지만 이렇게 사용하면 편할 수 있습니다 !

그러면 브라우저에 이렇게 표시됩니다.

이처럼 나타나게 됩니다.

이 태그는 프로그래머가 입력한 그대로 화면에 나타나게 할 수 있는 태그입니다. 

이 용어는 “previously formatted text”에서 나온 용어이고, 이것을 이용하면 개발자가 입력한 스페이스나 탭, 줄 바꿈이 그대료 유지됩니다.

줄 바꿈할때 p 태그나 br 태그를 또 생성할 필요 없이 코딩한 값대로 브라우저에 표시되게 됩니다.

그럼 예시를 보시겠습니다.

만약 p태그를 이용해 프로그래머가 임의로 줄바꿈을 했을 때는 이렇게 나타납니다.

이렇게 줄바꿈이 인식이 되지 않은채로 나타나게됩니다.

pre 태그를 사용한 예시를 보겠습니다.

이렇게 pre 태그를 이용하여 줄바꿈이 필요한 순간에 개발자가 줄바꿈을 이용하여 나타내면

pre 태그는 개발자가 입력한대로 똑같이 출력하게됩니다.

웹 브라우저에 어떻게 출력되는지 보겠습니다.

이렇게 스페이스바를 친곳은 입력된 만큼 출력되고

줄바꿈을 이용한 곳 또한 입력된 만큼 똑같이 출력되는걸 보실 수 있습니다.

헤딩은 웹 페이지의 머리말 ( headline ) 입니다. 웹 피이지를 신문이라고 가정한다면 헤딩은 신문의 머리기사와 같다고 볼 수 있지요.

머리기사도 여러 크기가 있는 것 처럼, 헤딩도 <h1> 부터 <h6> 까지 6개의 태그를 가지고 있습니다.

1이 제일 큰 크기를 가지고 숫자 순대로 크기가 작아집니다. 헤딩태그는 글자 크기를 조절하는 기능이 아닌

머리말기능으로써 소제목이라고 알아두셔야합니다. 글자 크기를 위해 사용하셔서는 안됩니다.

글자크기는 css 에서 배우게 됩니다.

그럼 각 태그마다 크기와 어떻게 출력되는지 보겠습니다.

예를들어 이렇게 코딩을 했다면 웹 브라우저에는 이렇게 출력됩니다.

이렇게 출력됩니다 ! 잘 참고하셔서 원하는 크기의 heading 태그를 사용하시면 됩니다.

오늘의 html 강좌는 여기서 마치도록 하겠습니다. 감사합니다.