찰리 버스 Charlieverse

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

 거의 한 달 정도 만에 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에서 영상보기

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

 오늘은 HTML 연습으로 찾아왔습니다. HTML을 이루고 있는 요소인 태그에 대해 연습하고 있었죠? 지난 번 리스트 태그에 이어서 오늘은 표를 만드는 테이블 태그를 연습해볼게요.

 table - 테이블을 정의하는 태그 

 tr - 테이블의 행/가로줄을 정의하는 태그 

 th - 테이블의 셀(칸) 중에서 헤더부분을 정의하는 태그 

 td - 테이블의 일반적인 셀(칸)을 정의하는 태그 

 테이블을 이루는 태그는 이렇게 4가지를 많이 쓰는 것으로 보여요. 그중에서 필수로 보이는 태그는 table/tr/td 이 3가지는 꼭 들어가야 표가 만들어지겠습니다. 
 하나씩 보자면 일단 테이블의 큰틀을 table 태그로 만들고 tr 태그로 줄을 추가한 후에 각 줄 마다 td를 이용해서 칸을 나누는 것이죠. 그리고 th 태그는 td와 비슷하지만 가장 위에서 열의 이름을 정할 때 사용하는 태그라고 보시면 될 것 같아요. 
 th와 td는 기능적으로는 크게 차이가 나지 않지만 td의 경우 왼쪽 정렬이 기본이고 th의 경우 중앙정렬에 굵은 글씨로 나타나는 것이 차이입니다.
 
 예) 
<table>
 <tr>
  <th>이름</th>
  <th>나이</th>
 </tr>
 <tr>
  <td>이름1</td>
  <td>18</td>
 </tr>
 <tr>
  <td>이름2</td>
  <td>24</td>
 </tr>
</table> 
 
 위의 형태로 사용할 수 있겠습니다.

 그리고 th/td에는 셀을 병합하는 속성이 있는데요. colspan과 rowspan이라는 속성입니다. colspan은 가로 셀을 합치게 되고 rowspan은 세로 셀을 합치는 속성입니다. 병합이라고는 했지만 사실 셀의 행열의 개수를 보고 없어질 만큼의 th/td를 삭제하고 없어진 만큼 공간을 늘리는 형태입니다. 말로 설명하는 것 보다는 코드를 보여드릴게요

 <table>
  <tr>
   <th colspan="2">이름 나이</th>  
  </tr>

  <tr>
   <td rowspan="2">김이름<br>박이름</td>
   <td>18</td>   
  </tr>

  <tr>
   <td>24</td>   
  </tr>
 </table> 

 이 테이블에서 원래 가로 2 세로 3의 여섯 칸으로 이루어져 있었어요. 그런데 위의 th를 하나만 남기고 colspan을 사용하면서 th 하나가 두 칸의 길이만큼 늘어나게 되고 아래의 td에서는 rowspan으로 세번째 칸의 첫 번째 td를 삭제하고 그 자리만큼 세로로 칸을 늘리게 된 것입니다.   
 아마 대충을 이해를 하셨을테고 엑셀이나 한컴에서 표를 사용해보셨다면 어떤 형태인지 대충은 아실거라고 생각하고 직접 태그를 사용하는 모습을 보여드릴게요.

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

 #테이블 태그(table / tr / td / th)

  Step 1 - 우선 지난 시간 사용했던 index.html 파일과 브라우저를 열어서

 위의 table 태그 예시를 th를 제외하고 작성하겠습니다.

 테두리 선은 없지만 각 정보가 일정하게 나열되는 것이 보이죠?

  Step 2 - 이제 th를 포함해서 작성해볼게요.

 th를 작성한 부분은 중앙정렬로 바뀌고 글씨도 굵어졌습니다.

 이번 테이블 태그와는 상관없지만 테이블의 형태를 좀 더 알아보기 쉬게 간단한 CSS를 적용시켜볼게요.

 테두리가 생기면 이런 형태가 됩니다.

  Step 3 - 이제 colspan도 사용해볼게요. th 코드 한줄을 줄이고 colspan 속성값을 2로 했습니다.

 그러면 이렇게 한 칸으로 변하는 것이죠.

  Step 4 - 아래쪽의 td도 rowspan을 사용해볼게요.

  이렇게 하나의 영역이지만 두 셀의 크기만큼 차지하게 되었어요.

  Step 5 - 상관은 없지만 이름 2개가 가로로 나열되어있어서 지난 번 공부했던 br 태그를 이용해볼게요.

  이제 정리가 된 것 같아요. 여기까지입니다.

 #영상으로 보겠습니다. 

 테이블 태그가 왜 필요한지는 아마 수치와 데이터가 있는 문서를 다루시는 분들이라면 다들 아실거라고 생각해요. 데이터를 잘 정리해서 표로 만드는 것은 중요하니까요. 그리고 웹에서는 테이블 이용해서 영역을 구분할 때 사용하기도 합니다. 아마 앞으로 천천히 공부하게 될 것입니다. 다음에도 또 다른 태그를 들고 찾아올게요. 감사합니다.  

