[부스트코스] 비전공자를 위한 HTML/CSS - 2강 HTML 태그

• HTML 태그 소개
• 버전에 따라서 새로 추가되도 삭제하기도 한다.
• 제목과 단락요소
  • 제목(Heading) 태그
    • <h1> ~ <h6> 숫자가 작아질 수록 큰 수준의 제목
  • 단락(paragraph)과 개행(linebreak)
    • 단락
      • <p>
      • 단락 별로 개행한다.
      • 단락 안에서 다시 <p> 태그를 사용해도 개행되지 않는다.
    • 개행
      • <br>
      • 단락 태그 내에서 개행을 할려면 개행 태그를 사용해야함
• 텍스트를 꾸며주는 요소
  • <b> : 글자를 굵게 표현한다.
  • <i> : 글자를 이탤릭체로 표현한다.
  • <u> : 글자에 밑줄을 표시한다.
  • <s> : 글자에 중간선을 넣는다.
• 앵커 요소
  • <a> 앵커 태그
  • 다른 문서로 이동할 수 있는 링크를 생성한다.
  • href(하이퍼 레퍼런스) 속성을 무조건 가지고 있다
  • href 속성 내에 #id 속성을 사용하면 내부 링크로 사용할 수 있다.

  <a href="#some-element-id">회사 소개로 이동하기</a>
  
  ... 중략.
  
  <h1 id="some-element-id">회사 소개</h1>
  

  • target 속성
    • _self : 현재 페이지에서 링크 페이지로 이동, 기본 설정
    • _blank : 새 창을 열어 링크 페이지로 이동
• 의미가 없는 컨테이너 요소
  • <div>
    • 블록 레벨 요소
  • <span>
    • 라인 레벨 요소
• 태그 자체에 의미가 없고, 단순히 요소들을 묶기 위해 사용되는 태그
• 리스트 요소
  • <ul> : 순서가 없는 리스트
  • <ol> : 순서가 있는 리스트
    • <li> : 리스트 요소 내에 리스트를 넣는 태그

    <!-- 리스트 태그의 중첩 -->
    <ol>
    	<li>
    		A조
    		<ul>
    			<li>러시아</li>
    			<li>우르과이</li>
    			<li>이집트</li>
    			<li>사우디</li>
    		</ul>
    	</li>
    </ol>
    

  • <dl> : 용어를 설명하는 리스트
    • <dt> : 용어를 구분한다.
    • <dd> : 용어를 정희한다.
• 이미지 요소
  • <img> 문서에 이미지를 삽입한다.
  • src : 이미지 경로를 지정한다.
  • alt : 이미지의 대체 텍스트를 입력한다.
  • width/ height : 이미지의 크기를 지정한다.
  • gif : 256 색으로 제한적이지만 용량이 작고, 애니메이션, 투명 이미지 가능
  • jpg : 높은 압출률과 자연스러운 색상 표현
  • png : jpg와 비교했을 때 이미지 손실이 없고, 투명색 가능
• 테이블 태그
  • 표 구성 요소
    • <table> : 표를 나타내는 태그
    • <tr> : 행을 나타내는 태그
    • <th> : 제목 셀을 나태내는 태그
    • <td> : 셀을 나타내는 태그
      • 속성
        • colspan=”n” : n개열 병합
        • rowspan=”n” : n개행 병합
  • 표의 구조 관련 태그
    • <caption> : 표의 제목을 나타내는 태그
    • <thead> : 제목 행을 그룹화하는 태그
    • <tfoot> : 바닥 행을 그룹화하는 태그
    • <tbody> : 본문 행을 그룹화하는 태그
• 폼 관련 요소
  • input 요소
    • 대표적인 폼 요소, 다양한 양식의 데이터를 받을 수 있음
    • type 속성을 통해 여러가지 폼을 화면에 출력할 수 있다.
    • input 요소 type 속성
      • text : 화면에 텍스트 박스 출력, 텍스트를 입력 받음
        • placeholder : 텍스트 박스 안에 글자 출력, 사용자가 글자 입력시 사라짐
      • password : 화면에 텍스트 박스 출력, 문자를 입력 받으면 화면상에 노출 되지 안흥ㅁ
      • radio : 라디오 버튼 출력
        • name : 라디오 버튼을 한 그룹으로 묶어주는 속성
      • checkbox : 체크 박스 출력
        • checked : 처음 화면에 출력할때 체크된 상태로 출력
      • file : 파일 선택 버튼 생성, 버튼 클릭시 PC내에 파일 선택 가능
      • submit : form 태그에 지정된 페이지로 넘어가는 버튼 생성
      • reset : 값을 초기화 시키는 버튼 생성
      • button : 아무 기능 없는 버튼 생성
        • value : 속성에 값을 넣어 버튼 내에 텍스트를 입력할 수 있다.
      • image : 버튼에 이미지를 넣어서 사용할 수 있다. 기능 submit 과 같다.
        • 기존 image 태그와 같은 속성을 사용할 수 있다. src 는 무조건 필요로 한다.
  • select 요소
    • select : 콤보 박스 생성
    • option : select 태그 내에 선언하여 사용한다. 콤보 박스내에 값을 넣는다.
      • selected : 처음 화면에 출력시 콤보박스에서 처음부터 선택된 채로 된다.
  • textarea 요소
    • textarea : 여러 줄을 입력 가능한 텍스트 박스 출력
      • cols : 영문 기준 30줄의 텍스트 박스 크기를 조절한다.
  • button 요소
    • input 에서 사용하는 submit,reset,image 와 같은 기능을 사용할 수 있지만, 좀 더 스타일적으로 유동성이 있다.
  • label 요소
    • 폼 컨트롤과 연결시켜 웹 접근성 향상에 도움이 된다.
    • 연결된 요소들은 하나가 된 것처럼 동작한다.
  • fieldset, legend 요소
    • fieldset : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
    • legend : 폼 요소의 제목으로 fieldset 요소 내부에 작성
  • form 요소
    • 폼 데이터를 그룹화하여 서버에 전송한다.
    • action 속성 : 폼 데이터를 처리하기 위한 서버의 주소
    • method : 데이터를 전송하는 방식을 지정 (get : url 에 표시, post : url에 표시x)