basic concept

기본 개념

Element(요소)

 

• <...> 내용 </...>
  - 시작(열린) 태그   Contents(요소의 내용)    종료(닫힌)태그
  - 범위가 존재

<h1>Hello World</h1>

 

부모 자식 관계

• 상위 Contents : 현재 Tag를 감싸는 모든 Tag
  하위 Contents : 현재 Tag가 감싸는 모든 Tag
• 부모 Contents : 현재 Tag를 감싸는 바로 위 Tag
  자식 Contents : 현재 Tag가 감싸는 바로 아래 Tag

<...> # 부모 Contents
    <..>Contents</..> #자식 Contents
</...>
자식은 Indent(들여쓰기), 부모는 Outdent(내어쓰기) 를 이용하여 보기 쉽게 정리

  <div> <!-- 부모 Contents-->

    <div> <!--자식 Contents-->

       

    </div>

  </div>

  <div>

    <div>

      <div></div>

    </div>

  </div>

Empty Tag

• Empty Tag(빈 태그) : 종료 태그가 없는 태그
  1) .<태그>
    - HTML1 ~ 5 에서 사용, 편리함
  2) <태그/>
    - XHTML / HTML5 에서 사용, 안전함 (실수가 줄어듦)

<meta charset="UTF-8">

... 

<link rel="stylesheet" href="./css/main.css">

 

• <Tag Attribute="value">Contents</Tag>
  - 태그 기능 확장

<img src="이미지 경로" alt="Alternate Text: 대체 텍스트">

• <input/> : 사용자가 데이터를 입력하는 요소(태그)
  - value : text, checkbox .etc
  Attribute : type(데이터 타입)

<input type="text"/>

 

 

글자와 상자

• Elements가 화면에 출력되는 특성으로 크게 Inline, Block이 있음
• 시각적 변화는 Block Elements가 Inline Elements 보다 효과적이라고 볼 수 있음
• 상대적으로 Block Elements가 Inline Elements 보다 제약사항이 없다고 볼 수 있음

 

Block Elements

• Block Elements(블록 요소) : Layout(상자)를 만들기 위한 elements
  1. width : 부모 요소의 크기만큼 자동으로 늘어남
  2. height : 포함한 콘텐츠 크기만큼 자동으로 줄어듦
  3. 요소의 가로/세로 너비를 지정할 수 있음
    - css 속성 width, height 를 적용하였을 때 반응이 있음
  4.외부/내부 여백을 지정할 수 있음
    - css 속성 margin(외부 여백), padding(내부 여백)을 적용하였을 때 반응이 있음
• 블록 요소 안에 블록 요소 넣을 수 있음
  - 예시
      <div><div></div></div>
• 블록 요소 안에 인라인 요소 넣을 수 있음
  - 예시
    <div><span></span></div>
• <div> : 대표적인 블록 요소
  1. 본질적으로 아무것도 나타내지 않음
  2. 콘텐츠 영역을 설정하는 용도
  3. 요소가 vertical 방향으로 쌓임

 

 

 

 

Inline Elements

• Inline Elements(글자 요소) : 글자를 만들기 위한 elements
  1. 수평으로 쌓이는 특징을 갖고있음
  2. 가로 세로 pixel이 태그가 포함한 콘텐츠 크기만큼 Inline(글자 요소)이 자동으로 줄어듦
  3. 가로 세로 사이즈를 지정할 수 없음
      <span> 태그에 css 속성으로 width, height를 지정해 줘도 반응이 없음
  4. 외부/내부 여백을 지정할 수 없음
      <span> 태그에 css 속성으로 margin, padding을 지정해주면 vertical(상,하) 은 반응이 없으나, horizontal(좌,우) 은 반응이 있음(padding지정했을때 vertical 방향이 적용 되는것처럼 보일 수 있으나 적용이 되지 않은거임)
  5. 예시
    <span>...</span>
      1) 대표적인 인라인 요소
      2) 본질적으로 아무것도 나타내지 않음
      3) 콘텐츠 영역을 설정하는 용도
      4) 특징
        - <span>태그 2개를 줄바꿈해서 사용하면 글자 사이에 띄어쓰기가 들어감
        - <span>태그 2개를 1줄에 붙여서 사용하면 <span>태그를 글자로 인식하기 때문에
           <span> 사이에 띄어쓰기가 들어가지 않음
        

span 태그는 줄바꿈이

 

• Inline Elements 안에 Blcok Elements 사용 불가능
  - 예외 있을 수 있음
  - 예시)
  <span><div>...</div></span>
• Inline Elements 안에 Inline Elements 사용 가능
  - 예외 있을 수 있음
  - 예시)
  <span><span></span></span>