찰리 버스 Charlieverse

 안녕하세요. 찰리입니다. 

 아주 오랜만에 html 공부 시간으로 찾아왔습니다. 이번 시간에는 소리와 관련된 audio 태그를 알아보겠습니다. 

 audio - 문서에 오디오 콘텐츠를 포함하는 태그.

 예) <audio src="music.mp3"></audio>

      <audio>
         <source src="music.ogg" type="audio/ogg">
         <source src="music.mp3" type="audio/mpeg">
         Your browser does not support the audio tag.
      </audio>        

 audio 태그는 웹문서에 오디오, 소리 콘텐츠를 포함시킬 수 있는 태그입니다. 웹페이지에 bgm을 설치할 수 있는 태그인 것이죠. 
 사용법은 audio 태그 자체에 src로 파일 위치를 설정해서 사용하는 방법이 한 가지 있고 source 태그를 이용하여 환경에 따라서 우선적인 파일을 로드해서 사용할 수 있게 하는 방법이 있습니다. 브라우저에 따라서 사용이 가능한 파일 포맷이 다르기 때문에 사용자를 위한다면 이렇게 여러가지 포맷의 소스를 사용하는 것이 좋겠습니다.

 소리와 관련된 태그인 만큼 여러가지 속성도 있겠죠? 속성들도 알아보겠습니다.

 audio 태그 속성

1.src - 파일의 위치 경로를 설정하는 속성
예) <audio src="music.mp3"></audio>

2.autoplay - 오디오 콘텐츠를 곧바로 실행
예) <audio src="music.mp3" autoplay></audio>

3.controls - 오디오 콘텐츠 컨트롤러를 표시
예) <audio src="music.mp3" controls></audio>

4.loop - 반복 재생 설정
예) <audio src="music.mp3" loop></audio>

5.muted - 음소거 기본 설정
예) <audio src="music.mp3" muted></audio>

6.preload - 문서가 열릴 때 오디오 콘텐츠 로드 여부 설정
예) <audio src="music.mp3" preloa="auto/metadata/none"></audio>

 먼저 src 속성은 img태그에서와 마찬가지로 파일 위치 경로를 설정하는 속성입니다. autoplay는 자동으로 오디오를 재생하는 속성입니다. 말 그대로 홈페이지에 방문하자마자 bgm을 틀어줄 수 있는 속성입니다. 하지만 autoplay 속성은 최근 각 브라우저의 보안 문제로 인해서 작동이 되지 않을 수 있습니다. 우선 저도 예전에는 사용할 수 있었지만 지금 이 글을 쓰는 시점에서는 사용이 되지 않더라구요. controls는 오디오 콘텐츠의 컨트롤러 표시 여부를 결정하는 속성이고 loop는 이름처럼 반복재생을 설정하는 속성입니다. muted도 이름처럼 음소거를 설정하는 속성입니다.
 preload 속성은 오디오 콘텐츠의 로드 여부를 설정하는 속성으로 재생이 아니라 로드라는 점이 autoplay와 다른 점입니다. 로드는 오디오 파일을 문서로 연결시켜주는 작업이라고 할 수 있는데요. auto값으로 설정되면 곧바로 재생이 가능하도록 파일이 로드되고 metadata의 경우에는 메타데이타의 값만을 로드하고 none으로 설정되면 로드 되지 않은 상태로 문서가 열립니다. 이 중에서 표면적으로 알 수 있는 상태는 none 일 경우인데 none 상태에서 컨트롤러를 보면 회색으로 비활성화가 되어있습니다.

 이제 사용하면서 더 살펴보겠습니다.

