HTML 글자/단락 태그 + CSS

글자/단락 태그

인라인 요소

; 글자를 만들기 위한 요소들   

- 요소가 수평으로 쌓임

- 가로,세로 ; 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
- width, height 설정 불가

- margin과 padding은 좌우만 설정 가능! 상하는 불가!
- span>div는 불가 / span>span은 가능

 

span ; 특별한 의미가 없는 구분을 위한 요소

a ; 다른,같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 / href(링크 URL), target(링크 URL의 표시 위치) ; _blank(새 창), _self(현재 프레임), _parent(부모 프레임), _top(현재 창에서 가장 상위 프레임)

img ; 이미지를 삽입하는 요소 / src(삽입할 이미지의 경로),alt (삽입할 이미지의 이름)

video ; 비디오 요소 / src, controls(비디오의 기본적인 동작(재생, 정지, 속도)을 조정할 수 있는 패널 생성), autoplay, loop(반복재생), muted, poster(썸네일)

audio ; 오디오 요소 / src, controls, autoplay, loop

iframe ; 해당 웹페이지 안에 또 다른 하나의 웹페이지 삽입 / src

pre ; 텍스트 내용 그대로 보여줌

hr ; 수평 가로 구분선

b ; 굵게, i ; 기울게, mark ; 형광색, del ; 취소선, ins ; 밑줄

sup ; 위 첨자, sub ; 아래 첨자, q ; 인용구

abbr ; 축약어 / title(마우스 대면 나올 단어 설정)

br ; 줄바꿈 요소

input ; 사용자가 데이터를 입력하는 요소, inline-block 요소 / type(입력받을 데이터의 타입), placeholder(사용자가 입력할 값의 힌트), disabled(비활성화), checked(체크박스 입력 요소 체크됨), name(그룹 이름)

table ; 표 요소, 행과 열의 집합, tr ; 행, th ; 열 제목, td ; 열

 

블록 요소 

; 상자(레이아웃)를 만들기 위한 요소들   

- 요소가 수직으로 쌓임
- 가로 ; 부모 요소의 크기만큼 자동으로 늘어남!
- 세로 ; 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
- width,height,margin,padding 설정 가능
- div>span,div>div 모두 가능

 

div ; 특별한 의미가 없는 구분을 위한 요소

h1~h6 ; 제목을 의미하는 요소

p ; 문장을 의미하는 요소

ul ; 순서가 필요없는 목록의 집합, ol ; 순서가 필요한 목록의 집합, li ; 목록 내 각 항목 / list-style-type(마커 변경) ; disc(●), circle(○), square(□), list-style-image ; 마커 이미지로 변경

dl ; 정의 리스트, dt ; 용어의 이름, dd ; 정의

 

그 외

&엔티티이름 ; HTML 예약어 ex) &lt;  = '<'와 같음

<!-- 주석내용 --> ; 주석