내가 볼려고 만든 HTML

프런트엔드 개발 기초 - HTML

프런트엔드 개발의 가장 기본이 되는 HTML에서 가장 기본이 되는 용어 정리

<h1> </h1>

제목을 알려주는 태그. 1 ~ 6까지 있음

사용법 <h1> 프론트엔드 개발 기초 </h1>

<p> </p>

문단 나누는 기능

<ol> </ol> & <ul> </ul>

ol은 Oredered List 약자로 값의 1, 2, 3 등과 같이 번호 표시 가능

ul은 Unordered List 약자로 값 앞에 점으로 구분

ol 및 ul의 내용은 <li> </li>로 추가 가능

<ol>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

<img>

이미지를 추가하는 기능. </img>가 필요 없음. img를 추가할 경우 'src='를 사용하여 이미지 주소를 넣으면 됨

<a> </a>

anchor 기능으로 원하는 사이트로 이동 가능

사용법: <a href="이동 할 주소"> 표시할 내용 </a>

<div> </div>

division 의 뜻으로 분리를 의미함. a와 다른 점은 class를 부여하여 독립적으로 작동하게 함. (css 작업 시 해당 클래스 만을 독립적으로 작업 가능함)

<span> </span>

div 와 비슷한 작용을 하지만, 차이점은 div는 전체 블록을 나누는 기능을 하면, span은 문장 내에서 값을 특정하여 작업이 가능함

---

<hr>

문단을 수평선으로 나눔.

---

<br>

줄 바꿈 /n 같은 역할



윗 주석(superscript)(<a> 와 조합하여 사용하면 시너지 굳)



아랫 주석(subscript)

특수 문자

출처: w3schools.com

<>를 사용하기 위해서는 &lt; 같은 특수 기호 사용. 왜냐하면 html 코드는 <>를 사용하여 구현되기 때문에 특수 기호 사용이 불가능할 경우가 있음