HTML 2일차

HTML 태그

텍스트 관련 태그들

텍스트를 덩어리로 묶어주는 태그

• <h1 ~ 6> 제목 표시 </h1 ~ 6>
  • 1부터 6까지 표현. 숫자가 작을수록 큰 제목
• <p> 단락 만들기 </p>
  • 텍스트를 표시할 때 가장 많이 사용하는 태그. 앞뒤에서 줄바꿈이 있다. </p> 태그를 만날때까지 줄바꿈 없이 텍스트를 한줄로 표시하지만 브라우저 창의 너비를 넘어가면 자동으로 줄바꿈.
• <br> 줄 바꾸기
• <hr> 수평 줄넣기
• <blockquote>인용문 넣기 </blockquote>
  • 다른 텍스트보다 들여쓰기 되어 구별된다. cite 속성을 이용해 인용 사이트 주소를 표시할 수도 있다.
• <pre> 입력하는 그대로 화면에 표시 </pre>
  • HTML에서는 아무리 많은 공백을 넣어도 한개만 표시됨. <pre></pre> 태그를 사용하면 소스에 표시한 공백이 브라우저에 그대로 표시된다.
  • <code> <samp> <kbd> 태그를 사용해 소스 코드를 표시할 때 <pre> 코드를 같이 사용하여 코드 형태를 그대로 표시

텍스트를 한 줄로 표시하는 태그

• <strong></strong> or <b></b> : 굵게 표시
  • 경고나 주의사항 처럼 중요한 내용에는 <strong>
  • 문서의 키워드처럼 단순히 굵게 표시하는 경우 <b>
• <em></em> or <i></i> 이탤릭체 표시
  • 문장에서 흐름상 특정 부분을 강조하고 싶을 때(중요한 내용 표시) <em>
  • 생각, 꿈, 기술 용어, 다른 언어의 관용구 사용할 때(단순히 이탤릭체 표시) <i>
• <q> 인용 내용 </q>

  • 인용한 내용 표기

    <q>	<blockquote>
    인라인 레벨 태그	블록 레벨 태그
    줄바꿈 없이 다른 내용과 함께 표시	인용 내용 줄 바뀜
    인용 내용에 따옴표 표시됨	다른 내용과 구별되도록 들여쓰기

• <mark> 형광펜 효과 </mark>
• <span> 줄바꿈 없이 영역 묶기 </span>
  • 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할 때 주로 사용
• <ruby> 동아시아 글자 표시 </ruby>
  • <ruby> 태그 안에 <rt> 주석 </rt> 표시
• 기타 텍스트 관련 태그
  • <abbr> 약자 표시 </abbr>
  • <cite> 웹 문서나 포스트 참고내용 표시 </cite>
  • <code> 소스 코드 </code>
  • <kbd> 사용자 입력 내용(키보드, 음성 명령 등) </kbd>
  • <small> 작게 표시 </small>
  • <sub> 아래첨자 </sub>
  • <sup> 위첨자 </sup>
  • <s> 취소선 </s>
  • <u> 단순한 밑줄 </u>

목록을 만드는 태그

• <ul> <li></li> </ul>
  • 순서가 필요하지 않는 목록
  • <ul> 태그 안에 <li> 태그로 각 항목 표시
• <ol> <li></li> </ol>
  • 순서가 필요한 목록
  • <ol> 태그에 속성을 사용하여 표기 방법을 바꿀 수 있다.
    • 기본값은 숫자이므로 type 속성을 안써도 된다.
    • type=”a” 영문 소문자 순
    • type=”A” 영문 대문자 순
    • type=”i” 로마숫자 소문자 순
    • type=”I” 로마숫자 대문자 순
    • start=”숫자” 원하는 숫자부터 시작할 수 있다
    • reversed 역순으로 표시
• <li>
  • 여러 항목을 정의할 때 </li> 태그를 생략해도 된다.
  • 목록의 항목 안에 또 다른 항목을 나열할 때는 <li> </li> 안에 넣는다.
• <dl> <dt>제목</dt> <dd>설명</dd> </dl>
  • 설명 목록 만들기
  • <dl>: 목록 <dt>: 제목 <dd>: 설명

      <dl>
        <dt> 제목 </dt>
        <dd> 설명 </dd>
      </dl>
            
      <dl>
        <dt> 제목 </dt>
        <dd> 설명 </dd>
      </dl>
    

    표를 만드는 태그

