코드스테이츠 - HTML 태그들 정리

kwak woojong·2022년 4월 27일
0

코드스테이츠

목록 보기
2/36
post-thumbnail

HTML은 꺽쇄로 시작해서 꺽쇄로 끝난다.

<> 이거말여 이거

대부분은

<p>열고     닫고</p>

이런식으로 열고 닫아줘야 한다. 안 그런것도 있음.

예에에에전에 독학 시작한지 얼마 안됐을 때 프론트랑 백엔드 다 경험해 보고 싶어서

이런거도 만들어 봤었다. 근데 보고 ㅋㅋㅋ 난 프론트엔드가 너무 어렵게 느껴졌었음.
참고로 내 조카 동영상임 개인소장중 졸귀탱

특히 CSS 후... 하여튼 이 말 하려고 한게 아니고

HTML 태그는 디지게 많은데, 그다지 다 쓰는거 같진 않았다.

몇몇개만 알아보자

문장을 이렇게
작성을 했는데, br을 쓰면
<br> 줄을 바꿔. </br>
줍니다.

<p> 문단을 만들어 줍니다. </p>

<a href="https://velog.io/@kwj1830" target="_blank"> href 속성으로 하이퍼링크를 만들어 줍니다. </a>
<!-- target="_blank"는 새창으로 띄워준다. -->

<img src = "https://velog.velcdn.com/images/kwj1830/post/1a6468b2-f09d-4692-b98d-e0d0e34de76e/image.png">
<!-- img는 이미지를 삽입해준다. 자체 태그로 닫는다. src로 주소를 넣어줌.  -->

<table>
  <tr>
      <td>1행 1열</td>
      <td>1행 2열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>
<!-- 표를 만들어준다. tr로 행을 td로 열을 만든다. -->

<div>빈 박스를 만들어준다. display 속성은 block이다. 자동으로 줄이 바뀐다. </div>
<span>빈 박스를 만들어준다. display 속성은 inline라 줄바꿈이 안되고 옆으로 간다. </span>

<ul>
  <li>순서가 없이 모양으로 된 목록</li>
  <li>순서가 없이 모양으로 된 목록</li>
</ul>

<ol>
  <li>순서가 있는 목록1</li>
  <li>순서가 있는 목록2</li>
</ol>

아마 이정도를 많이 쓸듯 하다.


상기 태그는 이렇게 된다.


문장을 이렇게
작성을 했는데, br을 쓰면

줄을 바꿔.

줍니다.

문단을 만들어 줍니다.

href 속성으로 하이퍼링크를 만들어 줍니다.

1행 1열 1행 2열
2행 1열 2행 2열
빈 박스를 만들어준다. display 속성은 block이다. 자동으로 줄이 바뀐다.
빈 박스를 만들어준다. display 속성은 inline라 줄바꿈이 안되고 옆으로 간다.
  • 순서가 없이 모양으로 된 목록
  • 순서가 없이 모양으로 된 목록
  1. 순서가 있는 목록1
  2. 순서가 있는 목록2

일단 이 정도로 정리하자. video 같은건 백엔드 하면서 안다루지 않을까 싶다.

profile
https://crazyleader.notion.site/Crazykwak-36c7ffc9d32e4e83b325da26ed8d1728?pvs=4<-- 포트폴리오

0개의 댓글