inline
말 그대로 in + line으로 이해하자
현재 작성중인 line에 in으로 요소를 더 넣을 수 있는 경우
ex.<span>
,<a>
,<img>
block
역시 말 그대로 block으로 이해하자
현재 작성중인 line에 더 받아주지 않고, 더 들어오고자 하면 block 하겠다 이렇게
ex.<header>
,<footer>
,<p>
,<li>
,<table>
,<div>
,<h1>
Inline요소가 공간을 차지하는 방식은 아래와 같다. (노란 음영이 실제 차지 공간)
반대로 block 요소가 공간을 차지하는 방식은 아래와 같다.
답: 가능!
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
위의 css 코드에서 맨 위 .inline-p는
원래는 block 성격을 가지는 p태그를 inline화 해주기 위해 임의로 설정한 클래스 이름
display: inline-block; 으로
원래는 block 인 것도 inline처럼 사용이 가능!
.block-span {
display: block;
}
여기서 .block-span은
원래는 inline 성격을 가지는 span태그를 block화 해주기 위해 임의로 설정한 클래스 이름
display: block; 으로
원래는 inline인 것도 block처럼 사용이 가능!
지나가던 코딩 나그네입니다 유용한 정보 감사해요^^