찰리 버스 Charlieverse

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

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

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

 아주 오랜만에 그림 연습으로 돌아왔습니다. 캐릭터 연습시간입니다. 캐릭터 연습은 작년 11월이 마지막 시간인 것으로 나오네요. 그동안 그림을 전혀 그리지 않은 것은 아니지만 완성 시간이나 영상 편집 시간을 갖지 못해서 이제서야 찾아오게 되었네요. 오늘은 의상 컨셉을 정해서 스타일 연습을 해보려고 하는데요. 이번 의상은 1800년대 포병 의상 입니다. 바로 그려볼게요.

<준비물> 

 #스타일 컨셉 (Style Concept) 그리기

  Step 1 - 위아래로 넉넉하게 영역을 남겨둔채 크기를 정합니다.

  Step 2 - 전신의 정면과 측면을 그리기 위한 6등분선 6개를 먼저 준비하고 한 등분을 아래에 덧붙여 7등분선으로 그립니다. 

  Step 3 - 얼굴/목/몸통과 하체 등을 간단한 도형 형태로 만들고 팔은 선으로 간단하게 표시합니다.

  Step 4 - 얼굴/몸통/팔/다리 발의 간단한 형태를 그립니다. 옆면의 가슴과 허리부분은 기울기를 생각해서 그리겠습니다.

  Step 5 - 이목구비/턱/목/가슴에서 골반까지 형태/허벅지/종아리/발/발가락/팔/손 등의 형태를 간단하게 그립니다.

  Step 6 - 얼굴 형태/관절/각 인체의 중요 근육을 표현합니다.

  Step 7 - 각 의상의 스타일을 외형 위주로 체형에 맞게 간단히 스케치합니다.

  Step 8 - 의상의 내부 디테일과 주름을 그립니다.

  Step 9 - 전체적인 선을 정리합니다.

 #영상으로 보겠습니다. 

 오랜만의 인체가 들어간 그림이라서 그런지 예전 캐릭터 그림이랑 분위기가 달라 보이네요. 앞으로도 뛰엄뛰엄 그려질 것 같은데 퇴행하게 되는게 아닐런지 우려가 되네요. 다른 한편으로는 그래도 그림은 그려졌구나 라는 생각이 듭니다. 느리지만 한 장 씩 완성시켜보겠습니다. 다음 시간에는 도 다른 그림으로 찾아올게요. 감사합니다.

네이버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에서 영상보기

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

 거의 한 달 정도 만에 HTML5 시간으로 찾아왔습니다. 오늘도 가볍게 태그 4가지만 소개해볼 생각인데요. 이번에 알아볼 태그는 블록 태그라는 주제로 묶어보았습니다. 블록 태그는 제가 만들어낸 단어는 아니구요. 태그의 성질 중에서 한 줄 영역을 다 사용해서 블록처럼 위아래로 쌓이느냐 아니면 아니면 콘텐츠의 크기만큼만 영역을 사용하고 바로 옆으로 다음 태그를 붙여서 사용하느냐의 차이입니다. 한 줄을 다 사용하면 블록 태그이고 그렇지 않다면 인라인 태그라고 불리는 것 같습니다.
 지금까지 소개됐던 태그들 중에도 블록태그와 인라인 태그들이 있었는데요. <p>, <h1>~<h6> 태그의 경우에는 사용할 때 마다 바로 바로 줄이 바꼈었죠? 이런 태그를 블록태그라고 하고요. <b>,<i> 태그 처럼 내용에만 영향을 끼치거나 줄바꿈이 일어나지 않는 태그들은 인라인 태그라고 할 수 있습니다.
 여기서 주의해야 할 점은 줄바꿈이라고 해서 문서 형식으로써의 <br>태그같은 줄바꿈이 아니라 영역이 완전히 분리되는 줄바꿈이라는 것 입니다. 그리고 참고로 <br>태그는 기능적인 태그로 인라인 태그에 속합니다. 
 그렇다면 오늘 소개할 태그들은 같은 블록 태그임에도 왜 <p> 태그나 <h1>태그처럼 다른 주제가 아닌 블록 태그로 묶었을까요? 그 이유는 오늘 소개할 태그들이 정말 블록 태그로써의 기능만 하기 때문이죠. 한번 만나볼까요?

 div - 문서를 정의하는 태그 

 header - 문서의 머리(윗부분)을 정의하는 태그 

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

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

 이 4가지의 기능은 이 태그 안에 이러이러한 콘텐츠를 넣는 것을 추천합니다 라는 의미의 정의하는 것이 다 입니다. div 태그 같은 경우 무슨 내용이든 다 집어넣을 수 있는 태그라는 것을 알 수 있습니다. 그렇다면 div 만 있어도 될텐데 그 아래의 태그들은 왜 생겨났을까요? 예전에는 실제로 div 태그만이 있었고 아래의 태그들은 없었습니다. 하지만 웹사이트를 제작함에 있어서 공통적으로 나누어지는 부분들이 생겨나기 시작했을테고 div에 속성을 부여해서 영역을 나누게 되면 코드의 낭비도 생겨나겠죠? 그러니까 이용자들이 자주 사용하는 행동들이 반영된 결과라고 생각하면 되겠습니다. 지금은 단순하게 각각 저런 이름들로 영역을 나눌 수 있구나 정도로만 이해하면 되겠습니다. 

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

