CSS 시작 전 기본이 되는 지식
영역
영역은 아래의 그림과 같이 나뉩니다.
margin : 테두리(border) 바깥 영역
boder : 테두리 영역
padding : 테두리 안쪽 영역
div : 내용 영역
inline, block, inline-block
inline : 세로 가로 둘다 안에있는 내용물의 크기
→ 디자인할때 inline을 잘 쓰지 않음(크기 지정 불가능)
block : 가로는 무제한, 세로는 지정한 만큼의 크기
→ 세로의 크기는 지정이 가능하지만, 가로의 크기는 지정 불가능
inline-block : 세로 가로를 지정 가능
<!DOCTYPE html> <html lang="en"> <head> <style> div { width: 200px; height: 200px; background-color: red; margin-bottom: 10px; display: inline-block; border: 10px solid black; padding: 10px; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>
위 코드에서 head 태그의
display 부분만 변경inline
block
inline-block
Share article