• 기본적인 표 만들기

    <table>
      <tr>
        <th></th>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  

  • <tr> 태그로 행 생성
  • <td> 태그로 열 생성
  • <th> 태그로 제목 셀 생성
• colspan, rowspan
  • 행이나 열을 합치는 속성
  • <td colspan=”합칠 셀의 개수> </td>
  • <td rowspan=”합칠 셀의 개수> </td>
• <caption>제목</caption>
  • 표 위쪽 중앙에 표시
  • 다른 태그를 사용해 제목을 꾸밀 수 있다.
• <figure> <figcaption>제목</figcaption> </figure>
  • <caption> 태그 사용하지 않는다.
  • 제목이 중앙에 오지 않으며 <figcaption> 태그가 <table> 태그 앞에 사용하면 표 위에, </table> 태그 다음에 추가하면 표 아래에 제목이 표시됨
• aria-describedby
  • <table> 태그 안에 속성을 추가해 표에 대한 설명 제공
• 표 구조 정의

      <table>
          <caption><b>제목</b></caption>
          <thead>
            <tr>
              <th>구분</th>
              <td>카카오</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>2015년</th>
              <td>77.1</td>
            </tr>
            <tr>
              <th>2016년</th>
              <td>73.8</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>합계</th>
              <td>100</td>
            </tr>
          </tfoot>
        </table>
  

  • <thead> 제목 부분
  • <tbody> 본문 부분
  • <tfoot> 요약 부분
• 여러 열 묶어 스타일 지정
  • 한 열에 있는 모든 셀에 같은 스타일 적용
  • <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 함
  • <colgroup> <col></col><col></col> </colgroup>

이미지와 하이퍼링크

이미지

• 웹에서 사용할 수 있는 이미지 파일 형식
  • GIF, JPG/JPEG, PNG
• 이미지 삽입 방법
  • <img> 태그 사용
  • <img srt=”경로” alt=”그림 설명”>
    • 이미지 파일이 웹 문서 파일과 같은 경로일 경우 파일명만 src=”first.jpg”
    • 하위 폴더에 있는 경우 하위 폴더와 함께 적는다 src=”images/first.jpg”
  • width / height
    • 이미지 크기 조절하는 속성
    • <img> 태그 안에 사용

• 이미지에 설명글 붙이기

      <figure>
        <img src="images/umbrella.jpg" alt="우산 두개">
        <figcaption>우산</figcaption>
      </figure>
  

  • 표에서 사용한 것처럼 <figcaption>의 위치에 따라 설명글 위치가 바뀐다

하이퍼링크

• <a> 태그 안에 href 속성 사용

  • <a href=”링크 주소”> </a>

    속성	설명
    href	링크한 문서나 사이트 주소
    target	내용이 표시될 위치 지정(새창/현재창)
    download	링크한 내용 다운로드
    rel	현재 문서와 링크한 문서의 관계
    hreflang	링크한 문서의 언어 지정
    type	링크한 문서의 파일 유형

  • 하이퍼링크 밑줄, 글자색 바꾸기
  • css를 이용해 텍스트 링크의 색 바꾸고 밑줄 없앨 수 있다.

      <style>
      	a {
      		text-decoration: none;
      		color: black;
      }
      </style>
    

  • target 속성
    • _blank : 새 창이나 새 탭에서 열린다
    • _self : target 속성의 기본값. 링크가 있는 화면에서 열린다.
    • _prevent : 프레임을 사용했을 때 부모 프레임에 표시
    • _top : 프레임을 사용했을 때 프레임에서 벗어나 전체 화면에 표시
• 한 페이지 안에서 이동하는 앵커

  • 이동하고 싶은 위치에 id 속성을 이용해 각각 다른 이름으로 앵커 생성

        <div id="앵커 이름"> 앵커 </div>
        <a href="#앵커 이름"> 앵커 </a>
    

  • id는 앞에 #을 붙여서 href 속성 지정