<준비물>
 에디터는 메모장 / 브라우저는 웨일을 사용하겠습니다.

 #audio 태그(audio Tag)

  Step 1 - 오늘도 html 폴더에 index.html 파일을 만들어 두고 bgm 폴더에 bgm.mp3 파일과 bgm.ogg 파일을 넣었습니다.

 index.html 파일에 우선 bgm 폴더의 bgm.mp3 파일을 불러오는 audio 태그를 작성하고 확인하겠습니다.

 브라우저에서 확인해 보면 아무것도 표시가 되지 않아요. 오디오 파일을 단순히 연결시키만 했기 때문인데요.

 개발자 모드에서 audio 태그가 포함된 것을 확인할 수 있습니다.

  Step 2 - audio 태그를 눈으로 볼 수 있게 controls 속성을 작성하여 확인하겠습니다.

 브라우저의 이제 컨트롤러가 보이는 것을 확인할 수 있습니다. 음악재생도 잘 되구요.

 그리고 autoplay 속성을 사용해보지만 역시나 제대로 작동되지 않습니다.

 다음으로 muted 속성을 사용해보면 컨트롤러에 음소거가 표시되면 제대로 적용되는 것을 볼 수 있습니다.

 다음 속성은 loop 속성입니다. 음악이 끝나면 자동으로 반복재생 되는 것을 확인할 수 있습니다.

 마지막으로 preloaddml 속성값 auto / metadata / none 을 차례대로 사용해보면

 auto와 metadata 때는 외관상 크게 변화하는 모습은 없습니다.

 하지만 none 상태일 때는 컨트롤러가 비활성화되어 회색으로 표시되는 것을 볼 수 있습니다. 물론 재생을 하면 곧바로 음앇이 재생이 되네요. 

  Step 3 - 이제 audio 태그의 대체 문구를 작성해볼게요. audio태그 속에 경고 문구를 작성하겠습니다.

 확인을 하고 싶지만 audio 태그가 잘 작동되고 있어서 글자를 볼 수가 없네요.

 이번에는 source 태그를 이용해서 파일을 연결해보겠습니다. 우선 mp3 파일부터 연결해서 작동시켜 볼게요.

 브라우저에서 잘 작동하구요.

 source 태그로 ogg 파일도 연결시키겠습니다. 이렇게 하면 mp3파일을 지원하지 않는 브라우저에서는 ogg 파일이 연결되겠죠?

 반대로 ogg 파일을 메인으로 사용하려면 코드만 위쪽으로 위치 변경을 하면 되겠습니다.

 브라우저에서 확인을 해보고 마치도록 하겠습니다.

 #영상으로 보겠습니다. 

 audio 태그는 img 태그처럼 본격적인 콘텐츠용 태그입니다. 파일을 연결 시키는 태그인 만큼 호환이 되지 않을 경우 제대로 작동되지 않을 수 있습니다. 원래 기획한 것을 모든 환경에서 정상적으로 작동시키는 작업을 크로스 브라우징이라고 한다죠. 기본적인 태그와 구조 연습이 어느 정도 진행되면 이런 환경적인 공부도 더 해봐야겠어요. 다음 시간에도 새로운 태그 설명으로 돌아오겠습니다. 감사합니다.

