찰리 버스 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에서 영상보기

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

 오늘은 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에서 영상보기

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

 오늘은 html을 공부해보려고 해요. 지난 시간 블록 태그에 이어서 오늘은 처음으로 단독 태그 소개입니다. 하나의 태그 만을 소개하지만 오히려 내용의 양은 더 많을 것 같은데요. 오늘 소개할 태그는 a 태그 입니다. 이름만 들어서는 b태그 처럼 텍스트에 변화를 주는 태그처럼 생각될 수도 있지만 a 태그는 html에서 핵심이 되는 태그들 중에 하나라고 생각됩니다.  

 a - 페이지에서 다른 페이지로 연결하는 하이퍼링크를 정의.

 예) <a href = "http://www.ex.com">링크</a>

 a 태그는 위 설명 처럼 페이지와 페이지를 연결시켜주는 링크 생성 태그입니다. 웹에서 이 사이트에서 저 사이트로 넘어가는 통로 역할을 해주는 것 입니다. 정말 중요 기능인 것이죠. 하지만 사용방법은 생각 보다 간단합니다. 주요 속성만 잘 사용한다면 여러분들도 얼만든지 링크를 생성할 수 있습니다. 
 기본적으로 href 속성에 이동할 페이지의 경로를 작성하면 되는데요. 위의 예시 처럼 완전한 웹사이트의 주소를 작성할 수도 있지만 다른 경로 설정 방법들도 있으니까 알아보도록 할게요.

 경로 설정
 
 1)절대 경로 - 특정 웹사이트의 경로를 직접적으로 설정 
 예) <a href = "http://www.ex.com">링크</a>

 2)상대 경로 - 웹사이트 파일의 위치 경로를 설정
 예) <a href = "ex.html">링크</a>

 3)id 경로 - 문서 내 id 속성을 부여한 특정 부분의 경로를 설정
 예) <a href = "#ex_test01">링크</a>
     <div id = "ex_test01">테스트</div>

 href 속성으로 경로를 설정하는 방법은 위 세 가지 말고도 목적에 따라 더 있지만 여기서는 이 세 가지만 다루도록 할게요. 
 절대 경로는 특정 경로를 직접적으로 설정하는 방법으로 http:// , https://exx.com 과 같이 페이지의 주소를 이용해 그대로 이동하는 방법입니다. 
 상대 경로는 페이지의 파일을 불러오는 것이라고 생각하면 될 것 같은데요. 현재 페이지에서 해당 페이지의 파일이 있는 폴더로 경로를 설정해서 해당 파일을 불러오는 방법입니다. 메뉴를 만들고 우리가 만든 페이지를 불러온다면 이 방법을 주로 사용하겠죠?
 id 경로 설정은 우선 id라는 속성을 알아야 해요. id는 대부분의 태그에 사용이 가능한 전역 속성으로 태그에 유일한 이름을 발급해주는 속성이라고 생각하시면 되겠어요. a태그의 href 속성에서 사용할 때는 해당 id 이름에 #을 붙여 사용합니다. 그러면 해당 링크를 클릭했을 때 해당 id가 사용된 태그로 이동이 됩니다. id 과련 내용은 차후에 class 속성과 함께 다루는 것이 좋을 것 같아서 여기서는 요정도에서 넘어가겠습니다.

 target 속성 - 링크를 통해 페이지가 불려져 올 위치를 설정

 1)_blank - 페이지를 브라우저의 새로운 탭으로 불러온다.
 예) <a href = "ex.html" target = "_blank">링크</a>

 2)_self - 페이지를 현재 탭으로 불러온다.
 예) <a href = "ex.html" target = "_self">링크</a>

 중요 속성 중에 target 속성도 알아볼게요. target 속성은 불러올 페이지를 어느 위치에 불러올지를 정하는 속성입니다. 여기서는 브라우저 탭에서의 위치만 설정해보겠습니다. 탭과 관련된 속성값은 두 가지 있는데요. 하나는 _blank 이고 또 하나는 _self 입니다. 
 _blank 는 불러올 페이지를 현재의 탭이 아닌 새 탭에서 불러오게 되고 _self 는 현재 탭에서 그대로 불러오는 차이입니다. 기본값은 _self 이기 때문에 _self 를 사용할 때는 굳이 target 속성을 사용하지 않아도 되겠죠?

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

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

 #a 태그(a Tag)

  Step 1 - 언제나 처럼 index.html 파일과 브라우저를 열어서 깨끗하게 정리합니다.

 a태그에 href 속성으로 네이버의 주소를 작성해서 저장하겠습니다. 절대 경로인거죠.

 링크를 클릭하면 네이버 포털로 이동하는 것을 볼 수 있습니다.

  Step 2 - 다음에는 index.html 파일이 있는 폴더에 다음과 같은 내용의 1.html 파일을 만들어서 함께 넣어두겠습니다.

 그리고 index.html 에 1.html 의 경로를 작성해서 확인하겠습니다.

 브라우저에서 링크가 제대로 작동하는 것을 확인했습니다.

  Step 3 - id 경로를 적용해보기 위해 스크롤이 내려갈 만큼의 위치 차이가 나도록 예시태그를 마련하겠습니다.

 p 태그에 id 속성을 부여하고 해당 id 값을 경로로 설정한 a태그 링크를 만듭니다.

 브라우저에서 확인해보면 이렇게 해당 위치까지 이동하는 것을 볼 수 있습니다.

  Step 4 - target 속성도 알아볼게요. target에 _blank 값을 넣고 저장하겠습니다.

 브라우저에서 확인해보면 새로운 탭에서 페이지가 열리는 것을 확인 할 수 있습니다.

  Step 5 - target 속성의 _self 값도 사용해 보죠.

 브라우저에서 확인해보면 현재 탭에서 그대로 페이지가 열리는 것을 확인 할 수 있습니다.

  Step 6 - 갑자기 생각나서 이미지를 이용한 링크도 만들어 볼게요.

 이미지는 img 태그를 이용해서 삽입이 가능합니다. 이렇게 img태그를 a태그로 감싸면 링크가 만들어집니다.

 브라우저에서 확인해보면 이미지를 클릭했을 때 페이지가 이동됩니다.

 #영상으로 보겠습니다. 

 이번 시간에 사용한 태그에서 속성이나 속성값을 작성하는 것도 있었지만 파일의 위치나 id 속성, img 태그 같은 제대로 설명하지 못한 부분들이 있었는데요. 다른 태그들을 이야기하면서 조만간 다루도록 하겠습니다. 우선 다음 시간에는 img태그로 웹사이트에 이미지를 넣어보도록 하죠. 그럼 다음 시간에 만나요. 안녕~ 

