TIL #02 HTML 기초

1.텍스트 강조하기

html 에서 텍스트의 중요도와 강조를 표현하고 싶을 때 사용하는 태그는 strong 태그와
em 태그가 있다.

<strong> 중요한 텍스트에 사용한다. 글씨가 두꺼워진다.

<p><strong>주의</strong>마스크를 착용은 필수 입니다.</p>
 
 <em> 텍스트를 강조하고 싶을 때 사용한다. 글씨체가 기울어진다.
   *스크린리더와 같은 음성인식보조 프로그램에서 em태그부분을 좀 더 강조되게 출력한다.
   
<p> 이 놀이기구는 <em>임산부, 어린이, 노약자</em>는 이용할 수 없습니다</p>

b태그와 i태그

<b></b>
<i></i>

b태그를 사용하게 되면 strong태그와 같이 글씨를 강조하여 두껍게 출력하는데
차이점은 b태그는 시각적으로만 같고 중요도를 나타내는 의미는 부여하지 않는다.

i태그도 마찮가지로 em태그의 스타일적인 효과만 연출하고 강조하는 의미는 부여하지 않는다.

2.목록 태그 ui, oi, di,li

ul태그

<ul></ul>
unordered list 라는 뜻으로 비순서형 목록 태그이다.
순서가 없는 목록을 만들 때 사용한다.
목록을 만들 때 list item 태그인 li태그를 함께 사용한다.

<h1> 오늘 할일</h1>
<ul> 
<li>빨래하기</li>
<li>코딩하기</li>
</ul>

출력값은 앞에 들여쓰기가 되고 기호가 붙어서 출력된다.

ol태그

ordered list 라는 뜻으로 순서형 목록 태그이다.
순서가 있는 목록을 만들 때 사용한다.

<h1> 오늘 할일</h1>
<ol> 
<li>빨래하기</li>
<li>코딩하기</li>
</ol>

ol 태그는 출력값에 숫자가 순차적으로 기입된다.
<ol type="a,A"> type속성을 활용하여 숫자가아닌 영어 대,소문자 i, I를 사용할 수 있다.

dl태그

definition list 라는 뜻으로 정의형 목록 태그이다.
dl태그는 하위 자식태그로 <dt>,<dd>태그를 사용할 수 있으며
<dt>는 definition title, <dd>는 definition date라는 뜻이다.
 dt는 용어의 정의, dd는 용어를 설명할 때 사용한다.
 
 <h1>스타벅스메뉴</h1>
 <dl>
   <dt>아메리카노</dt>
   <dd>아메리카노는 매우 쓰다</dd>
   <dt>카라멜 마끼야또</dt>
   <dd>카라멜향의 달콤한 라뗴</dd>
   <dt>녹차라떼</dt>
   <dd>녹차가루가 들어간 라떼</dd>
   </dl>

3. 표 (table)의 기본구조

<table> 테이블의 요소를 담는 태그
<thead> 머리말(table head)
<tbody> 본문(table body)
<tfoot> 꼬리말(table foot)
<tr> 행(table row)
<th> 제목(table header)
<td> 열 내용(table date)

 <table border="1">
      <thead>
        <tr>
          <th>이름</th>
          <th>성별</th>
          <th>전공</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>김코딩</td>
          <td>남</td>
          <td>중문학과</td>
        </tr>
        <tr>
          <td>이코딩</td>
          <td>여</td>
          <td>국문학과</td>
        </tr>
      </tbody>
    </table>

border 값을 1px 주어 테두리를 나타나게 하였다.