HTML 개념정리 하

soo-hyeon·2021년 1월 26일

HTML

목록 보기

2/2

표 Table

🎃 table : 데이터를 담은 표를 만들 때 사용

기본 구조

<table>
    <tr>
        <th> 테이블 헤더 </th>
        <td> 테이블 데이터 </td>
    </tr>
</table>

예시

<table>
    <thead>
        <tr>
            <th> ID </th>
            <th> 이름 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 0001 </td>
            <td> 임수현 </td>
        </tr>
    </tbody>
    <tfoot>
    ~
    </tfoot>
</table>

심화

🔴 scope : 가로의 header인지 세로의 header인지 알려주는 attribute
🟡 rowspan, colspan : 가로나 세로로 칸을 확장할 때 사용하는 attribute

<table>
    <thead>
        <tr>
            <th></th>
            <th scope = "col"> 월 </th>
            <th scope = "col"> 화 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope = "row"> 1교시 </th>
            <td rowspan = "2"> 수학 </td>
            <td> 말하기 &amp; 쓰기 </td>
        </tr>
        <tr>
            <th colspan = "3" scope = "row"> 점심시간 </th>
        </tr>
    </tbody>
</table>

미디어 파일 Media

📌 미디어 파일에는 audio, video, iframe 등이 있다.

<audio src = "#" loop autoplay></audio>
<audio src = "#" controls></audio>

<audio controls>
    # 사용자의 브라우저가 어떤 오디오 파일을 지원하는지 모르기 때문에 이렇게 쓰면 유용하다
    <source src = "#" type = "audio/wav"/>
    <source src = "#" type = "audio/mpeg"/>
    <source src = "#" type = "audio/ogg"/>
</audio>

🟡 audio와 video 태그의 사용법은 동일하다
🟣 iframe은 보통 유튜브나 트위터내에 있는 embed 공유를 통해 긁어온다

기타 Etc

🔴 abbr(abbreviation) : 약자를 설명해주기 위해 사용

<p>
너는 <abbr title = "자연스러운 만남 추구"> 자만추 </abbr>니?
</p>

🟠 address : 연락처를 나타내기 위해 사용(물리적 주소, url, email주소, 전화번호, SNS 등)

<address>
    <h1>
        홍길동
    </h1>
    <a href="#"> url로 이동 </a>
</address>

🟡 pre(preformatted text) : 있는 그대로 화면에 보여준다

<pre>
    ㅇㅏㄴㅕㅎㅏㅅㅔㅇ
    ㄴ  ㅇ        ㅛ
</pre>

🟢 code : 코드일부를 그대로 표시하고자 할 때 주로 사용

Doctype & Document Structure

🔑 Document Type Declration(=DTD 선언, 문서 형식 선언)

<!DOCTYPE html>
    <html>
        <head>
        <!--웹 문서에 관한 메타 데이터-->
        </head>
        <body>
        <!--웹 문서에 들어갈 내용-->
        </body>
    </html>

Title, Link, Style & Script

🔴 Title 태그

타이틀 태그는 검색 최적화에 영향을 미친다

타이틀 태그 tip : 키워드 단순 나열을 비추, 페이지마다 그에 맞게 변경, 무엇에 관한 내용인지 센스있게!

<title>문서의 대제목</title>

🟠 Link 태그

CSS 스타일시트를 첨부하는 태그, link:css 치고 tab 눌러서 사용 가능

<link rel="stylesheet" href="style.css">

🟡 Style 태그

HTML 문서내에 CSS 코드를 작성할 때 사용

<style> CSS코드 </style>

🟢 Script 태그

HTML 문서 내에 JavaScript 파일을 첨부할 때 사용, script:src 치고 tab 눌러서 사용
📌 script 태그는 body 내에서도 가장 마지막에 작성하는 것이 좋다

<script src="경로"></script>
<script> 자바스크립트 코드 </script>