[HTML] HTML 첫걸음

📖 HTML의 정의

HyperText Markup Language의 준말.

사용자가 브라우저를 통해 웹페이지에 접속할 때 개발자가 사용자게에게 보여주고 싶은 콘텐츠를 읽을 수 있도록 만들어놓은 문서.

 

🕋 HTML 기본 구조

head태그

body태그를 읽기 이전에 알아야 할 정보 등이 담기게 됨 html 파일의 기본적인 정보

body태그

사용자에게 보여주고 싶은 콘텐츠

💡 doctype을 지정 안 해주면 html버전을 몰라 스타일 같은 html의 디자인 담당하는 부분을 마음대로 렌더링 해서 보여준다.

 

🧱 HTML을 이루는 Tag

태그의 선언

보통 여는 태그와 닫는 태그가 있으며, 태그 사이에 내용을 넣을 수 있다.

예시)

<div>안녕하세요</div>
<p>저는</p>
<span>사람입니다.</span>

늘 그렇듯이 예외도 존재하는데, 닫는 태그 없이 하나의 태그만 존재하기도 함.

예시)

<img src="./경로" alt="이미지 설명">

<!-- 
  하나만 쓰이는 경우 끝부분에 /를 써서 닫혔다는 명시를 해도 되나,
  우리의 개쩌는 친구 html은 없어도 알아서 해준다.
-->
<input type="text" value="안녕하세요"/>

 

태그의 구조

태그들은 계층적으로 이루어져 있다(부모태그, 자식태그)

예시)

<!-- p태그를 기준으로 -->
<div>
<!-- ↑ div태그는 부모 -->
  <p>
<!-- ↓ span태그는 자식 -->
    <span></span>
  </p>
</div>

태그의 속성

각 태그에는 고유 속성과 공통으로 줄 수 있는 속성이 있는데,

class나 id 같이 css, js를 분류해서 선택하기 좋게 해주는 편의 속성이 있는 가 하면,
a태그의 href 나 img태그의 src 같은 속성은 필수로 있어야 하는 속성이다.

예시)

<!-- class, id는 필수는 아니다 -->
<div class="" id=""></div>

<!-- 
  a태그나 img태그 같이 경로로 먹고 사는 애들은 필수다.
  경로가 없어 이동할게 없거나, img가 안보이면 매우 난감하다.
-->
<a href="./경로"></a>
<img src="./경로">