HTML - 태그

<h1>~<h6> : 제목 
<p> : 텍스트
    <u> : p태그 안에서 사용하고 밑줄을 나타냄

    <s> : p태그 안에서 사용하고 취소선을 나타냄 
<br> : 줄바꿈
<hr> : 줄긋기

<blockquote></blockquote> : 인용하기(블록레벨 태그, 인용 내용이 줄이 바뀌어 나타남)
<q> 인용하기(인라인 레벨 태그, 줄바꿈 없이 다른 내용과 함께 한 줄로 표시 + 인용내용에 따옴표)

<strong> : 강조
<b> : 강조 

strong와 b의 차이점은, 화면 낭독기가 진짜로 강조한 것인지, 단순히 굵게 표시한것인지 판단 할 수 있게 하기 위해서이다.  

 

<em> :  이탤릭체, 흐름상 특정 부분을 강조하고 싶을 때(중요한 내용을 담을때)
<i> : 이탤릭체, 마음속의 생각이나 꿈, 기술족 용어등의 관용구에 쓸 때(단순 이탤릭체) 

<mark> : 사용한 부분이 노란 형광펜으로 그어놓은 듯한 효과를 낸다.

<span> : 텍스트 단락에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하려고 할 때 쓰임

ex) <span style="color:blue;"> </span>

<ul> : 순서가 필요하지 않은 목록을 만들 때 씀. <li>를 사용해서 각 항목을 표시함  
<ol> : 순서가 필요한 목록을 만들 때 씀. <li>를 사용해서 각 항목을 표시함
    <ol>은 type속성을 이용해서 숫자의 종류를 다양하게 조절 할 수 있다. 1,a,A,i,I 등등

    ex) <ol type = "a"> 
    <ol>은 start속성을 이용해서 중간번호부터 시작할 수 있다. 

    ex) <ol start = "3">

<dl> : 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록을 만든다. 단어/정의 목록 또는 질문/답 목록에서 사용가능
        <dt>는 제목, <dd>는 내용을 만든다. 하나의 <dt>에 여러개의 <dd>가 있을 수도 있고 여러개의 <dt>를 가질 수도 있다.

 

 

table 태그를 통해 표 만들기
    1. <table> 태그로 표 자리를 먼저 만든다.
    2. <tr>태그로 행을 만든다
    3. <td> 태그로 각 행마다 셀을 만든다.
    4. 제목은 <th> 태그로 표시한다

<colspan>,<rowspan> : 셀을 합치는 기능이므로 <td> <th>태그 안에서 사용됨
    ex) <td colspan="합칠 셀의 개수"> 내용 </td>      # 가로로 합침(열을 합침)
    ex) <td rowspan="합칠 셀의 개수"> 내용 </td>     # 세로로 합침(행을 합침)

<caption>,<figcaption>을 통해 표에 제목을 붙일 수 있음.       
    <caption>은 표의 중앙에 제목이 표시되고 <figcaption>은  <table>보다 앞에 사용하면

    표 위에 제목이 표시되고 </table>뒤에 사용하면 표 아래에 제목이 표시됨

 

ex) 표만들기 최종 예시
    <table> 
        <caption> 
            <strong>제목</strong>
            <p>제목</p>
        </caption>
        <tr>                              #첫 번째 행
            <th> 제목 셀 </th>   #1행 1열, 단 제목으로 쓰여서 <th>
            <td> 1행 2열 </td>
            <td> 1행 3열 </td>
        </tr> 
        <tr>                               #두 번째 행
            <th> 제목 셀 </th>    #2행 1열, 단 제목으로 쓰여서 <th>
            <td> 2행 2열 </td>
            <td> 2행 3열 </td>
        </tr>
    </table>

 

표의 구조를 나누어 놓는게 좋다.

이때 사용하는 태그는 <thead> <tbody> <tfloot> 이다

<thead>는 제목, <tbody>는 본문, <tfloot>는 요약이다.

 

 

표에서 하나의 열에 스타일을 저장하거나 열을 몇 개 씩 묶어서 스타일을 한번에 지정할 수도 있다

<col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로, 닫는 태그가 없다.
<colgroup> 태그는 <caption> 태그 뒤와 <td> <tr>태그 전에 사용해야한다.
   

<colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col>태그의 개수와 표의 열의 개수가 같아야함
   

 

ex)
        <colgroup>
            <col>
            <col span="2" style=~~>
            <col style =~~>
        </colgroup>

