본문 바로가기

언어 기초/HTML,CSS

[칼퇴족 HTML5 + CSS3 | Chapter 02 HTML 페이지 만들기]block-level, inline-level 요소

1. 학습 목표

 HTML문서의 태그와 요소의 속성을 이해할 수 있다.

2. 필요 개념 문장정리

속성

  • href속성은 다른페이지로 이동하는 속성이다. <a>태그는 하이퍼링크 역할로 이동하고자 하는 페이지의 URL을 알고 있어야 한다.

출처 -&nbsp;칼퇴족 HTML5 + CSS3

  • target속성은 하이퍼링크로 연결된 문서를 현재 페이지에서 열 것인지 새로운 페이지에서 열 것인지 결정하는 속성이다.

출처 -&nbsp;칼퇴족 HTML5 + CSS3

 

  • src속성은 이미지 경로와 이미지 파일을 입력하는 속성이다. 
  • 이미지파일을 불러오는 태그는  <img>, 파일이 있는 위치를 표기하는 속성은 src속성이다.
  • alt속성은 이미지를 대신하여 대체 텍스트로 보여준다.

출처 -&nbsp;칼퇴족 HTML5 + CSS3

  • 요소는 수직으로 표시하는 블록요소와 수평으로 표시하는 인라인요소가 있다.
  • 수직배열을 뜻하는 블록 요소는 웹브라우저 한 줄을 다 사용하고 위아래 여백이 있으며 항상 새로운 줄에서 시작한다.
  • 웹브라우저 가로의 전체 너비를 차지한다.
  • h1~h6는 heading으로 내용에 제목을 의미하는 태그이다. p는 paragraphs의 약자로 문단을 뜻한다.
  • div는 division의 약자로 특정영역이나 구획을 만들때 사용한다. 요소를 박스로 감싸는 컨테이너 역할을 한다.

출처 -&nbsp;칼퇴족 HTML5 + CSS3

  • 인라인 태그의 특징은 요소들이 필요한 만큼의 너비를 차지한다. block요소처럼 웹브라우저 새오운 줄에서 시작하지 않고 한 줄에서 수평정렬한다.
  • 대표적인 수평태그로 <span>이 있다.

출처 -&nbsp;칼퇴족 HTML5 + CSS3

 

3. 마무리

블럭요소와 인라인 요소의 종류와 성격을 이해할 수 있었다.