inline
inline태그는 쉽게 말하면 여백이 있는 공간까지 한줄에 나열하는 태그입니다. 여백이 채워질때까지 줄바꿈도 일어나지 않습니다. 또한 인라인 요소의 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생합니다.
넓이와 높이는 지정이 안되지만 따로 css를 설정해준다면 변경이 가능합니다.
이러한 특징은 인라인 요소를 가진 태그들이 서로 나열되었을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 때문입니다.
inline 태그에는 span, a, select, img, strong 등이 있습니다.
예를 들면
난 학생입니다. 저는 서울을 거주하고 있습니다. 현재 웹 개발을 공부하고 있습니다.
이런식으로 끊기지 않고 한 줄에 나열하게 됩니다.
block
inline과 달리 한줄에 나열하지 않고 어떤 내용이 있다면 여백을 무시하고 한 줄을 차지하게 되고, margin, width, height가 적용이 된다는 특징을 가지고 있습니다. 대표적으로 p태그가 있습니다.
block도 예를 들면
난 학생입니다.
저는 서울을 거주하고있습니다.
현재 웹개발을 공부하고 있습니다.
한 내용이 한 줄이 되어 표시되어 여백을 무시하고 그 다음줄에 내용을 작성할 수 있습니다.
inline-block
inline-blcok은 성격이 반반이 들어있습니다. 앞에 내용과 달린 기본적으로 설정되어있는 태그는 없고 태그에 직접 설정을 해줘야 합니다. 상하의 값은 margin, inline-height로 설정해줄수 있으며 넓이와 높이도 지정가능합니다.
inline-block 변경 방법의 예는 css를 이용해서 설정해주면됩니다.
p {
display: inline-block;
}주의할점은 block이 inline를 포괄하는 더 큰 개념이라고 합니다. 그래서 inline안에 block을 넣으면 안됩니다.
