Day 24

table 태그

: 표를 생성할 때 사용

• caption 태그 : 표의 제목을 지정할 때 사용
• tr 태그 : 표에서 행을 생성할 때 사용
• th, td태그 : 표에서 열을 생성할 때 사용 (th는 head, td는 data)
• scope : 제목을 나타내는 셀의 범위를 지정, th태그에서만 쓰인다
• rowspan과 colspan : 셀 병합하여 범위를 지정할 때 사용 (얼마만큼의 칸을 차지할 것인가)
• thead, tbody, tfoot : 행들을 그룹화할 때 사용
• colgroup과 col : 열들을 그룹화할 때 사용

scope 태그

• 테이블의 th 또는 td 등의 해당 셀에게 사용하며 컬럼(column)인지 행(row)인지의 여부를 알려주는 역할
• 시각 장애인용 리더기를 통해 읽어지는 경우 해당하는 속성값에 따라 어떤 순서로 읽을지 결정

음료정보테이블

번호	상품명	수량	가격
1	콜라	1개	1500원
2	사이다	2개	1000원
3	탄산수	3개
총 금액	6,500원

코드 :

<table>
  <caption>음료정보테이블</caption>
  <tr>
    <th scope="col">번호</th>
    <th scope="col">상품명</th>
    <th scope="col">수량</th>
    <th scope="col">가격</th>
  </tr>
  <tr>
    <td>1</td>
    <td>콜라</td>
    <td>1개</td>
    <td>1500원</td>
  </tr>
  <tr>
    <td>2</td>
    <td>사이다</td>
    <td>2개</td>
    <td rowspan="2">1000원</td>
  </tr>
  <tr>
    <td>3</td>
    <td>탄산수</td>
    <td>3개</td>
    <!-- <td>1000원</td> --> // 위 행에서 rowspan을 2로
    줬기 때문에 생략해도 됨
  </tr>
  <tr>
    <td colspan="3">총 금액</td>
    <td>6,500원</td>
  </tr>
</table>

audio, video 태그 (controls 필수)

• audio 태그 : audio 요소를 삽입할 때 사용

형식 : <audio src=
"오디오 파일 경로" controls></audio>

• video 태그 : video 요소를 삽입할 때 사용

형식 : <video src=
"비디오 파일 경로" controls></video>

+ source 태그

• audio, video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시

형식 : audio나 video 태그 안에 source 태그 넣고, src에 파일경로, type에 미디어 타입 넣음

<audio controls>
<source src="파일 경로" type="미디어 타입">
</audio>

시맨틱 태그 (semantic tag)

: 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그 (div대신에 의미를 가지고 있을 수 있도록)

• 시맨틱 웹 : 시맨틱 태그로 의미 있게 HTML 구조를 설계한 웹 페이지

ex. header, nav, section, article, aside, footer, main ...

글로벌 속성

: 태그의 종류에 상관없이 공통적으로 사용할 수 있는 속성
ex. class, id, style, title(추가 정보), lang(요소에 사용한 텍스트의 언어 정보 지정), hidden (요소를 화면에서 숨김), data-*(사용자지정정보)

css 사용 방법

1. 내부스타일 (html의 header안의 style태그 생성, 그 안에 작성)

2. 외부스타일(따로 css 파일을 만들어서 html과 연결)

<link href="파일주소" ref="stylesheet" type="파일타입 (text/css)" />

3. 인라인 스타일 : 태그안의 style 속성을 사용해서..

=> 외부스타일로 css와 html을 따로 관리해주는 것이 가장 깔끔!

css 선택자

1. 전체

* {
color: red;
}

2. 태그

h1 {
	color: orange;
}

3. 클래스

.forTest {
	 color: yellow;
 }

4. 아이디

#forId {
	color: green;
}

5. 속성

[속성(="값")]{
	color: purple;
}

css 조합 선택자

1. 그룹 선택자

h1, p {
	color: red;
}

2. 부모 자식 선택자 (부모의 한단계 바로 아래에 있는 것만 자식)

// p안에 있는 span
p > span {
	color: orange;	
}

3. 하위 선택자 (부모의 아래에 있는 모든 것들)

div p {
	color: yellow;
}

4. 인접 선택자 + (근접한 요소 하나만 선택)
5. 일반 형제 선택자 ~ (특정 태그와 형제 관계에 있는 모든 태그)

ex.

 <div class="container">
        <div class="box1">
            <p>p1</p>
            <p id="p2">p2</p>
            <div class="innerBox">
                <span>span in box</span>
                <p>p3</p>
            </div>
            <p>p4</p>
        </div>
        <div id="box2">
            <h3 id="h3std">h3_1</h3>
            <h3>h3_2</h3>
            <h3>h3_3</h3>
            <ul>
                <li><span class="span1">ul li span 1</span></li>
                <li><span>ul li span 2</span></li>
            </ul>
        </div>
    </div>

// css
// #h3std에 인접한 h3형제 태그들 모두,
#p2에 인접한 div태그 하나
#h3std~h3, #p2+div {
	color: aqua;
}

// 만약에 #p2+p로 접근하려고 했으면 #p2의 아래에 인접한
p가 없어서 아무런 변화도 발생하지 않았을 것