#2 HTML 태그

제목(HEADING)

 

<h1>Hello</h1> 

h1~h6   -> 숫자가 올라갈수록 글씨의 크기가 작아진다.

 

단락과 개행(PARAGRAPH,LINEBREAK)

 

<p>: 태그는 글의 단락을 나타낸다.

<br>:태그는 글의 줄바꿈을 생성한다.

 

텍스트 관련 태그들(B,I,U,S)

 

<b> : 글자를 굵게 표현한다.

<i> : 글자를 이탤릭체/ 특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용된다.

<u>: 글자에 밑줄을 표현한다.

<s>: 글자에 중간선을 표현한다.

 

앵커(ANCHOR)

 

-다른 문서로 이동할 수 있는 링크를 생성한다.

-href:링크의 목적지가 되는 URL을 지정한다.

 

href 속성

-링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 한다.

-href 속성의 값은 링크의 목적지가 되는 URL이다.

 

ex)

<a href="http://www.naver.com/" target="_blank">네이버</a>

target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성이다.

속성값으로는 _self, _blank, _parent, _top이 있다.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작한다.

_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성이다.

 

내부앵커

<a href="#id">(~~)</a> 와 같은 형식으로 쓰인다.

누르면 id 가 있는곳으로 이동한다.

<a href="#some-element-id">누르면 이동</a>

... 중략.

<h1 id="some-element-id">목적지</h1>

 

아무런 의미가 없는 태그(CONTAINER)

<div>태그

div(division) 태그는 블록 레벨 태그이다.

블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다.

 

<span>태그

span 태그는 인라인 레벨 태그이다.

인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들이다.

 

 

리스트 태그

<ul>(unordered list) :순서가 없는 리스트

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

결과)

• 콩나물
• 파
• 국 간장

 

<ol>(ordered list) :순서가 있는 리스트

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

결과)

1. 냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.
2. 콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.
3. 뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.

 

DL

<dl>:description list로 용어를 설명하는 리스트자체를 만든다.(큰 범위)

<dt>:definition term로 용어를 적는다.

<dd>:definition description로 용어의 뜻을 나타낸다.

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

결과)

리플리 증후군

허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어

피그말리온 효과

타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상

언더독 효과

사람들이 약자라고 믿는 주체를 응원하게 되는 현상

 

 

리스트 중첩시에 <ol>,<ul>태그 밑에는 <li>태그만 올 수있다.

 

 

 

이미지(IMAGE)태그

<img>:문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.

src속성: <img>의 필수 속성으로 이미지의 경로를 나타낸다.

alt 속성

-이미지의 대체 텍스트를 나타낸다.

-대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요하다.

-src속성과 더불어 반드시 들어가야하는 필수 속성이다.

width/height 속성

-이미지의 가로/세로 크기를 나타내는 속성이다.

-값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산된다.

-width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋다.

-width/height 속성이 없으면 이미지는 원본 크기대로 노출되며,

둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경된다.

반면, 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경된다.

<img src="./images/pizza.png" alt="피자">

상대경로와 절대경로

src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있다.

상대경로: 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로

절대경로: 실제 그 이미지가 위치한 곳의 전체 경로이다.

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

이미지 파일 형식

• gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
• jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
• png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

 

테이블 태그

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있다.

표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 한다.

 

• <table> : 표를 나타내는 태그
• <tr> : 행을 나타내는 태그
• <th> : 제목 셀을 나타내는 태그
• <td> : 셀을 나타내는 태그

• <caption>: 표의 제목을 나타내는 태그
• <thead>: 제목 행을 그룹화하는 태그
• <tfoot>: 바닥 행을 그룹화하는 태그
• <tbody>: 본문 행을 그룹화하는 태그

<table>

    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            
<th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
<td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            
<td>February</td>
            <td>$80</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            
<td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>

</table>

결과

 

-colspan: 셀을 가로방향으로 병합

-rowspan:셀을 세로방향으로 병합.

 

 

 

예시)

<table>
  <caption>Specification values</caption>
  <thead>
  <tr>
    <th rowspan="2">Grade.</th>
    <th rowspan="2">Point.</th>
    <th colspan="2">Strength.</th>
    <th rowspan="2">Percent.</th>
  </tr>
  <tr>
    <th>kg/mm</th>
    <th>lb/in</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Hard</td>
    <td>0.45</td>
    <td>56.2</td>
    <td>80,000</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Medium</td>
    <td>0.45</td>
    <td>49.2</td>
    <td>70,000</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Soft</td>
    <td>0.45</td>
    <td>42.2</td>
    <td>60,000</td>
    <td>30</td>
  </tr>
  </tbody>
</table>

결과