<header>내용</header>

<nav>내용</nav>

<main>내용</main>

 사용법이 정말 간단하죠. 단순하게는 이렇게 따로 사용하면 되고 예전에 알아본 것 처럼 부모 태그와 자식 태그로 나누어서 각 태그들을 필요에 따라서 포함시키는 형태로 사용하시면 되겠습니다.

 이제 영상 화면을 보면서 조금 더 살펴볼게요.

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

 #블록 태그(Block Tag)(1)(div / header / nav / main)

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

 그리고 바로 div, header, nav, main 태그를 간단하게 작성해서 저장하겠습니다.

 브라우저로 보면 깔끔하게 한줄씩 나타나죠.   

  Step 2 - 여기서 F12 혹은 브라우저 설정 메뉴에서 개발자도구를 실행합니다. 개발자 도구는 대부분의 브라우저에 포함된 기능이고 대부분 F12가 단축키로 설정되어 있을 것 입니다. 
 개발자 도구에는 현재 페이지가 어떻게 구성되어있고 어던 소스들이 연결되어 있는지 등이 보여집니다. 그리고 그 외의 다양한 기능들이 있는데 저도 테스트 할 때 외에는 잘 사용하지 않아서 깊숙한 기능은 잘 알지 못합니다. 이번 시간에는 블록 태그들의 영역이 어떻게 형성되어있는지 보기 위해 실행해보았습니다. 

 보시다 시피 파란영역으로 각 태그가 차지하고 있는 영역을 보여주고 있습니다. 글자가 포함된 부분 외에 그 줄 전체를 포함하는 것을 볼 수 있습니다.

  Step 3 - 간단하게 div 내부에 다른 태그들을 다시 배치해볼게요. header 안에는 nav 태그도 넣어볼게요.

 그리고 다시 브라우저에서 확인해보겠습니다.

 많이 변할 것은 없습니다. 하지만 개발자도구를 통해서 어떤 태그가 얼마만큼 영역을 차지하는지 변화가 보입니다.

  Step 4 - 마지막으로 약간의 구성을 만들어볼게요. main 태그 안으로 콘텐츠를 넣을 div 태그를 몇 개 넣었습니다.

  브라우저에서 다시 확인해보면 크게 변한 것은 없지만 태그들이 쌓여있는 것이 보입니다. 

 그냥 단순하게 태그들을 쌓은 것 같지만 간단한 웹사이트 구성으로 볼 수도 있습니다. 웹사이트의 구조는 이렇게 만들어집니다.

 #영상으로 보겠습니다. 

 다음 시간에도 블록 태그 몇 가지를 더 소개하겠습니다. 조금씩 웹사이트에 필요한 것들이 갖춰지는 것 같네요. 아직 콘텐츠와 관련된 태그들이 나오지 않아서 심심해 보이지만 얼마남지 않았습니다. 조금 더 힘내봅시다. 다음 시간에 만나요.

네이버TV에서 영상보기

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

 새해 복 많이받으세요 여러분. 오늘은 사슴벌레 그리기로 찾아왔습니다. 이번에 그려볼 사슴벌레는 가위사슴벌레속에 속하는 엘라푸스 가위 사슴벌레입니다. 이름이 아주 길면서 멋지죠? 생긴 것도 곤충이나 메커닉 쪽을 좋아하시는 분들은 관심있으실 것 같은 외관입니다. 엘라푸스라는 이름만 들어보면 어딘가 지역 이름일 것 같았는데 서식지는 인도네시아 수마트라 섬이고 엘라푸스는 사슴이라는 뜻이라고 하네요. 직역하면 사슴가위사슴벌레가 되겠네요. 이제 지금까지 처럼 과정을 나누어서 그려보겠습니다.

<준비물>

 #엘라푸스 가위 사슴벌레(Cyclommatus elaphus)

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

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

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

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

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

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

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

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

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

 #영상으로 보겠습니다. 

 가위사슴벌레들은 다른 사슴벌레들과 다른 독특한 형태의 턱이 특징이죠. 몸통과 거의 비슷한 길이로 보입니다. 이렇게 오늘도 한 개체 그려놓고 나갑니다. 모두 명절 기간 잘 보내시고 다음 시간에도 새로운 그림으로 찾아올게요. 감사합니다.

네이버TV에서 영상보기