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요소도 가능