• 이미지 맵 지정
  • 하나의 이미지에 여러개의 링크 생성
  • <map> 태그로 이미지 맵 생성

  • <area> 태그로 사용할 이미지에 영역 표시

      <map name="맵이름">
      	<area>
      	<area>
      </map>
      <img src="이미지 파일" usemap="#맵이름">
    

  • <area> 속성
    • alt : 대체 텍스트 지정
    • coords : 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정
    • downloads : 링크 문서 다운로드
    • href : 링크 문서 경로 지정
    • media : 최적화할 미디어 선택
    • rel : 현재 문서와 링크 문서와의 관계 지정
      • 속성 값 : lternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag
    • shape : 링크로 사용할 영역의 형태 지정
      • 속성 값 : default, rect, circle, poly
    • target : 링크를 표시할 대상 지정
      • 속성 값 : _black, _parent, _self, _top, 프레임 이름

    • type : 링크 문서의 미디어 유형 지정

        <area shape="rect" coords="220, 10, 380, 200" href="http://www.facebook.com" target="_blank">
                  
        <!-- 사각형 영역(220, 10) ~ (380, 200)에 페이스북 링크 연결 -->
      

• SVG 이미지
  • 이미지 크기를 조정해도 깨지지 않고 깨끗이 유지되기 때문에 로고나 아이콘에 많이 사용
  • 차트, 다이어그램, 지도 등을 구현할 때 많이 사용
  • svg 파일을 지원하지 않는 브라우저나 운영체제를 위해 변환하는 사이트가 있음

폼 관련 태그

• <form>폼의 시작과 끝</form>
  • 속성
    • method : 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
      • get : 주소 표시줄에 입력한 내용이 그대로 드러남. 256byte ~ 4096byte 제한
      • post : 입력한 값이 드러나지 않음. 입력 내용 길이 제한 없음
    • name : form의 이름 지정. form을 구별하기 위해 사용
    • action : form 태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정
    • target : action에서 지정한 스크립트 파일을 다른 창으로 열도록 지정
    • aotucomplete : 자동 완성 기능

• <label>폼 요소에 레이블 붙이기</label>

      <label [속성="속성 값"]>레이블<input></label>
      
      or
      
      <label for="id이름">레이블</label>
      <input id="id이름" [속성="속성 값"]>
  

  • radio 버튼이나 checkbox에 label을 사용하면 라벨로 묶인 부분을 터치하여 선택할 수 있다.
• <fieldset> <legend>제목</legend></fieldset>
  • 폼 안에서 여러 구역을 나누어 표시할 때 사용
  • <legend>로 제목을 붙인다.
• <input>
  • 속성
    • id : 똑같은 폼 요소를 구분하기 위해 사용
    • type : 사용자가 입력할 수 있는 값 형태

      • hidden : 사용자에게 보이지 않지만 서버로 넘겨지는 값

          <input type="hidden" name="이름" value="서버로 넘길 값">
                        
          name 속성으로 히든 필드 이름 지정 => value 속성으 이용해 서버로 넘겨줌
        

      • text : 한 줄짜리 텍스트 입력 필드
        • name : 텍스트 필드 구별하는 이름
        • size : 화면에 몇 글자가 보이도록 할 것인지 지정
        • value : 텍스트 필드가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용. 사용하지 않으면 빈 텍스트 필드
        • maxlength : 입력할 수 있는 최대 문자 개수
      • password : 비밀번호 입력란
        • 비밀번호가 *로 표시됨
      • search : 검색 상자
      • url : url 입력란
        • http:// 로 시작하는 사이트 주소를 입력해야 함
      • email : 메일 주소 입력란
        • 메일 주소 형식에 맞는지 자동으로 체크
      • tel : 전화번호 입력란
      • number : 입력한 내용을 숫자로 인식
        • 브라우저에 따라 스핀 박스가 표시되기도 한다
      • range : 슬라이드 막대를 움직여 숫자 값 입력
        • min : 최소값 지정. 기본값 = 0
        • max : 최대값 지정. 기본값 = 100
        • step : 숫자 간격 지정. 기본값 1, 생략 가능
        • value : 초기값
      • radio / checkbox : 한개만 선택할 때 / 두개 이상 선택할 때
        • name : 여러개일 경우 구분하기 위해 사용. radio 버튼은 name 속성을 똑같이 만든다
        • value : 서버로 넘길 때 의 값. 영문 또는 숫자, 필수 속성
        • checked : 기본 선택 항목 지정
      • color : 색상표에서 색상을 선택할 수 있게 함
      • date : 표준시 yyyy-mm-dd
      • month : 표준시 yyyy-mm
      • week : 표준시 yyyy-W24(몇 번째 주인지 표시)
      • time / datetime / datetime-local
        • datetime : 표준시
        • time / datetime-local : 사용자 지역 기준 시
        • min : 날짜나 시간의 최소값
        • max : 날짜나 시간의 최대값
        • step : 스핀 박스 화살표를 누를 때 얼마나 조절할지 지정
        • value : 초기값 지정
      • reset : 리셋 버튼 / submit : form 태그에서 지정한 폼 처리 프로그램에 넘겨짐 / button : 자체 기능 없는 버튼 모양. 기능을 넣기 위해 스크립트 함수를 연결해 사용
        • value 속성을 사용해 버튼에 표시할 내용 지정
      • image : submit 버튼 대신 전송 이미지를 넣을 수 있음
      • file : 파일을 첨부할 수 있는 버튼
    • autofocus : 페이지를 불러올 때 원하는 곳에 마우스 커서 지정
    • placeholder : 텍스트 상자에 힌트 표시
    • readonly : 읽기 전용 필드
    • required : 필수 필드 지정
    • min / max / step : 숫자 필드에서만 사용
    • size / minlength / maxlength : 텍스트 필드에서 사용
    • formaction : 실핼할 프로그램 연결. type=”submit” or type=”image” 일 때 사용
    • formenctype : 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정
    • formmethod : 서버로 폼 전송하는 방식 지정. form 태그에서 지정한 방식보다 우선
    • formnovalidate : 폼 데이터 유효성 검사,
    • formtarget : 서버의 응답 표시할 타겟 지정
    • height, width : type=”image” 일 때 이미지의 너비와 높이 지정
    • list :
    • multiple : type=”email” or type=”file”일 때 두 개 이상의 값 입력