해석) 4개의 열이 있는 표에서 첫 번째 열은 아무효과도 주지 않았고
2,3번째 열을 span을 통해 하나로 묶고 같은 스타일을 주었다
마지막 4번째열은 따로 스타일을 주었다.

 

 

GIF : 투명한 배경이나 움직이는 이미지를 만들 수 있음, 표시 색상 최대 256개 단 파일 크기가 작아서 아이콘등을 만들 때 사용함
JPG : 우리 눈으로 볼 수 있는 다양한 색상을 표현, 단 투명한 배경 불가능
PNG : 투명 배경을 만들면서 다양한 색상도 표현 가능. 네트워크용으로 개발되어서 최근 많이 사용 

이미지 삽입 할때는 <img>태그 사용

<img>태그의 scr속성 : 
            이미지 파일의 경로 
            웹문서 파일의 위치를 기준으로 이미지 경로 지정
            HTML과 이미지 파일이 같은 폴더에 있다면 src속성에 파일 이름만 적음
            <img src = "파일.jpg">
            images라는 하위 폴더에 이미지 파일이 있다면 하위폴더까지 같이 적음
            <img src = "images/파일.jpg">
            웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용 가능 

<img>태그의 alt속성 : 
            이미지를 설명하는 대체 텍스트
            화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌 (웹 접근성)
            이미지를 표시 할 수 없는 상황일 때 대체 텍스트 표시
            텍스트 자체를 이미지로 만들었을 경우 대체 텍스트 안에 이미지 파일의 내용을 그대로 넣어줘야함
            작은 아이콘등의 경우 굳이 넣을 필요가 없기에 alt = "" 처럼 지정
            <img src = "home.jpg" alt="홈으로 가기">

<img>태그의 width, heihgt속성 :
            width : 넓이값 지정
            heihgt : 높이값 지정
            이 속성들을 사용하지 않으면 원래 이미지 크기대로 표시
            이 속성을 이용해 화면에 표시하는 이미지 크기를 조정한다. 단 이미지 파일의 용량은 그대로이다.
        
        

<figure>태그 : 설명글을 붙일 대상 지정
            웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용
            설명 글을 표시할 때 <figure>로 먼저 묶어야함
<figcaption> 태그 : 이미지를 설명하는 대체 텍스트
            대체 텍스트를 화면 낭독기가 읽어 줌
            이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시 

ex> 
        <figure>
            <img src="images/사진.jpg" alt="사진 서렴ㅇ">
            <figcaption>설명 설명 </figcaption>
        </figure>


일방적인 이미지는 비트맵 이미지는 확대하면 오돌토돌하게 깨진다.
svg파일은 벡터 그래픽이다. 이미지를 확대하거나 축소해도 테두리가 원래의 깨끗한 상태로 유지됨
로고나 아이콘에서 많이 사용됨,  데이터 시각화에서 차트나 다이어그램,지도등을 구현할때도 많이 사용

svg 파일은 img태그를 이용해서 삽입하면 된다.



하이퍼 링크
            다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능
            외부 사이트나 외부 페이지로도 연결. 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다.

하이퍼 링크의 <a>태그
        <a href ="링크할 주소" [속성="속성 값"]> 텍스트 </a>
         <a href ="링크할 주소" [속성="속성 값"]><img scr="이미지 파일 경로"> </a>
         반드시 href 속성울 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다

        href : 링크한 문서나 사이트의 주소를 입력
        target : 링크한 내용이 표시될 위치(현재 창 또는 새창)를 지정
            target ="_blank" : 링크 내용이 새 창이나 새탭에서 열림
            target ="_self" : target 속성의 기본값으로 링크가 있는 화면에서 열림
            download : 링크한 내용을 보여주는 것이 아니라 다운로드

 

 

앵커 : 한 페이지 안에서 점프하기   
        앵커를 사용하려면 우선 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만든다.
        <a>태그의 href속성을 사용해 링크한다. 단, 앵커 이름 앞에 #을 붙여 앵커 표시

ex)
            <태그 id ="앵커 이름"> 텍스트 or 이미지 </태그>
            <a href="#앵커이름"> 텍스트 or 이미지 </a> 

 

           <p id="test"> 테스트테스트 </p>

           <a href="#test"> 누르면 테스트로 간다 </a>

 

p태그의 이름을 "test"로 지정해놨고 아래의 a태그에서 "test"를 걸어놨다.

'누르면 테스트로 간다'를 누르면 위의 p태그로 이동하게 된다.