inlineAndblock
: inline 속성은 줄을 바꾸지 않고 다른 요소와 한 행에 위치.
desc
대표적인 태그
inline은 문장안에서 사용하는 태그에 주로 기본값으로 사용된다.
문장이나 단어를 굴게 표시하는 도 inline 속성을 가진다.
인라인 요소를 일일히 나열하는 것보다 다음 특징으로 파악하는게 좋다.
margin-top, margin-bottom이 적용되지 않는다. 인라인 요소의 상,하 여백은 line-height에 의해 발생 (margin-left, right는 적용됨)
width와 height 적용 안됨. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.
인라인 속성을 가진 태그끼리 연속으로 사용되는 경우, 최소한의 간격을 유지하기 위해 좌우 5px의 외부여백 자동 발생
이와 같은 특징은, 인라인 요소를 가진 태그들이 서로 나였되어있을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로 분별할 수 있도록 웹브라우저가 설정
Block 속성
한 줄에 나열되지 않고 그 자체로 한줄을 차지 대표적으로 태그
블록은 기본적으로 width : 100% 속성을 가진다. 그래서 자동 줄넘김됨
인라인과 다르게 margin, width, height 정의 가능 이러한 속성 제어가 가능하기 때문에 레이아웃에 주로 사용
특정 태그가 블록인지 아닌지 가장 쉽게 파악하는 방법은 배경색 입혀보기
배경색이 화면 폭을 모두 차지하는 경우, 그 태그는 블록 요소 태그임을 알 수 있다.
inline-block
inline과 block의 중간 단계
인라인의 속성 : 서로 다른 인라인과 한 줄에 표현 블락 속성 : margin, width, height 속성 정의 가능
inline-block을 기본적으로 가지는 태그 없다.
상하단 여백 정의가능. line-height도로도 상하백 여백 제어 가능
너비 높이 제어 가능. 기본적으로는 태그가 품고있는 내부 요소 부피에 맞춰짐
-
inline과 block 속성 표기시 주의할점
block은 inline을 포괄하는 개념. 따라서 inline 속성 안에 block 넣으면 문법 오류
Last updated
Was this helpful?