자, 오늘 강의 내용은 꽤 깁니다. 그리고 주위 깊게 살펴봐야 하는 거라, 저는 2틀동안 걸쳐 쉬어가면서 하면 좋겠습니다. 홈페이지 만들겠다는 사람 몸살 걸리게 하고 싶진 않아서...
자, 우리가 홈페이지를 들어가 보면 살짝의 간격의 띄어쓰기로 표시되어 있는 단락을 보신 적이 있으시나요?
단락은 영어로 paragraph, html 언어계에서는 <p>입니다. 이것은 아주 간단합니다. 그냥 한 단락 앞에 <p>, 뒤에 </p>를 붙이면 됩니다.
자, 이제 이해하기 어려운 부분이 시작됩니다.
우리는 홈페이지에 사진을 넣죠? 사진은 영어로 image, html에서는 img입니다. 일단은 이미지를 준비해 주고, 저는 이미지 이름을 '나'라고 짓겠습니다. 그럼 어떻게 해야 하는지 예제로 살펴봅시다.
예)
<img src="나.jpg" width="300" height="200" alt="내 사진" title="내 사진">
이러면 어떻게 될까요?
이미지는 '나'라는 이미지가 업로드 되고, 가로는 300픽셀, 높이는 200픽셀, 이미지가 깨졌을때 '내 사진'이라고 나오고, 그림 위에 마우스를 올려 놓으면 '내 사진'이라고 흰 박스에 표시됩니다. 즉, src는 업로드할 이미지, width는 가로 길이, height는 세로 길이, alt는 이미지가 깨졌을 때 나오는 글, title은 마우스를 위에 올려놓았을 때 나오는 도움말입니다.
다음은 이해하기 조금 어려우실 수도 있습니다. 이것은 표인데요, 표는 영어로 table입니다. 그래서 html 언어에서도 <table>입니다.
이 표는 3가지 부분으로 나누어 설명드릴 건데요, 2번째 부터는 꼭 듣지 않아도 되는 내용입니다. 하지만 표를 심화적으로 표현하고 싶다면 힘들어도 하시는 것이 좋겠습니다. 너무 무리는 하지 마시고요...
일단, 표의 기본부터 살펴봅시다.
표는 어떻게 생겼죠? 표는 여러 박스가 큰 사각형으로 둘러싸여 있는 형태입니다.
표 예제로 살펴봅시다.
<html>
<body>
<table border="1">
<tr>
<td>이름</td><td>성별</td><td>주소</td><td>수익</td>
</tr>
<tr>
<td>최진혁</td><td>남자</td><td>청주</td><td>1000</td>
</tr>
<tr>
<td>최유빈</td><td>여자</td><td>청주</td><td>500</td>
</tr>
<tr>
<td>합계</td><td></td><td></td><td>1500</td>
</table>
<body>
</html>
이렇게 넣었습니다. 그럼 이렇게 나오게 됩니다.
이름 성별 주소 수익
최진혁 남자 청주 1000
최유빈 여자 청주 500
합계 1500
태두리도 있지만 넣을 수 있 는 프로그램이 없어서 안 넣었습니다.
자, 해석을 해 봅시다.
table은 표가 시작된다는 뜻이고, border="1"은 태두리라는 뜻이고(2도 넣을 수 있지만 2는 모양이 이상해서 1 추천), tr은 table row의 약자로, 한 행이 추가된다는 뜻입니다. 대신 행이 끝날 때는 </tr>을 붙여줘야 합니다. <td>는 한 칸에 들어가는 내용입니다. 그리고 마지막에 </table>을 붙여 줘야 합니다. 그런데
이해가 잘 되시나요? 저는 이해하는데 1달 걸렸는데... 여러분이 이해가 안 되는 부분이 있으시면 댓글로 남겨주세요. 언제든디 도와드리겠습니다.
자, 2번째 부분입니다.
글을 병합하려면 어떻게 할까요?
위에 표에서 둘다 청주에 살고 있죠? 그럼 어떻게 넣어야 병합을 할 수 있을까요?
이때 바로 달려가는 것은 <span>! 그런데 그냥 <span> 넣으시면 큰일나요. 행인지 열인지 구분해서 넣어야 해요. 행은 row니까 <rowspan>을 넣고, 그 다음 행 몇 개를 병합할 것인지 해석해서 넣어야 합니다. 만약 2개의 행을 병합하고 싶으면 <rowspan="2">이렇게 넣어주세요. 그 다음 밑에 행에 병합할 글자와 <td>태그는 삭제! 예를 들면 위에서는 이렇게 되죠.
<td rowspan="2">청주</td>
밑의 행에서는
그러면 열 병합은 어떻게 할까요?
<td colspan="">입니다. 이것도 위에 것이랑 마찬가지입니다. colspan할 열 개수를 넣어 주시고 그 열은 삭제!
자, 3번째 부분입니다. 이제부터는 차근차근 쉬워집니다.
표도 머리, 몸통, 발이 있죠? 그냥 <tr>을 바꾸면 됩니다. 이 행을 머리로 하고 싶다. 그러면 <tr>을 <thead>로. 몸통은 <tbody>. 맨 밑의 꼬리말은 <tfoot>. 그러면 머리말은 굵고 가운데 정렬이 됩니다. 나머지 몸통은 중간, 꼬리말은 맽 밑으로 가게 됩니다.
강의 중 어려우신 것이 있으시면 바로 댓글에 질문해주세요~
감사합니다~
댓글 없음:
댓글 쓰기