web_frontend(패스트캠퍼스 강의 정리)

web_frontend(8)HTML 글자와 상자

동그리동동신동 2021. 3. 4. 19:55

HTML 글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분

 

 

인라인(inline)요소: 글자를 만들기 위한 요소들.

블럭(Block)요소: 상자(레이아웃)를 만들기 위한 요소들.

 

 

대표적인 inline요소

 

<span></span>

대표적인 인라인 요소로 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도.

 

<span>Hello</span>
<span>World</span>

inline요소는 왼쪽에서 오른쪽으로 수평으로 쌓임

 

Hello World <- 이런식으로 된다.  줄바꿈을 해서 띄어쓰기가 됨 줄바꿈 안하면 띄어쓰기 x

inline태그는 높이와 너비 모두 포함한 콘텐츠 크기만큼 자동으로 줄어듬!

 

 

<span style="width: 100px" >Hello</span>
<span style="height: 100px" >World</span>

 

이렇게 style을 넣어도 변동이 없다. inline 요소이기 때문에

 

 

<span style="margin: 20px 20px" >Hello</span>
<span style="padding: 20px 20px" >World</span>

inline요소는 외부이든 내부이든 위아래 는 불가능 좌우는 가능 20px 20px해도 뒤에 좌우만 먹음

 

<span><div></div></span> 불가능
<span><span></span></span> 가능

inline요소 안에는 block요소 불가능

 

 

대표적인 block 요소

<div>Hello</div>
<div>World</div>  

대표적인 블록 요소로 본질적으로 아무것도 나타내지 않는 콘턴츠 영역을 설정하는 용도.

 

Hello

World  -> 요렇게 출력 된다.

 

 

블럭요소는 요소들이 수직으로 쌓인다. 가로너비는 부모 요소의 크기만큼 자동으로 늘어난다. 세로 높이는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.

 

<div style="width: 100px">Hello</div>
<div style="height: 100px">Hello</div>  

inline요소는 안됐지만 block요소는 너비 높이 스타일 css 속성 적용가능 

 

<div style="margin 10px">Hello</div>
<div style="padding: 10px">Hello</div>

 

내외부 여백을 지정하는 css속성도 좌우 상하 상관없이 다 사용 가능 

 

<div><div></div></div>     블럭요소안에 블럭요소 가능
<div><span></span></div>  블럭요소안에 inline요소도 가능