[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션

스크립트

<script>

  • 스크립트 코드를 문서에 포함하거나 외부 스크립트를 참조
  • </body> 위에 적어야 함
  • 속성
    • async : 스크립트의 비동기적(Asynchronously) 실행 여부 (Boolean, src 속성 필수)
    • defer : 문서 파싱 (구문 분석) 후 작동 여부 (Boolean, src 속성 필수)
    • src : 참조할 외부 스크립트 URL (포함된 스크립트는 무시)
    • type : MINE 타입 (text/javascript, 기본값)
  • display : none

<noscript>

  • 스크립트를 지원하지 않는 경우에 삽입할 HTML 을 정의
<noscript>
    <p>자바스크립트를 지원하지 않는 환경입니다.</p>
</noscript>
  • inline 속성


표 콘텐츠

<table> , <tr> , <th> , <td>

  • <table> : 데이터 표, table 속성 (block 요소와 비슷)
  • <tr> : 행 (줄), table-row 속성
  • <th> , <td> : 열(칸) , table-cell 속성 (제목/데이터)
<!-- 행2, 열2 테이블 -->
<table> 
    <tr> <!-- 행 -->
        <th>...</th> <!-- 열 -->
    </tr>
    <tr>
        <td>...</td>
    </tr>
</table>

<th>

  • 표의 헤더
  • 속성
    • abbr : 열에 대한 간단한 설명
    • headers : 자신이 종속되어 있는 상위 개념의 열에 연결을 할때 쓰는 속성 (id 값과 연결)
    • colspan : 병합하려는 열의 수 (number) (수평 병합)
    • rowspan : 병합하려는 행의 수 (number) (수직 병합)
    • scope : 자신이 누구의 '헤더' 인지 명시
      • "col" : 자신의 열 (헤더가 위에 있음)
      • "colgroup" : 모든 열
      • "row" : 자신의 행 (헤더가 왼쪽에 있음)
      • "rowgroup" : 모든 행
      • "auto" : 기본값

<td>

  • '일반 칸' 을 지정
  • 속성
    • headers : 자신이 종속되어 있는 상위 개념의 열에 연결을 할때 쓰는 속성 (id 값과 연결) (<th> 와 연결)
    • colspan : 병합하려는 열의 수 (number) (수평 병합)
    • rowspan : 병합하려는 행의 수 (number) (수직 병합)

<caption>

  • 표의 제목을 설정
  • <table> 당 하나의 <caption> 만 사용 가능
<table>
    <caption>표 제목</caption>
    <tr>
        ...
    </tr>
</table>

<colgroup>, <col>

  • 표의 열들을 공통적으로 정의하는 칼럼(<col>) 과 그의 집합 (<colgroup>)
  • <caption> 밑에 정의
  • 빈 태그
  • 속성
    • span : 연속되는 열 수 (number)
<table>
    <caption>제목</caption>
    <colgroup>
    	<col style="background-color: red;">
    	<col>
    </colgroup>
    <tr>
        <td>...</td> <!-- red -->
    </tr>
    <tr>
        <td>...</td> <!-- no color -->
    </tr>
</table>
<table>
    <caption>제목</caption>
    <colgroup>
    	<col style="background-color: red;" span="2">
    </colgroup>
    <tr>
        <td>...</td> <!-- red -->
    </tr>
    <tr>
        <td>...</td> <!-- red -->
    </tr>
</table>

<thead> , <tbody> , <tfoot>

  • 순서대로 표의 머리글, 본문, 바닥글을 지정
  • 레이아웃에 영향 X , 의미가 있음
<table>
    <thead>
        <tr>...</tr>
    </thead>
    <tbody>
        <tr>...</tr>
    </tbody>
</table>

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

좋은 웹페이지 즐겨찾기