태야

 HTML / CSS 기초 공부 

블록 구조(block)

블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능하다. 기본 설정이 블럭인 자주 사용하는 태그들은 다음과 같다.

div, p, h1~h6, ul, li, ol, table, form, section, footer...

div{
	display:block;
}

인라인 구조(inline)

인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소들이다. 인라인은 안의 글자와 같은 내용 길이에 맞게 크기를 차지하는 성질이 있다. 아래에  대표적인 몇가지 inline 태그들이 있다.

span, a, em, i, strong, b, del, ins, sub, sup, textarea...

같은 인라인요소를 포함하지만, 블록 요소는 포함 불가능하다. 그리고 인라인요소는 box관련 속성이 적용이 안된다. ex) width, height, margin(top, bottom)(margin은 좌, 우만 적용이 된다) 등 적용 안된다. 참고로 padding 값은 적용이 된다.

li{
	display:inline;
}

인라인-블록 구조(inline-block)

옆으로 나열되는 성격을 가진 inline 속성과 폭을 가지는 스타일이 모두 적용되는 block속성 두 가지 모두의 성질을 가진 구조이다. 대표적으로 <img> 태그가 있다. 이미지 태그는 width, height, margin(상하좌우) 속성 적용이 가능하다!.

img{
	display:inline-block;
}

보통 이미지를 사용할 땐 block(박스화)으로 처리해주고 사용하는 게 좋다.

img{
	display:block; /*박스화!*/
}