• 드랍다운 목록(select, option, optgroup, datalist)

    <select 속성="속성 값">
    	<option value="값">내용1</option>
    	<option value="값">내용2</option>
    	<option value="값">내용3</option>
    </select>
  

  • 한가지 항목 선택
  • <select>
    • size : 화면에 표시될 드랍다운 메뉴의 항목 개수 지정 / multiple : ctrl 키로 여러 항목 선택 가능
  • <option>
    • value : 서버로 넘겨질 값 / selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션 지정
  • <optgroup>
    • 드랍다운 목록에서 여러 항목을 그룹으로 묶어야 할 경우 사용

    • label 속성으로 그룹의 제목 붙인다

        <select>
        	<optgroup label="장">
        		<option value="1">된장</option>
        		<option value="2">고추장</option>
        		<option value="3">쌈장</option>
        	</optgroup>
        	<optgroup label="폰타나">
        		<option value="4">올리브오일</option>
        		<option value="5">파스타소스</option>
        	</optgroup>
        	</select>
      

  • <datalist>

    • 데이터 목록 중에서 값을 선택할 수 있음.

        <input type="text" list="데이터 목록 id">
        	<datalist id="데이터 목록 id">
        		<option>항목1</option>
        		<option>항목2</option>
        		<option>항목3</option>
        	</datalist>
      

• <textarea>
  • 여러 줄의 텍스트 입력하는 영역 생성
  • 속성
    • name : 텍스트 영역의 이름 지정
    • cols : 가로 너비를 문자 단위로 지정
    • rows : 세로 길이를 줄 단위로 지정. 지정한 숫자보다 글 개수가 많아지면 스크롤 막대 생김.
• <button>
  • 속성
    • submit : 폼을 서버로 전송
    • reset : 리셋 버튼
    • button : 버튼 형태만 생성. 기능 없음
• <output> : 입력하는 값이 계산 결과라는 것을 브라우저에 알려줌
• <progress> : 진행 상태 표시
  • 속성
    • value : 진행 상태 부동 소수점으로 표시. 0 ~ max(1.0)
    • max : 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현. 0보다 큰 값
• <metet> : 값이 차지하는 크기 표시
  • 속성
    • min, max : 최소값, 최대값 지정. 생략시 0, 1
    • value : 범위 내에서 차지하는 값
    • low : 이 정도면 낮다 라고 할 정도의 값
    • high : 이 정도면 높다 라고 할 정도의 값
    • optimum : 이 정도면 적당하다 라고 할 정도의 값. optimum 값이 high 값보다 크면 value 값이 클수록 좋고 optimum 값이 low 값보다 작으면 value 값이 작을수록 좋다.