본문 바로가기
하루정리

2022.10.06 개인 프로젝트를 위한 HTML 공부-1

호량 2022. 10. 7. 00:12

시간이 늦어서 오늘은 여기까지만 하고 내일 이어서 공부하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!--  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>태그</h1>
    <p>태그는 BOX와 ITEM이 있다.</p>
    <table>
      <tr>
        <th>웹사이트의 구조 :</th>
      </tr>
      <tr>
        <td align="center">header</td>
      </tr>
      <tr>
        <td align="center">nav</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>aside</td>
        
        <td>main</td>
        <td></td>
        <td></td>
        <td></td>
        <tr>
            <td></td>
            <td align="light" >section</td>
            <td>section</td>
            <tr><td></td>
                <td>article</td>
                <td>article</td>
            </tr>
        
            <tr><td></td>
                <td>article</td>
                <td>article</td>
            </tr>
            <tr><td></td>
                <td></td>
                <td>article</td>
            </tr>
           
        </tr>
      </tr>
      <tr>
        <td align="center">footer</td>
      </tr>
      <tr>
        <td colspan="4">article이란? : 여러가지 아이템을 그룹화 해서 재사용 가능한 것들이 모여져있는 것</td>
    </tr>
      <td>이렇게 나눠서 봐야 한다.</td>
    </table>

    <table border="1" align="center">
        <tr></tr>
        <tr>
<th colspan="5" align="center">BOX</th>

<td colspan="2">/</td>

<th colspan="6" align="center">ITEM</th>
</tr>
<tr>
    <td colspan="2">header</td>
    <td>,</td>
    <td colspan="2">section</td>
    <td colspan="4">/</td>
    <td colspan="2">a태그</td>
    <td>,</td>
    <td colspan="2">video</td>
</tr>
<tr>
    <td colspan="2">footer</td>
    <td>,</td>
    <td colspan="2">article</td>
    <td colspan="4">/</td>
    <td colspan="2">button</td>
    <td>,</td>
    <td colspan="2">audio</td>
</tr>
<tr>
    <td colspan="2">nav</td>
    <td>,</td>
    <td colspan="2">div</td>
    <td colspan="4">/</td>
    <td colspan="2">input</td>
    <td>,</td>
    <td colspan="2">map</td>
</tr>
<tr>
    <td colspan="2">aside</td>
    <td>,</td>
    <td colspan="2">span</td>
    <td colspan="4">/</td>
    <td colspan="2">label</td>
    <td>,</td>
    <td colspan="2">canvas</td>
</tr>
<tr>
    <td colspan="2">main</td>
    <td>,</td>
    <td colspan="2">form</td>
    <td colspan="4">/</td>
    <td colspan="2">img</td>
    <td>,</td>
    <td colspan="2">table</td>
</tr>

<tr>
    <td colspan="13" align="center">이런게 있다. </td>
</tr>
    </table>
<br/>
<br/>
<br/>


<div>
    <table align="left" border="1" >
        <tr>
            <th>몰랐던 것</th>
        </tr>
        <tr>
            <td>div 태그:아무곳에서나 쓰는 것 묶어서 스타일링을 할 때 사용한다.</td>
        </tr>
        <tr><td align="center">띄움</tdㅁ></tr>
        <tr>
            <td>nav 태그 : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크의 집합을 정의할 때 사용</td>
        <td>
            
        </tr>
        <tr><td align="center">띄움</td></tr>
        <tr>
            <td>nav태그의 괄호'<>(여기)<> 안에 a태그의 href=/thml/intro, /javascript: 등을 여기 모은다. </td>
        </tr>
        <tr><td align="center">띄움</td></tr>
        <tr>
            <td>article 태그 : 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의 할 때 사용</td>
            <tr>
                <td>article에 포함 될 수 있는 내용은 다음과 같다</td>
                <tr><td>  포럼 포스트, 블로그 포스트, 보도 기사, 논평 등</td></tr>
            </tr>
        </tr>
        <tr><td align="center">띄움</td></tr>
       
        <tr>
            <td>map 태그 : '클라이언트 사이드 이미지맵'을 정의</td>
            <tr>
                <td>이미지맵(image-map)은 클릭할 수 있는 영역을 가지는 이미지를 의미합니다</td>
            </tr>
            <tr>
                <td>
                    <img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
    <area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
    <area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>
                </td>
            </tr>
            <tr><td>이미지를 클릭하면 해당 링크로 이동됨. 아쉽게도 이미지가 없음.  </td></tr>

        </tr>
        <tr><td align="center">띄움</td></tr>
        <tr><td></td></tr>
        
        
   
</table>

</div>
    
  </body>
</html>

 

 

 

아직 디자인 적인 부분이 너무나도 부족해서 html과 css를 공부하려고 합니다..

 

추후에 혼자서 프로젝트를 진행 할 수 있을 정도의 실력을 쌓기 위해서 계속 공부하자!!!

저작자표시

'하루정리' 카테고리의 다른 글

2022-10-13 CSS 레이아웃 disply, position  (0) 2022.10.13
2022.10.11 Html마무리  (0) 2022.10.11
2022.10.05 프로젝트를 위한 VSCode 사전 작업  (0) 2022.10.05
2022.10.04 JavaScript 연산자, callback, class  (0) 2022.10.05
2022.09.29 복습 : 변수/object, let/ const  (0) 2022.09.29

'하루정리' Related Articles

티스토리툴바