네이버TV에서 영상보기

 안녕하세요. 찰리입니다. 

 오늘은 즐거운 html 공부 시간입니다. 이번 시간에는 제목에 보이는 대로 두 가지 종류의 태그를 간단하게 살펴보겠습니다. 두 가지 태그지만 함께 사용하는 부속 태그까지 포함해서 총 세 가지 태그 알아보도록 할게요. 

 figure - 웹문서에 이미지, 도표와 같은 독립적인 콘텐츠를 포함하는 태그.

 figcaption - figure 태그에 포함된 이미지의 캡션을 정의하는 태그.

 예) <figure>
       <img src = "image.jpg">
       <figcaption>이미지에 대한 설명</figcaption>
      </figure>

 오늘의 첫 번째 태그는 figure 태그입니다. 설명으로는 독립적 콘텐츠를 포함하는 태그라고 되어있지만 자체적으로는 콘텐츠를 연결할 수 없고 내부에 img 태그나 다른 콘텐츠 태그를 포함하는 블록 태그의 형태로 사용됩니다. 

 figcaption은 figure 태그에 포함된 이미지와 같은 콘텐츠에 캡션 정보 등을 작성할 수 있는 태그입니다. figure 태그와 figcaption의 예시로 적절한 콘텐츠라면 기사 내부에 포함된 참고 자료 이미지 등을 들 수 있을 것 같습니다. 잡지에도 있는 인용 및 참고 이미지 같은 것 말이죠. 

 span - 문서의 일부를 인라인 상태로 분리하는 태그.
 
 예) <p>아주 길고 긴 문장을 만들기 위해 <span style="color:red">단어</span>를 잇고 이어서 만드는 예시 문장.</p>

 figure 태그 다음은 span 태그입니다. 일전에 블록태그 이야기를 하면서 인라인 태그에 대해 잠시 이야기를 한 적이 있었죠? 블록 태그와 달리 라인에서 해당 콘텐츠 영역만을 포함하는 태그를 인라인 태그라고 했었습니다. span 태그는 태그로 감싸진 부분을 인라인 태그로 묶어놓는 태그라고 할 수 있는데요. 이렇게 분리된 부분에는 특별한 효과가 들어가거나 하는 것은 아닙니다. 대신 분리된 span 태그를 통해 다른 속성이나 효과를 부여할 수는 있겠습니다.
 예시에서는 p태그의 한 단어를 span 태그로 분리하고 그 span 태그에 style 속성을 적용해 해당 단어만 붉은 색 글씨로 변환시킨 것인데요. 블록화를 시키지 않고 인라인 상태로 효과를 줄 때 사용할 수 있겠습니다. 

 직접 사용하면서 더 살펴보겠습니다.

<준비물>
 에디터는 메모장 / 브라우저는 웨일을 사용하겠습니다.

 #figure/span 태그(figure/span Tag)

  Step 1 - html 폴더에 index.html 파일과 img 폴더를 만들고 img 폴더에는 image_01.jpg 파일을 넣었습니다.

 index.html 파일에 우선 img 폴더에 있는 이미지 파일을 불러오는 img 태그를 작성하겠습니다.

 브라우저에서 확인해 보면 이미지가 표시되는 것을 확인 가능합니다.

  Step 2 - 이제 img 태그를 figure 태그로 감싸도록하겠습니다.

 브라우저의 개발자 도구를 통해 확인을 해보면 이미지가 figure 태그를 통해 블록화 된 것을 볼 수 있습니다.

 그리고 img 태그 아래로 figcaption 태그도 작성해보겠습니다.

 브라우저에서 이미지 아래로 나란히 캡션이 보입니다.

  Step 3 - 이번에는 span 태그를 사용해볼게요. figcaption에 그대로 우선 사용해보죠.

 브라우저에서 개발자도구로 보면 span 태그가 적용된 부분만 따로 영역으로 표시됩니다.

 span 부분에 스타일 속성을 적용해서 글자 색을 변경해보겠습니다.

 역시 브라우저에서 색이 변경된 글자를 확인할 수 있죠.

 p 태그에 문장을 작성하고 그 사이의 단어에 한 번 더 span 태그와 스타일을 적용해보겠습니다.

 브라우저에서 확인을 해보고 마치도록 하겠습니다.

 #영상으로 보겠습니다. 

 이번 시간은 이전의 블록 태그와 인라인 태그의 연장된 내용이 것 같네요. 콘텐츠를 블록화 시킨 figure 태그와 특정 부분을 인라인 화 시키는 span 태그에 대한 내용이었습니다. 다음 시간에도 또 다른 태그를 소개해보겠습니다. 감사합니다.

네이버TV에서 영상보기

 안녕하세요. 찰리입니다. 

 이번 주에도 사슴벌레를 그려보았습니다. 오늘의 사슴벌레는 타우루스 사슴벌레 입니다. 생김새를 보면 지난 번의 왕사슴벌레와 비슷해 보이는데 분류를 보면 같은 왕사슴벌레속에 속한 다는 것을 알 수 있습니다. 하지만 왕사슴벌레와 달리 서식지는 필리핀, 인도네시아와 같이 동남아시아 권에 주로 서식하는 것 같아요. 사전조사는 이 정도에서 마치고 그려보겠습니다.