네이버TV에서 영상보기

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

 오랜만에 HTML 연습으로 돌아왔습니다. 이번 시간에는 리스트 태그를 연습해볼게요. 등장하는 태그로 보면 이번에도 3개의 태그가 소개되겠네요. 리스트 태그는 문서의 항목? 목차를 나열하는 태그입니다. 한번 살펴볼게요.

 ul - 순차적이지 않은 리스트. 

 <ul>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
 </ul>

 ol - 순차적 나열 리스트 태그 

 <ol>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
 </ol>
 
 이번에 소개할 리스트 태그 2개는 순차적 나열과 비순차적 나열로 나누어집니다. ul은 unorderd list의 약자이고 ol은 ordered list의 약자겠죠? 우선 ul, ol 로 리스트의 성격을 정하고 리스트는 li 태그를 자식 태그로 사용합니다.

 이번에는 ul / ol 태그의 속성도 소개해볼게요.

 ul 태그는 리스트 앞의 기호 형태를 정할 수 있는 리스트 타입 속성이 있습니다.

 <ul style="list-style-type:circle">
  <li>리스트1</li>
 </ul>

 <ul style="list-style-type:disc">
  <li>리스트1</li>
 </ul>

 <ul style="list-style-type:square">
  <li>리스트1</li>
 </ul>

 ul 앞의 기호를 변경하는 타입 속성은 스타일 속성에서 타입 속성으로 3가지로 정할 수 있는데요. circle 은 속이 비어있는 원, disc는 속이 채워진 원, square는 속이 채워진 사각형 입니다. 

 다음은 ol 태그의 속성 3가지를 살펴볼게요.

 첫 번째는 ul 태그 처럼 앞에 사용되는 기호를 변경하는 것인데 ol 은 순차적으로 나열되기 때문에 기호가 숫자나 순서가 있는 기호를 사용합니다.

 <ol type="1">  <li>리스트1</li>  </ol>

 <ol type="a">  <li>리스트1</li>  </ol>

 <ol type="A">  <li>리스트1</li>  </ol>

 <ol type="i">  <li>리스트1</li>  </ol>

 <ol type="I">  <li>리스트1</li>  </ol>

 첫 번째는 가장 알기 쉬운 숫자로 표기되고 두 번째는 소문자 알파벳, 세 번째는 대문자 알파벳, 네 번째는 소문자 로마숫자, 다섯 번째는 대문자 로마숫자입니다.

 다음 두 번째 속성은 reversed 속성입니다.

 <ol reversed>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
 </ol>

 사용법은 위 처럼 ol 태그 안에 속성으로 작성하면 되고 사용하게 되면 리스트 앞의 기호가 반대로 큰 숫자부터 표기됩니다. 1,2,3 순서라면 reversed 가 적용되었을 때 3,2,1 순서로 표기됩니다.

 ol의 마지막 속성은 start 속성입니다.

 <ol start="30">
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
 </ol>

 start 속성은 시작하는 순서를 정할 수 있게 해줍니다. 위의 예시에서는 30으로 시작했기 때문에 30,31,32 가 리스트 앞에 표기되었을 것입니다. 다른 타입으로 변경되어도 해당 타입에서 start의 순서가 적용된 기호부터 순서가 시작됩니다.

 그럼 이 세 태그들 사용하러 가볼게요.

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

 #리스트 태그(ul/ol)

  Step 1 - 이번에도 index.html 파일과 브라우저를 열어두고요.

 우선 ul 태그를 작성하고 브라우저에서 바로 확인해볼게요

  Step 2 - 다음으로 ul 태그를 복사해서 type을 변경해보겠습니다.

 작성 후 이번에도 브라우저로 확인해보면 각 기호가 어떻게 적용되는지 보실 수 있습니다.

  Step 3 - 다음은 ul 태그를 작성하고 바로 브라우저에서 확인해 볼게요.

 기본적으로 숫자가 앞에 표기되는 것을 알 수 있습니다.

  Step 4 - ul태그는 정리를 하고 ol태그를 복사해서 타입을 변경해보겠습니다.

  브라우저에서 보면 5가지의 변경된 타입을 확인할 수 있습니다.

  Step 5 - 맨 위의 태그에서 reversed 속성을 적용해볼게요.

  숫자가 역순으로 표기되는 것을 볼 수 있어요.

  Step 6 - 마지막으로 start를 사용해보겠습니다.

  숫자가 5번 부터 시작하는 것이 보입니다.

 #영상으로 보겠습니다. 

 리스트 태그는 기본적으로는 문서의 목차, 항목을 나타낼 수 있습니다. 인터넷에서의 목차나 항목은 단순히 어떤 내용이 포함되어있는지 정보를 제공하는 기능이 아니죠? 때에 따라서는 다른 태그와 기능들을 이용해서 네비게이션이나 메뉴의 역할을 할 수 있을겁니다. 이후에 공부하면서 적절하게 활용해보도록 하죠. 다음에도 또 다른 태그 공부로 돌아오겠습니다. 감사합니다.

