HTML

dnjstd·2021년 9월 24일
1
post-thumbnail

HTML

HTML Hypertext Markup Language 웹 페이지의 내용을 구조화하기 위해 사용하는 언어

HTML Document

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>안녕!</p>
  </body>
</html>
Hello World

Hello World

안녕하세요!

HTML Elements


참고자료

제목/ 단락 요소

  • <h1>~<h6> Heading 일반 텍스트보다 강조되어 나타나는 제목 태그
  • <p> paragraph 단락 구분
  • <br> linebreak 줄 바꿈

텍스트를 꾸미는 요소

  • <b> bold 단순히 텍스트를 진하게 표시하는 역할
  • <strong> bold 중요한 부분을 강조해 웹 접근성에 기여
  • <i> 기울임 italic 시각적
  • <em> 기울임 emphasized 실질적인 강조
  • <u> underline 밑줄
  • <s> strike 중간선

div / span tag

태그 자체에 의미 없음, 단순히 요소들을 묶기 위해 사용되는 태그

  • <div> block
  • <span> inline

리스트 요소

  • <ul> unordered list
  • <ol> ordered list
  • <li> list
<ul>
    <li></li> 
    <li></li> 
    <li></li> 
    ... 
</ul> 

🔎 void(empty) elements

Self-closing을 하는 일부 태그들이 있다.
<br/ > <img/ > <input/ > 이를 빈 태그 라고 한다.

<a href="http://url” target="_blank">Text</a>

Target Attributes

  • _black 새로운 창에서 오픈
  • _self 현재 화면에서 오픈(기본값)
  • _parent 현재 화면의 부모 프레임에서 오픈
  • _Top 현재 윈도우 전체에서 오픈

내부 링크

페이지 스크롤이 길어질 경우! 특정 부분으로 이동할때 사용

<a href="#element-id">상단으로 이동</a>
  • href=“이동할 요소의 id값”

Images

<img src=“untitled.jpg”> 
<img src=“http://url”>

Video

<video src="Video.mp4" width="320" height="240" controls>
  Video not supported
</video>
profile
Frontend Engineer 🌱

0개의 댓글