<준비물>

 #타우루스 사슴벌레(Dorcus taurus)

  Step 1 - 턱과 몸통까지의 크기를 정하고 턱과 머리와 가슴, 배부분의 비율을 간단하게 구분하고 다리는 마디를 나누어 선으로 표시합니다. 

  Step 2 - 턱과 머리 / 가슴 / 배의 형태를 직선 위주로 단순하게 그리고 다리 부분도 마디 별로 단순하게 그립니다.

  Step 3 - 머리 / 가슴 / 배의 형태를 좀 더 자세하게 스케치합니다. 눈과 이음새 부분들을 특히 신경쓰면서 그립니다.

  Step 4 - 턱의 톱니 부분들, 다리의 돌기와 다리의 마디들의 형태를 스케치합니다.

  Step 5 - 각진 몸통의 외곽을 곡선으로 다듬고 들어가는 부분을 강하게, 나오는 부분은 연하게 선을 조절하며 그립니다.

  Step 6 - 몸통 부분과 마찬가지로 선의 굵기를 조절하며 외곽선을 정리합니다.

  Step 7 - 몸통 내부에 명암과 색의 차이가 나타나는 곳 위주로 묘사합니다.

  Step 8 - 턱과 다리 부분에서도 명암의 차이가 나타나는 곳의 묘사를 합니다.

  Step 9 - 어두운 부분 위주로 빗금선으로 단순하게 그림자를 넣습니다.

 #영상으로 보겠습니다. 

 날씨가 갑자기 더워졌다가 다시 추워지는 이상한 날들이 이어지고 있어요. 다들 급격한 온도 변화에 건강 조심하시구요. 지구도 그만 아팠으면 좋겠습니다. 저는 다음 그림으로 다시 돌아올게요. 감사합니다.

네이버TV에서 영상보기

 안녕하세요. 찰리입니다. 

 오늘은 html 공부를 해보겠습니다. 이번에는 지난 시간 끝에 잠시 스쳐지나갔던 img 태그를 알아볼게요. img 태그는 문서에 이미지를 포함시켜주는 태그에요. 웹사이트를 이미지로 꾸미고 싶다면 필수적인 태그가 되겠습니다.

 img - 문서에 이미지를 포함하는 태그.

 예) <img src = "image.jpg">

 img 태그는 닫기 태그 없이 열기 태그만으로 사용합니다. src 속성으로 이미지 파일의 위치 경로를 설정해서 문서로 불러오게 됩니다.

 src 속성과 지난 시간 a 태그의 href 속성처럼 파일 경로를 다루게 되는 경우가 자주 있으니까 파일 위치 별로 경로 설정법을 알아가도록 할게요.

 파일 위치 별 경로 설정
 
 1) ./ - 파일이 불러올 문서와 같은 폴더에 있을 때. 생략가능.
 예) <img src = "./imgae.png">
      <img src = "imgae.png">

 2) ../ - 파일이 불러올 문서 보다 상위 폴더에 위치할 때.
 예) <img src = "../imgae.png">
      <img src = "../../imgae.png">(파일이 상위에 상위 폴더에 있을 때)

 3)폴더이름/ - 파일이 불러올 문서 보다 하위 폴더에 위치할 때. 
 예) <img src = "폴더이름/imgae.png">
      <img src = "폴더이름/폴더이름/imgae.png">(파일이 하위에 하위 폴더에 있을 때)

 4)절대경로 - 특정 경로에 있는 파일을 문서로 불러올 때.
 예)  <img src = "http://exxx.com/imgae.png">

 위에서 부터 쭈욱 훑어보죠. 먼저 파일 앞에 ./을 붙이는 경우는 파일과 해당 html 문서가 같은 폴더에 있을 때 입니다. 같은 폴더에 위치하기 때문에 생략을 해도 정상적으로 이미지가 보입니다. 
 파일이 문서 보다 상위  폴더에 있을 때는 파일이름 앞에 ../ 을 붙여주면 됩니다. 이때 상위폴더로 올라갈수록 ../ 를 하나씩 더 붙여주면 상위 폴더에서의 파일위치는 쉽게 설정이 가능합니다.
 반대로 파일이 문서 보다 하위폴더에 있다면 파일이름 앞에 하위폴더의 이름을 붙여줍니다. 폴더이름/ 이렇게요. 여기서도 하위폴더 안에서 다시 하위 폴더 안에 있는 파일을 불러와야 할 경우가 있을텐데 폴더이름 사이에 / 를 넣어서 파일이 보관된 폴더까지 계속 이름을 적어주면 되겠습니다.
 여기까지는 어떻게 보면 상대 경로 설정법이라고 할 수 있겠죠. 상대 경로에서 폴더 위치에 따른 설정만 다시 알아봤습니다. 여기에 절대경로의 파일 위치 설정을 덧붙이자면 특정 웹사이트의 이미지나 파일을 불러와야 하는 경우 http://ex.com/파일이름.포맷형식 으로 불러올 수 있습니다. 이 경우에도 폴더에 따른 위치 변화가 있다면 앞서와 같이 설정을 하면 되겠습니다.

 이제 다시 img 태그로 돌아와서 img 태그의 속성들 중 자주 사용하는 것들 위주로 알아볼게요.

 img 태그 속성

 1)src - 불러올 이미지의 경로를 설정
 예) <img src = "imgae.png">

 2)alt - 이미지가 보이지 않는 특수한 경우 이미지를 대체하여 텍스트를 보여주는 속성
 예) <img src = "imgae.png" alt = "이미지 보이지 않음.">

 3)width - 이미지의 넓이를 조절.(단위 px)
 예) <img src = "imgae.png" width = "200">

 4)height - 이미지의 높이를 조절.(단위 px)
 예) <img src = "imgae.png" height = "200">

 src는 계속 언급했으니까 바로 alt 속성으로 넘어갈게요. alt 는 대체 속성입니다. 이미지가 보이지 않게 되는 경우 텍스트를 대신 보여주는 속성이죠. 그리고 width 와 height 는 이미지의 너비와 높이 크기를 조절하는 속성입니다. 단위는 픽셀(px)이지만 단위를 적지 않고 숫자만 작성해도 적용이 됩니다.

 이제 직접 사용하면서 더 살펴볼게요.

