비전공에서 취업까지!! [7화] front 앞으로 정말 계속 쓸 코드인데... -입니다.-

안녕하세요 SsunDev 입니다.

 

날씨가 심상정 않습니다.기온이 하루아침에 더웠다 추웠다 하는게 정말 지구가 큰일이 나고있긴 한가봅니다.

 

추운날씨에도 지난시간에 이어 테이블에서 몇가지만 더 짚고 넘어가보겠습니다.

테이블의 이름을 달아주는 방법을 배워보겠습니다.

<table> 코드 바로 아래에 <caption>테이블이름</caption>이라고 해주면 됩니다.

그럼 인기 아이돌! 하고 이름을 만들어 보겠습니다.

이렇게 제목을 달아주었습니다. 그럼 바로 ALT + B!!

이렇게 제목까지 붙은 미남 미녀들만 모인 멋진 테이블이 완성 되었습니다.

여기까지만 하고싶지만. 음.. 짜투리로 딱 마지막 한개만 더 배우고 넘어가겠습니다.

 

<colgroup></colgroup> 이란 테그입니다. 테이블의 각 컬럼의 가로넓이를 지정해줄 수 있습니다.

사용하는 방법은 <colgroup> 안에 <col style="width: 80px">라는 코드를 컬럼(가로)의 갯수만큼 지정해주면 됩니다.

 

정리하자면

<colgroup>

     <col style="width: 80px"> 이 코드를 컬럼의 갯수만큼 지정해주면 됩니다. 저희는 5개겠죠?

      ...

</colgroup>

1번컬럼을 80px 나머지는 120px씩 지정해보도록 하겠습니다.

<thead> 위에  <colgroup> 을 선언해주고!

그 안에 각 컬럼들의 넓이를 선언해주면?

테이블이 더 멋져집니다!

 

한가지 말씀드리고싶은점은 이런 디자인적인것은 지금 배우고있는 html코드들 안에 넣는것보단 css라고 하는 따로 디자인을 하는 기술에서 다루는게 좋습니다.

 

보통은 콜그룹을 안쓰...ㄴ 다고 하긴 그렇고 뭐 프로젝트마다 다른거고 그냥 디자인적인요소는 나중에 css에서 다 배우는구나! 하고 알아두시면 좋습니다.

그래서 쓰라는거냐 말라는거냐 하면? 일단 알아만 두자 입니다!

 

마지막으로 총 정리를 하자면

이게 뼈대입니다. 이제 어디를 어떻게 만들어야 하는지 아시겠죠?

테이블 이제 진짜 끝!

 

그리고 이번에 배울건 정말 너무너무너무너무 너무너무너무 많이 쓴는 테그 두가지를 배워보겠습니다.

 

 

바로 <div></div> 와 <span></span> 입니다!

일단 설명드리자면 어떤 디자인이 있는, 그러니까 어떤 모습이 있는 코드는 아니고 그 냥 공간을 나누는 코드입니다.

이런식으로 맨 위에서부터 공간을 나눈다고 할때 <div></div> 혹은 <span></span> 코드를 사용합니다.

두 코드 다 형태가 없는 코드입니다. 따라서 나중에 각 코드에 css의 기술로 꾸며주면 다양한 모양으로 꾸며줄 수 있습니다.

 

바로 html_important04.html 파일을 만들고 향상된 뼈대 바로 Go!

그리고 div와 span으로 강아지 고양이 드래곤을 각각 한개씩 싸서 총 6개의 테그를 만들어보겠습니다.

 요로코롬 만드셨나요? 그럼 바로 ALT + B!

어머나 세상에? div로 감싼 강아지 고양이 드래곤은 줄바꿈이 일어났는데 span으로 감싼 테그는 줄바꿈이 일어나지 않았습니다.

 

 

자 이 두 코드의 차이는 바로 inline 속성과 block형식이라는 것입니다.

 

*inline 속성은 컨텐츠의 크기만큼 차지하고 줄바꿈이 일어나지않고 width 와 height 를 지정해 줄수 없습니다

*block 속성은 한 줄을 차지하고 줄바꿈이 일어나고 width 와 height 크기를 지정해 줄 수 있습니다.

 

그리고 나중에 배울 margin padding이라는게 있는데 일단은 알아만 둡시다

block 속성은 위아래좌우 부분에 margin padding 을 다 줄 수 있습니다.

inline 속성은 4면에 padding을 줄 수 있습니다. 하지만 margin은 좌 우만 줄 수 있습니다.

마진 패딩은 어려운부분이라 나중에 설명드릴텐데 일단 테그끼리 여백 또는 코드 안의 컨텐츠에게 주는 여백 이라고 생각하시고 넘어가시면 됩니다.

더 쉽게 생각해서

1번은 span 2번은 div 라고 생각해 주시면 좋을것 같습니다!

 

오늘은 간단하게 table코드의 가로를 정의해주는 코드와 제목을 붙여주는 코드 그리고 div와 span 에 대해서 배워보았습니다. div는 정말... 이제 앞으로 계속계속계속 쓰게될겁니다!

 

오늘은 좀 짧은것같은데.. 뭐 그럴수도 있죠 원래 수요일은 4교시 하고 집에가는 날 아닙니까 하핫..