[HTML] HTML태그 정리 - 2

포함태그

• iframe : 웹 페이지에 다른 웹 페이지를 넣는 태그
• <iframe></iframe>
• 속성 설명
  • src : iframe에 삽입될 주소
  • name : yarget이 필요한 이름 지정( a 태그와 연결)
  • width : 너비 지정
  • heigh : 높이 지정
  • frameborder : 테두리 유무 (테두리 삭제 =0, 테두리 생성 = 1)
  • scrolling : 스크롤 유무(yes, no, auto)
  • align : iframe정렬(left, right)

예제1

 

See the Pen iframe태크 by 정혜선 (@Diligent-milk) on CodePen.

 

강조태그

• mark : 단순 참조표시할 때 사용하는 태그
• <mark>텍스트</mark>

 

추가설명 태그

• details : 숨길 내용을 작성하는 태그
• <details> 태그 </details>
• summary : 숨겨진 내용에 대한 제목을 나타내는 태그
• <summary>텍스트</summary>

 

루비문자

• ruby : 루비문자를 정의하는 태그
• <ruby>텍스트</ruby>
• rt : 문자에 대한 설명, 발음을 상단에 정의하는 태그
• <rt>텍스트</rt>

 

미디어 태그

• video : 동영상을 웹페이지에 넣어주는 태그
• <video></video>
• 지원되는 확장자 : MP4, WebM, OGG
  • 비디오 태그 속성
  • src : 동영상 / 음원파일 경로 지정
  • preload : 동영상/ 음원파일 재생 전 모두 불러올지 지정
  • autoplay : 자동 재생 지정
  • loop : 반복 재생 지정
  • controls : 재생 도구 출력 지정
• audio : 오디오를 웹페이지에 넣어주는 태그
• <audio></audio>
• 지원되는 확장자 : MP3, WeV, OGG
  • 공통 속성
  • poster : 동영상 준비중 미리보기 이미지 지정
  • width : 동영상 너비 지정
  • height : 동영상 높이 지정
• source : 동영상/음원에 대한 포맷을 지원하는 태그
  • ex) <audio controls = "controls"> <source src=""type="audio/mp3"/> <source src=""type="audio/ogg"/></audio>
• embed : 웹 페이지에 멀티미디어를 넣어주는 태그
  • src : 멀티미디어의 경로 지정
  • type : 멀티미디어의 MIME타입 지정(audio, video,...)
  • width : 너비 지정
  • height : 높이 지정

 

입력양식 태그

• form : 홈페이지에 입력폼을 만들때 사용하는 태그
• <form></form>
  • action : 입력 데이터의 전달 위치 지정
  • method : 입력 데이터의 전달 장식 지정 (GET/ POST)
  • name : from태그의 이름 지정
• <input type = "text"> : 데이터를 입력할 수 있는 태그
• name과 value속성은 반드시 지정해야한다. 
  • name : 입력한 값을 구분하기 위해 이름 지정
  • value : 기본값을 지정
  • placeholder : 이미보기 텍스트 지정
  • autofocus : 자동 커서 설정(true)
  • maxlength : 글자 수 제한 지정
  • readonly : 읽기 전용 지정
• datalist : input요소에서 사용하기 위한 옵션을 미리 정의하는 태그
• <datalist>태그</datalist>
  • id : input요소의 list속성과 연결하기 위한 값 지정
  • option : input요소에서 사용할 값을 value속성에 지정
•  <input type="password"> : 비밀번호를 입력할 때 사용하는 태그 , name과 value속성은 반드시 지정
• <input type=" checkbox"> : 여러 항목을 동시에 선택할 때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="radio"> : 여러 항목중 하나만 선택할 때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="file"> : 파일업로드시 사용하는 태그, name과 value속성은 반드시 지정
• <input type="color"> : 색을 지정할 때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="number"> : 수치를 입력할때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="range"> : 특정 범위의 수치를 입력할 때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="date"> : 날짜를 입력할 때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="datetime - local"> : 특정 범위의 수치를 입력할 때 사용하는 태그, name과 value속성은 반드시 지정
• <input type="reset"> : form내 모든 input요소의 값을 초기화하는 태그, value속성은 반드시 지정
• <input type="submit"> : form내 모든 input요소의 값을 전송하는 태그, value속성은 반드시 지정
• <textarea></textarea> : 여러 줄의 텍스트를 입력할 수 있는 태그
  • rows : 텍스트 영역의 높이 설정
  • cols : 텍스트 영역의 너비 설정
• <select></select> : 입력 폼에서 목록상자를 생성해 선택이 가능한 태그, name과 value속성은 반드시 지정
• <lable for=""> 텍스트</lable> : input태그를 설명하는 태그 
  • 여기서 for는 input태그의 id속성과 연결
  • ex)
    <label for=“name”>이름 :</label>
    <input type=“text” id=“name”/
• <fieldset>텍스트</fieldset> : 입력양식을 그룹화하는 태그
• <legend>텍스트</legend> : 그룹화된 내용을 설명하는 태그

 

예제2

 

See the Pen from태그 by 정혜선 (@Diligent-milk) on CodePen.

 

공간분할태그 : 경계를 분할하거나 영역을 나눌때 사용

• <div>태그|텍스트</div> : 문서의 영역을 나누거나 그룹화할 때 사용하는 태그
• <p>태그|텍스트</p> : 단락을 표현할 떄 사용하는 태그
• <span>태그|텍스트</span> : 콘텐츠 요소를 표현하거나 인라인 요소를 그룹화하기 위한 태그
• Semantic 태그(의미론적 요소) : 개발자와 브라우저에게 자신의 의미를 설명해주는 태그
• <header>태그</header> : 웹 문서의 소개 콘텐츠 및 네비게이션 링크 정의
  • ex) 제목, 로고, 아이콘, 저자 정보 등
• <nav>태그</nav> : 웹 문서의 네비게이션 링크 정의
  • ex) 메뉴 구성
• <aside> 태그 </aside> : 웹 문서의 사이드 위치 공간
  • ex) 메인 콘텐츠와 관련된 정보, 광고 등 부분적인 정보를 그룹화
• <section>태그</section> : 주제별 그룹의 콘텐츠 영역 정의
  • ex) 텝페이지, 소개, 연락처, 뉴스 항목 등과 같은 주제별 분할
• <article>태그</article> : 독립적인 콘텐츠 공간
  • ex) 신문기사, 잡지, 블로그 항목, 게시판 글 등
• <footer> 태그 </footer> : 웹 문서의 바닥글 정의
  • ex) 사이트와 관련된 정보( 저작권자, 연락처, 사이트 맵, 관련된 문서 링크)

 

 

 

실습1

 

 

See the Pen 실습1 by 정혜선 (@Diligent-milk) on CodePen.