HTML & CSS 3(block, inline)

Kyungoh Kang·2020년 11월 22일
0

wecode15

목록 보기
3/20

CSS Block, Inline

## block요소 = 한 줄 전체를 혼자 차지하는 요소
## inline요소 = 자기 사이즈만큼만? 자리를 차지해서 바로 옆에 다른 inline요소가 올 수 있다. 나는 처음에 많이 헷갈리던 건데 block요소와 inline요소들에 뭐가 있는지 잘 몰라서 구분하기 힘들었다.

  1. block요소의 예 = header, footer, p, li, table, div, h1 등의 태그들
  2. inline요소의 예 = span, a, img 등의 태그들

위 예시들은 태그를 그냥 생으로 쓸 때 block 혹은 inline 요소가 되는 거고 CSS를 이용하면 태그 성질 신경 안쓰고 쓸 수 있다.

예를 들면..

  • p{ display: inline-block; }
  • p{ float: left }
이런 식으로 display나 float을 사용해서 원래 block요소인 태그들을 inline요소로 디자인할수도 있고
  • display: block
  • display: none
이런 식으로 inline요소들을 block요소로 바꾸거나 화면에서 안보이게 만들 수도 있다. 화면에서 안보이게 하는건 왜 있나 싶었는데 어떤 이미지나 텍스트를 안보이게 해놨다가 사용자가 어떤 행동을 할 때 보이게 하는 데 쓰인다고 한다. 검색창 클릭했을 떄 검색 기록 뜨게 하는 게 하나의 예시라고 한다.

0개의 댓글