[Frontend] CSS - Inline vs. Block

Alex of the year 2020 & 2021·2020년 6월 23일
0

HTML, CSS

목록 보기
5/5
post-thumbnail

inline과 block?

inline
말 그대로 in + line으로 이해하자
현재 작성중인 line에 in으로 요소를 더 넣을 수 있는 경우
ex. <span>, <a>, <img>

block
역시 말 그대로 block으로 이해하자
현재 작성중인 line에 더 받아주지 않고, 더 들어오고자 하면 block 하겠다 이렇게
ex. <header>, <footer>, <p>, <li>, <table>, <div>, <h1>


Inline요소가 공간을 차지하는 방식은 아래와 같다. (노란 음영이 실제 차지 공간)


반대로 block 요소가 공간을 차지하는 방식은 아래와 같다.

block --> inline 가능?

답: 가능!

.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처럼 사용이 가능!

profile
Backend 개발 학습 아카이빙 블로그입니다. (현재는 작성하지 않습니다.)

1개의 댓글

comment-user-thumbnail
2020년 6월 23일

지나가던 코딩 나그네입니다 유용한 정보 감사해요^^

답글 달기