1-3 HTML 요소 : 텍스트 표현

br

: 줄을 바꾼다.

: 편집기에서 엔터키와 같은 기능

: 종료태그 </br> 없이 사용

 

 

 

p

: 문단을 나누어 독립된 단락을 생성

: 단락 구분을 위해 단락 전후에 빈 줄이 자동으로 추가됨

: p를 연속해서 여러 번 사용해도 p를 한 번 사용한 것과 같다.

 

 

 

 

hr

: 텍스트 사이에 수평선을 그림

: 주제가 변경되는 콘텐츠를 구분하는 용도

: 자동 줄바꿈, 종료태그 없이 사용

 

 

 

hn

: 단락의 제목을 지정한다.

: 제목 크기 -> h1 > h2 > h3 > h4 > h5 > h6

: 굵은 글자(볼드체), 자동 줄바꿈

 

 

 

pre

: 편집기에서 문자가 입력된 형태를 그대로 유지하여 출력

: 공백, 탭, 들여쓰기, 엔터키는 무시되지만, pre태그를 사용하면 입력된 그대로 출력이 가능하다.

: 특수 문자가 많은 텍스틀르 표시할 때 유용하다.

: 행의 길이가 브라우저의 폭보다 길어져도 자동 줄바꿈이 되지 않는다.

 

 

 

blockquote

: 상하 빈 줄로 구분되는 인용문 단락의 생성 및 들여쓰기

: 들여쓰기 간격의 인위적인 조정은 불가

: cite 속성 -> 인용된 부분의 URL 지정

 

 

 

 

공백 및 특수 문자 입력 

: &특수이름; 

: &#10진수코드;

: &#x16진수코드; 중 하나로 입력해서 사용한다.

 

 

 

글자 스타일 지정 요소

물리적 스타일 관련 요소 : 단순히 웹 브라우저에 표시되는 출력 모양만을 지정하는 요소

 

 

 

 

논리적 스타일 관련 요소 : 출력 형태보다는 요소 자체가 의미를 갖고 사용되는 요소

 

 

 

 

 

블록 요소 vs 인라인 요소

블록 요소	인라인 요소
문서 구조 요소	텍스트 요소
항상 새로운 줄에서 시작해서 하나의 줄을 전부 차지해서 내용 표시	입력하는 내용만큼의 공간을 차지해서 내용 표시
자동으로 줄바꿈 수행	줄바꿈 미수행 -> 앞뒤 내용이 이어져 한 줄에 쭉 표시
div, p, h1, ...	span, img, strong, ...

 

 

 

 

 

콘텐츠 컨테이너 요소 : div, span

div 요소	span 요소
블록 요소	인라인 요소
HTML 요소를 묶어 하나의 논리적인 단위의 영역을 구성	텍스트를 위한 컨테이너
논리적으로 구분된 대량의 내용에 대해 CSS 스타일 지정 또는 전체 페이지의 공간을 분할하여 레이아웃을 구성하는데 사용	텍스트의 일부에 대해  CSS 스타일 지정 또는 자바스크립트에서 조작할 때 유용

 

 

문서

 

 

 

실행