[프론트엔드] 3. HTML 기본 문법

[ 1 ] 기본 문법

<태그>내용</태그> = 요소 (Element)

: 기본적으로는 열린태그와 /닫힌태그 사이에 내용(content)이 들어가는 형태.

[ 2 ] 부모와 자식

<조상>
  <부모>
    <자식> 내용 </자식>
  </부모>
</조상>

• 감싸는 요소가 부모요소
• 감싸지는 요소가 자식요소
• 부모요소의 부모요소는 자식요소 기준, 조상요소 혹은 상위요소
• 자식요소의 자식요소는 조상요소 기준, 후손요소 혹은 하위요소

[ 3 ] 빈태그

<태그> </태그>

: 닫힌태그 없이 열린태그 하나로 사용되는 태그.

• XHTML과 HTML5에서는 <태그 /> 형식으로 사용된다.
• 보통 속성을 추가해 기능을 확장시켜 사용 한다.

<img src="경로" alt="대체텍스트"/>
<input type="타입"/>

[ 4 ] 인라인 요소와 블록 요소

인라인 (inline) 요소

: 글자를 만들기 위한 요소.

• CSS로 요소의 너비와 높이를 설정해도 변하지 않는다.
• 요소의 너비와 높이가 콘텐츠의 크기만큼 자동으로 줄어든다.
• Padding과 Margin은 왼쪽과 오른쪽만 설정이 가능하다.
• 기본적으로 인라인 요소는 블록 요소를 자식요소로 둘 수 없다.
• 요소가 수평으로 쌓이고, 요소 사이의 줄바꿈은 띄어쓰기로 출력된다.

  예시 )

  <span><div></div></span> : 불가 :
  <span><span></span></span> : 가능 :
  <span>대표적인</span>
<span>인라인태그</span>
  : 출력 : 대표적인 인라인태그
  <span>대표적인</span> <span>인라인태그</span>
  : 출력 : 대표적인인라인태그

블록 (block) 요소

: 상자, 레이아웃을 만들기 위한 요소.

• CSS로 요소의 너비와 높이를 설정할 수 있다.
• 부모 요소의 크기만큼 너비가 자동으로 늘어나고,
  포함한 컨텐츠의 크기만큼 높이가 자동으로 줄어든다.
• Padding과 Margin으로 위아래와 왼쪽과 오른쪽 모두 설정이 가능하다.
• 블록 요소는 인라인 요소와 블록 요소 모두 자식요소로 둘 수 있다.
• 요소가 수직으로 쌓인다.

  예시 )

  <div><div></div></div> : 가능 :
  <div><span></span></div> : 가능 :
  <div>대표적인</div>
<div>블록태그</div>
  : 출력 :
  대표적인
  블록태그

[ 마무리 ] 3일차를 마치며...

인라인 요소와 블록 요소로 나뉜다는 것을 처음 알게 되었다.
가끔 CSS로 Display를 block으로 설정해서 적용 하거나 하는 것은 해보았지만 그저 했던거지 그것들이 무엇을 의미하고 어떻게 작동하는지는 몰랐던 것 같다.
이렇게 하나하나 배워가며 이런 원리를 알아야 나중에 무엇이 잘 안되고 오류가 나더라도 어떤부분에서 어떤 동작이 안되었는지 깨달을수 있지 않을까 생각이 들었다.