네이버TV에서 영상보기

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

 다시 HTML 연습시간입니다. 이번 시간에도 3개의 간단한 태그를 알아볼게요. 이 정도 간격이면 이전에 공부한 것은 다 잊어버릴 것 같네요. 머 태그는 솔직히 잊어버려도 상관없습니다. 어차피 사용하면서 하나씩 찾아보면서 해도 상관없습니다. 오늘은 텍스트와 관련된 태그 3종 입니다.

 p - 문단을 정의하는 태그. <p></p>

 h1-h6 - 문서 제목을 정의하는 태그 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

 br - 한 줄 줄바꿈 태그 <br>
 
 p 태그는 태그 내의 내용을 문단으로 분류? 정의해주는 태그입니다. 문단이 되는 만큼 약간의 간격을 두고 나눠집니다.

 h1-h6 태그는 제목을 정의하는 태그입니다. 책이나 문서를 만들 때면 대제목, 부제목, 소제목 등으로 제목으로 분류하게 되는 경우가 있죠? 그럴 때 사용하는 제목 태그입니다. h1부터 h6까지 여섯 개의 크기로 나눠지며 숫자가 작을수록 글씨의 크기는 크고 두꺼워집니다.

 br 태그는 줄바꿈 태그입니다. 말 그대로 문서내에서 줄바꿈이 필요한 곳에 사용하면 줄바꿈이 되는 태그입니다. 

 그럼 이 세 태그들 사용하러 가볼게요.

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

 #태그(p / h1-h6 / br)

  Step 1 - 오늘도 index.html 파일과 브라우저를 열어두고요.

 적당히 p태그를 사용할 수 있게 글을 작성하고 p태그로 감싸보겠습니다.

 그리고 브라우저에서 열어보면 이렇게 글이 조금 넓은 간격으로 띄워진 것을 볼 수 있습니다.

  Step 2 - 다음 h1-h6태그를 위해 제목에 h1태그를 먼저 작성할게요

 그리고 우선 확인해보면 이렇게 크고 두껍게 변한 것을 보실 수 있습니다.

 태그는 h6까지 있으니까 적절하게 제목명을 정해서 태그들을 적용해봅시다.

 그렇게 적용한 후 브라우저에서 보면 크기 별로 제목들이 나열되어 있는 것을 볼 수 있겠습니다.

  Step 3 - 마지막 br태그도 사용해볼게요. 조금 긴 글이 있는게 더 좋을 것 같으니까 쓸데없는 글로 늘려주고 br태그를 사용할게요.

 브라우저에서 확인해보면 정말 간단하게 줄바꿈만 된 것을 알 수 있습니다.

 줄바꿈이니까 좀 전의 P태그와 어떻게 차이가 나는지 p태그를 다시 작성해서

 브라우저에서 보면 확실히 br태그 보다 간격이 넓은 것을 알 수 있습니다.

 #영상으로 보겠습니다. 

 태그들을 살펴볼 때 가이드가 되어있는 각각의 기능을 위주로 살펴보고 있습니다. 하지만 정해진 기능이란 것은 없겠죠. 말이 이상한데 기능보다는 정해진 사용처가 없다고 하는게 맞을 것 같습니다. 상황과 필요에 따라 얼마든지 다르게 사용할 수 있는 것이죠. 이런 이야기는 좀 더 태그들을 다루게 되면 다시 해야겠습니다. 지금은 다음 태그들을 골라서 하나씩 어떻게 사용되는지 알아보고 공부하는 곳이 좋을 것 같네요. 다음 시간에도 또 다른 태그들을 알아보겠습니다. 감사합니다.

