HTML 기본 개념 정리

HTML

---

HTML 은 Hyper Text Markup Language 약어로 웹 브라우저를 통해 사용자에게 보이는 웹 문서를 작성하기 위한 언어
입니다. 다시 말해 보여지는 브라우저의 구조를 설계하며 웹 페이지를 위한 마크업 언어입니다.

 

 

1. HTML 기본 문법

---

1.1 태그(TAG)

 

▶ 열린 태그와 닫힌 태그 안에 요소를 담습니다.

 

          <태그>   내용   </태그>  //이를 묶어 하나의 요소라 합니다.
        열린태그  요소내용   닫힌태그     

 

1.2 부모와 자식관계

 

▶ 부모태그는 자식태그를 감싸줍니다.

 

// 일반적인 부자 관계 태그

<태그><태그> 내용 </태그></태그>

부모태그
자식태그


// 상위태그와 하위태그 (조상태그와 후손태그)

<태그>
    <태그>
       <태그> 내용 </태그>
    </태그>
</태그>

빨간색태그 기준으로 아래로 갈 수록 자식요소와 후손요소를 만납니다. (하위요소)
초록색태그 기준으로 올라 갈 수록 부모요소와 조상요소를 만납니다.   (상위요소)
파란색태그 기준으로 올라가면 부모요소 내려가면 자식요소를 만납니다.

 

 

1.3 인라인요소(inline)와 블록요소(block)

 

▶ 글자와 상자가 화면에 출력되는 특성은 크게 인라인요소와 블록요소가 있습니다.

 

// 인라인요소 //
// span // 대표적인 인라인 요소이며 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도에 쓰입니다.

<span> hello </span>
<span> joycoding </span>

// 인라인요소의 특징 //
요소가 수평으로 쌓이고 포함한 컨텐츠 크기만큼 자동으로 줄어들려는 성질이 있습니다.
좌우 여백만 설정이 가능하고 그외는 불가능 합니다. 순수 글자 입니다.

<span><span> hello </span></span>    // 가능
<span><div> joycoding </div></span>  // 불가능


인라인 요소안에 블록요소를 쓸수 없습니다.


// 블록요소 //
// div // 대표적인 블록 요소이며 콘텐츠 영역을 설정하는 용도에 쓰입니다.

<div> hello </div>
<div>joycoding</div>

// 인라인요소의 특징 //
요소가 수직으로 쌓이고 부모요소의 크기만큼 자동으로 늘어나는 성질을 가지고 있습니다
가로 새로너비는 줄어드는 성질이 있고 가로 세로 너비를 지정할수 있습니다.
여백 설정이 가능하며 제어할대는 블록요소가 유용합니다.

<div><div> hello </div></div>  // 가능
<div><div>joycoding</div></div> // 가능

제약상황이 별로 없습니다.

인라인 요소와 블록요소를 쉽게 이해하기 위해선 글과 상자를 생각하면 됩니다.

인라인 요소는 글자를 만들기 위한 요소이고 블록요소는 상자(레이아웃)를 만들기 위한 요소입니다.