<준비물>
 에디터는 메모장 / 브라우저는 웨일을 사용하겠습니다.

 #img 태그(img Tag)

  Step 1 - html 폴더에 index.html 파일과 1.png 파일을 함께 두는 것으로 시작하겠습니다.

 index.html 파일을 메모장에 열어서 깨끗하게 만들었습니다. 그리고 img 태그를 사용해보겠습니다.

 브라우저에서 확인해 보면 이미지가 표시되는 것을 확인 가능합니다.

  Step 2 - 이제 파일 위치 별로 경로를 설정해볼게요. 우선 a 폴더를 만들어서 이미지를 옮기고 브라우저에서 확인해보면 이미지 파일의 위치가 변경되어 보이지 않습니다. 

 파일 이름에 폴더이름인 a/ 를 붙여서 다시 확인해보면

 브라우저에서 다시 이미지가 보이게 되었습니다.

 이번에는 a 폴더 속에 b 폴더를 하나 더 만들고 이미지 파일을 옮겼습니다.

 브라우저는 당연히 이미지를 인식하지 못 합니다.

 a 폴더와 b 폴더까지 경로를 설정합니다.

 브라우저에서 이미지가 다시 보이게 되었습니다.

 이번에는 a 폴더로 이미지를 옮기고 index.html을 b 폴더로 옮겼습니다.

 브라우저에는 다시 이미지를 보이지 않고 이번에는 이미지가 상위폴더에 있으니까 ../를 사용해서 재설정하겠습니다.

 이미지가 다시 보이는 것을 확인했고

 다시 이미지 파일을 최상위  html 폴더로 다시 옮기고 index.html 파일은 그대로 b 폴더에 그대로 두겠습니다.

 그러니까 이미지 파일이 상위에 상위 폴더에 위치하고 있는 상태니까 ../../로 설정하고 다시 확인하겠습니다.

 브라우저에서 이미지가 보이는 것을 확인가능하죠.

  Step 3 - 이제 다시 폴더를 정리하고 alt 속성을 사용해보겠습니다. 적당히 대체 문구를 작성하고

 이미지가 보이지 않게 하기 위해서 폴더를 만들어서 이미지 파일을 옮기고 확인해볼게요.

 보이지 않는 이미지 대신에 글씨가 보입니다.

  Step 4 - 이번에는 width 와 height 를 사용해볼게요. 먼저 width 부터 사용해보면

 브라우저에서 이미지가 비율에 맞춰서 크기가 조절되었다는 것을 알 수 있습니다.

 height 를 사용할 때도 마찬가지이죠. width와 height 중 어느 한쪽만 사용할 경우 비율은 기본적으로 유지됩니다.

 하지만 이렇게 width와 height 의 값을 각각 입력하면 

 그 크기에 맞춰서 이미지가 나타납니다.

 #영상으로 보겠습니다. 

 드디어 웹사이트에 이미지까지 삽입할 수 있게 되었어요. 다들 축하드립니다. 이번 시간까지 계속 보신 분들이라면 간단하게 목록화된 자료 사이트 정도는 만들 수 있을 것 같네요. 하지만 이게 끝이 아니죠. 다음 시간에도 또 다른 태그들을 알아보자구요. 다음 시간에 만나요. 감사합니다.