네이버TV에서 영상보기

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

 오늘은 HTML 연습시간으로 돌아왔습니다. HTML부분은 많이 어렵지 않아서 자주 보여드리고 싶은데 그래도 그림은 그려야하니까 그림과의 비율을 고려해서 이 정도 시간간격으로 업로드 하고 있습니다. 대략 1-2 주에 하나씩 업로드 되는 것 같네요. 솔직히 잊어버리기 전에 쉬운 부분부터 빨리 정리하고 다음 파트로 넘어가면서 공부를 하는 것이 좋을 것 같은데 제가 게으르네요. 오늘은 지난 시간에 이어서 기본 태그 3개만 소개하겠습니다. 

 title - 웹 사이트의 타이틀을 나타내는 태그. <title></title>

 <!-- --> - 문서의 특정 부분을 주석으로 처리하는 태그 <!-- 주석 내용 -->

 hr - 태그 작성부분에 수평선을 그려내는 태그 <hr>
 
 title 태그는 해당 웹사이트의 타이틀을 나타내는 태그로 head 태그 안에 작성합니다. 그리고 화면상에 나타나는 것이 아니라 브라우저의 위쪽 탭부분에서 표시됩니다.

 <!-- --> 라고 표기한 주석 태그는 html 문서의 특정부분을 주석으로 정의하는 태그입니다. 주석태그로 처리된 부분은 브라우저 화면에 표시되지 않고 코드로써만 볼 수 있는데 코드에서 필요한 부분에 설명을 적어놓고나 다른 개발자가 수정을 할 때 용이할만한 내용을 주석으로 표기하는 것입니다. 문서 코드가 길어질고 규모가 커질수록  자주 사용하게 되는 태그라고 할 수 있겠네요. 

 그리고 마지막은 hr 태그 수평선 태그입니다. 말 그대로 수평선을 쭉 그어내는 태그이고 닫기 태그가 없는 태그입니다. 닫기 태그가 없다는 것은 담기는 내용이 없다는 것이겠죠? 사용하면 즉각적으로 선이 땃! 하고 생겨날거에요.

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

 #태그(title / <!-- --> / hr)

  Step 1 - 우선 지난 시간에 만들었던 index.html 파일을 메모장에 불러올게요.

 그리고 <title></title>을 <head></head> 안에 작성하고 타이틀명까지 그 속에 작성해서 저장하겠습니다.

 이제 브라우저에서 파일을 열어보면 저기 위에 탭부분에 타이틀명이 표시된 것이 보이시나요? 우리가 웹사이트에 방문할 때 보던 그것이죠.

  Step 2 - 이번에는 주석 태그 차례입니다. 일단 주석으로 만들 내용부터 먼저 적어볼게요.

 그리고 브라우저에서 새로고침을 해보면 아래에 있는 글자와 나란히 표시되는 것을 볼 수 있습니다.

 다시 돌아와서 주석 태그안에 글을 넣어볼게요.

 그런 후에 브라우저에서 다시 새로고침을 하면 이렇게 글이 사라집니다. 이제 문서 코드 안에서만 볼 수 있는 것이죠.

  Step 3 - 마지막 hr태그는 간단합니다. 문서의 원하는 곳에 이렇게 <hr>만 작성하고 저장하면

 브라우저에 쭉 뻗은 수평선이 그어지는 것이죠.

 #영상으로 보겠습니다.

 지난 시간에는 태그의 기본적인 이론과 사용법을 공부하다보니 어색했겠지만 한번 사용해보면 html이 정말 쉽다는 것을 알 수 있을 것입니다. 다음 시간에도 다른 용도로 자주 사용되는 태그들을 가져와서 연습해볼게요. 다음 시간에 만나요.

>네이버TV에서 영상보기