HTML5 오래된 원고

안녕하세요 여러분 😄!

매주 수요일과 마찬가지로 HTML에 대한 새로운 게시물을 가져옵니다! 그러나 우리의 첫 번째 웹사이트를 만들기 위해 점점 더 깊이 들어가야 할 때입니다.

기본 HTML 태그에 대한 모든 데이터 직원을 이미 읽었으므로 다른 것은 필요하지 않습니다. 웹 사이트가 어떻게 구성되는지 이해하고 HTML이 작동하는 방식을 이해하는 데 집중해야 합니다.

좋아요 😙, 예를 들어 보겠습니다.

<!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>
           <!-- All data staff -->
       </body>
</html>


모든 데이터 직원은 페이지에 표시되어야 하며 내부<body> 태그를 포함해야 합니다.
*그건 분명하지, 그렇지? *

하지만 어떻게 정리해야 할까요 😇 ?



실생활에서 생각해보면 집에 있는 물건을 어떻게 정리할 수 있을까요?
가구가 많을 거라고 확신합니다. 그런 다음 모든 개인 물건을 이 가구 안에 그룹화하고, 항상 깔끔하게 정리하려고 노력합니다 😤, 아니면 😂.
HTML로 작업하는 것은 동일합니다. 모든 콘텐츠를 전략적으로 분할하는 데 초점을 맞추는 태그 내부, 컨테이너 내부에 웹사이트 콘텐츠를 구성해야 합니다. <div> 태그를 만나서 정말 반가워요.

몇 가지 예를 살펴보겠습니다.

<사업부>



와우!!! 🤓

div가 무엇입니까?
  • 가장 유용한 태그 중 하나입니다. 콘텐츠를 여러 부분으로 나눌 수 있습니다. 주로 div에는 다른 의미가 없으며 고유한 콘텐츠 구성자일 뿐입니다.

  • <div></div>
    

    주로 스타일을 지정하지 않는 한 문서에 표시되지 않습니다. 참조할 수 있다는 것은 수업 노트에 포스트잇을 넣는 것과 같습니다.

    <div>
         <p> Hello World </p>
    </div>
    


    이것은 차례로 인라인 태그 또는 텍스트 블록 내부에 삽입할 수 없지만 테이블 내부 또는 다른 div 내부에 삽입할 수 있습니다.

    디브스! 디브스! 디브스! 🥰



    앞서 말했듯이 div 태그는 "다른 게시물에서 언급했듯이 HTML 문서는 콘텐츠 블록을 생성하기 위한 중첩된 태그의 조합에 불과합니다"중첩될 수 있습니다.

    <div>
         <div> 
                <p> Hello World Again! XD </p> 
         </div>
    </div>
    


    언제 <div> 를 사용하지 않습니까?



    그것들은 매우 유용하지만 불필요하게 사용하는 것을 피해야 합니다.

    테이블!



    정보를 구성하는 또 다른 방법은 표입니다. 예! 🤤 엑셀에서처럼,
    그것을 만드는 방법은 태그를 사용하는 것입니다.

    <table></table>
    


    이것은 다음과 같은 일련의 태그 아래에 정의됩니다.

    <td or th> (for cells)
    


    어디에
    일반 셀과 헤더 셀에 사용되며,
    헤더에 포함된 내용에 대담한 스타일을 제공하기 때문에 주로 헤더용입니다.

    <tr> (for rows)
    

    테이블은 HTML 에서와 같이 다음과 같이 정의된 head, body 및 feet를 가질 수도 있습니다.

    <thead>
    <tbody>
    <tfooter>
    

    또한 내용을 명확히 하기 위해 표 위의 텍스트에 불과한 범례를 가질 수도 있습니다. 이것은 다음 태그로 생성됩니다.

    <caption>
    

    코드에서 테이블은 다음과 같습니다.

    <table>
        <tbody>
            <tr>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    

    다음은 지침에 대한 개요입니다.



    흥미로운 사실 ​​🤪:



    예전에는 표를 사용하여 웹사이트를 완전히 만들었습니다. 그래서 웹사이트를 만드는 것은 지금보다 훨씬 더 복잡했습니다. 정보를 구성하고 html 문서를 더 시각적으로 만들 수 있는 새로운 방법이 있습니다!

    많은 양의 오늘 포스팅을 마치며 XD 😂 참고로 치트시트로 활용하실 수 있도록 태그가 포함된 pdf를 제공한다고 알려드리고 싶습니다.

    좋은 웹페이지 즐겨찾기