[HTML]03

HTML 

• HTML ? 
  • Markup Language : 요소(Elements)들을 구조적으로 나열하는 정적 문서 
  • HTML, XML 
  • Hyper Text : 다른 문서로 이동이 가능한 Link가 있는 문자열 / 문서 
  • 정적 언어이며, 요소의 나열 및 구조화 목적으로 사용되며 다른 문서로 연결(이동)이 가능 
• Hyper Text Marup Language 
• 구성 
  • Start tag <element> + End tag </elements> 
  • End tag 가 없어도 되는 tag 들도 있다. 
  •  <br>, <td>, <input> 
• 요소 (Element) : HTML 문서의 모든 내용들로 태그 꺽쇠 안의 문자들 
• 속성 (Attribute) : 요소들이 가지는 속성 
• Tag : Element + Attribute를 바탕으로 실체화 된 대상으로 Instance와 유사하다. 
• 구조 
• 대소문자를 구분하지 않으나, 나중에 딱 한곳에서 에러를 띄우므로 소문자를 쓰자. 
• 문자 / 문자열 구분 없이 " ", ' ', none 모두 사용 가능하지만 띄어쓰기가 들어간다면 " " 로 감싸자 

• Tag 
  • attributes 
  • color : 색깔 
  • size : 1 ~ 7, font-size 
  • tr : row 추가 
  • th : header 값들 추가 
  • td : column 값들 추가. 반드시 </td> 로 닫지 않아도 된다. 
  • 병합 
  • 왼쪽에서 오른쪽, 위에서 아래로만 병합 할 수 있다. 
  • colspan : 왼쪽에서 오른쪽으로 병합 
  • rowspan : 위에서 아래로 병합 
  • p1 : type 값 
  • button : 버튼 
  • text : 텍스트 
  • password : 비밀번호 
  • checkbox : 체크 박스, 여러 개 중에서 여러 개를 선택할때 사용 
  • radio : 여러 개 중에서 같은 이름으로 묶인 것 중 딱 하나만 선택할때 사용 
  • p2 : 안내 메시지  
  • 텍스트를 입력하면 바로 사라지고 텍스트를 지우면 다시 나타남 
  • p3 : 기본으로 설정해주는 값 
  • 하위 태그로 option 태그를 갖는다. 
  • size = ? : combobox 가 아닌 list 로 보여줌 
  • multiple : ctrl + click 으로 다중 선택 가능 
  • return type은 boolean 
  • controls : 플레이어 모양을 자동으로 추가 
  • 자동재생의 경우 muted를 추가해야 한다. 
  • audio와 동일하게 controls로 플레이어 를 추가할 수 있다. 
  • ul : 정렬 되지 않은 리스트. 순서가 없다. 
  • ol : 순서대로 정렬된 리스트 
  • h1 ~ h6 까지 있으며 숫자가 작을수록 글씨 크기가 커진다. 
  • WEB에서 사용 빈도가 가장 높다. 
  • display 속성이 block 이기 때문에 혼자 한 줄을 차지한다. 
  • 다른 태그가 왔을때 세로로 나열된다. 
  • width (넓이) / height (높이) 를 지정 할 수있다. 
  • display 속성이 inline 이기 때문에 다른 태그가 오면 오른쪽에 온다. 
  • width / height 조절이 불가능하다. 
  • 우리가 넣은 값에 맞춰서 width 가 조절된다. 
  • legend 태그를 하위에 두며, 타이틀을 만들 수 있다. 
• html : inner HTML space 의 내용들이 HTML 문서임을 표시 
• head : 문서의 정보 또는 문서의 설정 값 등을 작성하는 곳 
• body : 실질적인 view 영역. 사용자가 보게 될 내용을 작성하는 곳 
• b : inner HTML space 의 text들을 bold 처리 
• br : line break, 줄 바꿈 
• font attribute_name = ? : 내용에 성을 줘서 변화를 준다. 
• marquee : 동적 텍스트 
• img : src url 로 이미지 띄우기 
• table : 테이블 만들기 
• input type = p1 placeholder = p2 value = p3 : 값을 입력 받는 태그 
• textarea : 여러줄의 text를 입력받는 태그 
• select : combobox 를 만드는 태그 
• audio : 음악 재생 태그 
• video  : 비디오 재생 태그 
• ul (Unordered List) vs ol (Ordered List) 
• li (List) : ul / ol 의 하위 태그. 리스트의 각 항목 
• h ( Header ) : text를 제목처럼 꾸며준다. 
• div ( Division, Divide ) : 화면안에서 영역을 나누는 용도로 사용된다. 
• span : 구역을 나누는 용도로 사용한다. 
• fieldset : 특정 구역을 생성하고 자동으로 border가 들어간다. 

 

 

Semantic tag 

• 사용 이유 
  • 관련 키워드로 검색했을때 검색 결과 상위에 문서를 노출 
• HTML 5로 넘어오면서 사용자의 접근성을 위해 검색 엔진이 코드를 분석 하기 위해 
• 검색 엔진의 최적화 
• 종류 
  • nav : 네비게이션 링크. 
  • summary : details 요소를 위한 눈에 보이는 제목 
  • details : 사용자가 보거나 숨길 수 있는 세부 정보 
  • mark : 강조된 텍스트 
  • figcaption : figure 요소에 대한 캡션 정의, 부가설명 
• header : 문서나 섹선의 머릿글. form 태그로 검색을 넣거나 nav 태그로 사이트 메뉴를 만든다. 
• main : 문서의 주요 내용. 오직 한번만 사용 
• section : header, footer 와 함께 문서 구역 정의. 
• article : 내용을 정의 
• figure : 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 독립적인 컨텐츠 
• footer : 문서 또는 섹션의 바닥글. 주로 저작권, 연락처 정보 등 
• aside : 페이지 컨텐츠가 아닌 링크, 광고, 사이드바 표시 등 
• time : 날짜/시간