네이버TV에서 영상보기

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

 이번에도 HTML5 시간으로 찾아왔습니다. 그림 포스팅을 기다리시는 분들도 계실텐데 안타깝게도 이번 역시 코딩 포스팅이 되었습니다. 오늘도 지난 시간에 이어서 블록 태그들을 소개할텐데요. 바로  시작해보겠습니다. 

 footer - 풋터(footer) 부분을 정의하는 태그 

 section - 부분(section) 문서를 정의하는 태그 

 article - 문서의 네비게이션 링크(메뉴 등)를 정의하는 태그 

 aside - 문서의 메인 콘텐츠를 정의하는 태그 

 오늘의 첫 번째 태그는 footer 태그입니다. 풋터 부분을 정의한다고 하는데 웹사이트의 하단 부분이라고 보시면 되겠습니다. header 태그의 반대 개념이라고 보면 되겠죠? section 태그는 단어 그대로 섹션으로 나누어진 부분의 태그입니다. article 태그 역시 section 태그 처럼 단어 내용을 그대로 정의하는 태그입니다. 마지막으로 소개할 aside 태그는 문서의 가장 자리에 자리하게 되는 부분들을 정의할 때 사용합니다. 물론 이전에 소개했던 태그들처럼 정의만 할 뿐 태그 이름에 맞는 내용이 꼭 들어가야하는 것은 아니죠. 하지만 정리가 잘 되려면 이름에 맞는 내용들을 삽입해 주는 것이 좋을 것 입니다.  

 간단하게 사용법도 알아볼까요?  
 
 예) 
