코딩/HTML & CSS & JavaScript

HTML 요소

ADWELL 2022. 6. 22. 13:36

 

  사용예 기타
<h1></h1> <h1>제목</h1> <h6>까지 있음.
숫자가 높아질수록 글자 크기가 작아짐.
<body></body> <body>보이는 컨텐츠 몸통</body>  
<div></div>
<div id="속성값">구역(division)</div>
  
<p></p> <p>단락(paragraph)</p>  
<span></span> <span>지정하고 싶은 짧은 텍스트</span>  
<strong></strong> <strong>볼드체 텍스트</strong>  
<em></em> <em>이탤릭체 텍스트</em>  
<br> 줄바꿈  
<ul><li></li></ul> <ul>
  <li>사과</li>
  <li>파인애플</li>
</ul>		 순서없는 목록(Unordered List)

· 사과
· 파인애플
<ol><li></li></ol> <ol>
  <li>독서</li>
  <li>산책</li>
</ol>		 순서있는 목록(Ordered List)

1. 독서
2. 산책
<img> <img src="이미지파일이름" alt="이미지설명" /> alt의 용도
1. 이미지 위에 마우스를 올려놓으면 간략한 주석으로 읽을 수 있다.
2. 시각장애 사용자에게 이미지 설명을 소리내어 읽을 수 있다.
3. 검색 엔진이 인터넷을 크롤링 할때 사용된다.
<video></video> <video src="비디오파일이름" width="가로길이" height="세로길이" controls>비디오 실행오류시 문구</video> controls : 오디오 컨트롤을 브라우저에 자동으로 표시
<audio></audio> <audio autoplay controls>
  <source src="오디오파일이름" type="audio/mp3">
</audio>		 autoplay : 자동재생
loop : 반복재생
<embed> <embed src="비디오짤"  />  
<a></a> <a href="링크주소" target="_blank" title="커서를 대면 텍스트가 나타남">링크이름</a> target="-blank" 새창에서 링크접속
<table>
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
    <tr><td></td></tr>
  <tbody>
  <tfoot>
    <tr><td></td></tr>
  </tfoot>
</table>
  		 테이블
  - 헤드
  - 본문
  - 결론		 colspan : 열병합(가로로 확장)
rowspan : 행병합 (세로로 확장)
scope : 데이터 범위 (col, row)
<header>
  <nav></nav>
</header>		 헤더
 - 네비		  
<main>
  <header></header>
  <section>
    <article></article>
    <aside></aside>
  </section>
</main>		 메인
 - 헤더
 - 섹션
   - 기사
   - 추가정보		  
<figure>
</figure>		 <figure>
  <img src="imege.jpg" >
  <figcaption>사진설명</figcaption>
</figure>