Networks/HTML & CSS & JS

SK networks AI Camp - HTML(기본 설명)

코딩하는 Español되기 2024. 7. 31. 18:00

HTML Element

[그림 설명]

○ Item elements : 브라우저에 콘텐츠가 없어도 보이는 태그 또는 콘텐츠를 꾸며주는 태그

  <e.g.> a, video, button, audio, input, map, label, canvas, img, talbe 등

  <e.g code>

<p>
  This span is an <span class="highlight">inline-level element</span>; its
  background has been colored to display both the beginning and end of the
  element's influence. Input elements, like <input type="radio" /> and
  <input type="checkbox" />, are also inline-level content.
</p>

○ Box elements : 브라우저에 콘텐츠가 없지만 태그 또는 영역 or 의미를 정의하는 태그

  <e.g code>

<div>
  <p>
    This the first paragraph. The background color of these paragraphs have been
    colored to distinguish them from their parent element.
  </p>
  <p>This is the second paragraph.</p>
</div>

 

Block Or Inline

○ HTML 요소는 인라인 또는 블록이라는 다른 방식으로 표시될 수 있음

   <e.g. code & image>

더보기
<div>
  In the case of <strong>Fire</strong>, break glass to 
  <span>sound alarm. <img src="bell.jpg" alt="bell symbol"></span>
</div>

 

<!doctype html>
<html>
  <body>
    <div>
      <span>Hello world</span>
      <img href="example.com" alt="an example">
    </div>
  </body>
</html>

 

○ 설치하면 좋은 Extention

더보기

     ● Auto Close Tag

     ● Auto  Rename Tag

     ● HTML to CSS autocompletion

     ● Live Server