<footer>내용</footer>

<section>내용</section>

<article>내용</article>

<aside>내용</aside>

 사용법 역시 기본적인 방법으로 열고 닫으며 사용하시면 되겠습니다. 지난 시간의 태그들의 이름까지 생각해서 구성을 해보자면

 <header>header
  <nav>nav</nav>
 </header>
 <main>
  <section>
    <article>내용1</article>
    <article>내용2</article>
    <aside>내용3</aside>
  </section>
 </main>
 <footer>footer</footer>

 이런 느낌으로 구성을 해 볼 수 있겠습니다. 머리부분에 header / 본 내용에는 main 과 section, article, div 등으로 채우고, 가장 아래에 정보 부분에는 footer를 이용하는 것 입니다. 아직 다른 콘텐츠 태그들이더 남아있기 때문에 지금은 이런 식으로 구성이 가능하다 정도로만 생각하겠습니다.  

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

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

 #블록 태그(Block Tag)(2)(footer / section / article / aside)

  Step 1 - 지난 시간 사용했던 index.html 파일과 브라우저를 열어서 깨끗하게 정리했습니다.

 비어있는 body 태그 속에 footer, section, article, aside 태그를 간단하게 작성해서 저장하겠습니다.

 브라우저로 보면 한 줄 씩 태그 속 내용들이 나타나는 것을 확인 할 수 있습니다.  

  Step 2 - 지난 번 처럼 이번에도 F12 혹은 브라우저 설정 메뉴에서 개발자도구를 실행해서 블록 태그들의 영역이 어떻게 나타나는지 확인해 볼게요.

  Step 3 - 다시 메모장으로 돌아와서 지난 시간에 못 보여들였던 인라인 태그와 블록태그의 차이를 보여드릴게요. 인라인 태그 중 하나인 <b>태그를 작성하고 브라우저에서 확인하겠습니다.

 개발자 도구를 통해 살펴본 <b>태그는 해당 내용의 크기 만큼만 표시가 됩니다.

 다른 블록 태그들 처럼 한줄 전체를 차지하고 있지 않아요.

  Step 4 - 이번에는 지난 시간에 알아본 header / nav / main 도 함께 사용해서 구성을 해보겠습니다.

 브라우저에서 확인해보면 블록태그들 답게 아래로 정리되는 모습을 볼 수 있습니다.

 여기서 좀 더 모양새가 있어보이게 제목부분에는 h1~h6 태그들을 함께 넣어볼게요. 

 뭔가 모양새가 만들어져가는 것 같습니다. 오늘은 여기까지 입니다.

 #영상으로 보겠습니다. 

 텍스트 미디어 뿐이지만 웹사이트의 형태가 조금식 갖춰지는 것 같지 않나요? 코딩 공부라는게 옆에서 봤을 때는 알 수 없는 영어 단어들이 어두운 화면 속에 이리저리 나열되어 있어 재미없어 보이지만 다르게 보면 화면에 코드들도 그림을 그리는 행위라는 생각도 들어요. 그 그림은 단순하게 글자로만 이루어질 수도 어떤 이미지가 될 수도 있고 애니메이션이나 영상이 될 수도 있겠죠? 다음 시간부터는 그런 콘텐츠를 다룰 수 있는 태그들을 하나씩 소개해 보겠습니다. 다음에 만나요.  

네이버TV에서 영상보기