네이버TV에서 영상보기

 안녕하세요. 찰리입니다. 

 오늘은 사슴벌레 그리기입니다. 오늘의 사슴벌레는 왕사슴벌레 입니다. 한국, 중국, 일본 동아시아에 주로 서식하고 한국에 서식하는 사슴벌레 중에서는 가장 오래 사는 종에 속한다고 합니다. 왕 이라는 단어가 붙은 것 처럼 크기도 다른 사슴벌레에 비해 큰 것 같군요. 사진으로 보면 국내에서 서식하는 다른 사슴벌레에 비해 확실히 넓고 튼튼해 보이는 외관을 가지고 있습니다. 한번 그려볼까요?

<준비물>

 #왕사슴벌레(Dorcus hopei)

  Step 1 - 턱과 몸통까지의 크기를 정하고 턱과 머리와 가슴, 배부분의 비율을 간단하게 구분하고 다리는 마디를 나누어 선으로 표시합니다. 

  Step 2 - 턱과 머리 / 가슴 / 배의 형태를 직선 위주로 단순하게 그리고 다리 부분도 마디 별로 단순하게 그립니다.

  Step 3 - 머리 / 가슴 / 배의 형태를 좀 더 자세하게 스케치합니다. 눈과 이음새 부분들을 특히 신경쓰면서 그립니다.

  Step 4 - 턱의 톱니 부분들, 다리의 돌기와 다리의 마디들의 형태를 스케치합니다.

  Step 5 - 각진 몸통의 외곽을 곡선으로 다듬고 들어가는 부분을 강하게, 나오는 부분은 연하게 선을 조절하며 그립니다.

  Step 6 - 몸통 부분과 마찬가지로 선의 굵기를 조절하며 외곽선을 정리합니다.

  Step 7 - 몸통 내부에 명암과 색의 차이가 나타나는 곳 위주로 묘사합니다.

  Step 8 - 턱과 다리 부분에서도 명암의 차이가 나타나는 곳의 묘사를 합니다.

  Step 9 - 어두운 부분 위주로 빗금선으로 단순하게 그림자를 넣습니다.

 #영상으로 보겠습니다. 

 그려놓고 보니 흔히 생각하는 사슴벌레의 정석처럼 생긴 것 같아요. 이렇게 한 마리씩 그릴 때 마다 모형이라도 있으면 참고도 할 수 있고 좋을 것 같다는 생각이 스멀스멀 올라오는데요. 저는 우선 그림에서 만족하고 좀 더 다양한 종류의 동식물들을 그려볼 수 있도록 해볼게요. 오늘은 여기까지 입니다. 다음 시간에 또 다른 그림 그리기로 찾아올게요.

네이버TV에서 영상보기