CSS

인라인 VS 블럭레밸

html 엘리먼트들은 크게 두가지로 구분됩니다. 

  • 화면 전체를 사용하는 태그 => block element
  • 화면의 일부를 차지하는 태그 => inline level element

이번 시간에는 인라인 엘리먼트와 블럭레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서 display라는 중요한 속성에 대해서도 배우게 됩니다.

 예제 - inlline-block.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        h1,a{border:1px solid red;}
        h1{display: inline;}
        a{display:block;}
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    안녕하세요. <a href="https://opentutorials.org">생활코딩</a>입니다.
  </body>
</html>

댓글

댓글 본문
  1. AgainstartJH
    2022년 11월 14일 월요일 학습완료!
  2. 주재윤
    완료
  3. 헤밍웨이
    <block tag>
    220823
    감사합니다!

    <inline tag>
    220823 감사합니다!
  4. vigorously27
    2022년 7월 21일 목요일 학습완료!
  5. Joshep Woo
    감사합니다.
  6. 22/03/16
  7. 임앤강
    2022-01-27 감사합니다.
  8. 드림보이
    2021.11.12. 인라인 VS 블럭레벨 파트 수강완료
  9. 황금아가리
    211003
  10. neal
    2021.09.22 완료
  11. 두드
    2021.07.22 완료
  12. 감자먹는넘
    인라인 VS 블럭레밸
  13. jeisyoon
    2021.06.22 inline VS Block - OK
  14. choi
    완료
  15. yogg
    블럭을 인라인으로 착각할때가 많은데 (로고 블록처럼..)
    그 반대군요 ~
  16. 강정진
    오늘 저녁은 블랙라벨이다
  17. inline elements: 콘텐츠만큼 크기를 맞춰줌, block elements: 블록의 크기대로 사용
  18. 임태경
    완료했어요 감사해요
  19. 스마일가이
    2021.01.26 완료 감사합니다
  20. datsciseol
    20210116
  21. 따뜻한츄르
    2020 1230
  22. 201214
  23. 만듀
    20201108
  24. 켄드릭
    2020년 11월 03일 15:45 1차 수강완료
  25. jaehyunlee
    완료
  26. 박병진
    2020.10.04 완료
  27. 콜라
    20200927 완료
  28. 김성곤
    20200718 감사합니다!
  29. jaehyunlee
    완료
  30. 한강
    inline 같은줄
    block 화면전체
    200603
  31. 무지개반사
    완료
  32. opper
    2020. 1. 6 수업완료
  33. Blanc
    2020.01.05
  34. jinxiong
    clear~
  35. 늦둥이
    완료
  36. Grigo
    완료
  37. alpha
    191002 수강완료
  38. 태태
    수강완료
  39. tots2626@hotmail.com
    재밌어요!!:)
  40. 치디우기
    수업완료
  41. FIRE
    20190729 완료
  42. 다나가
    190723 - 수업완료!!
  43. 김주엽
    수업완료
  44. 유희애
    완료!
  45. 노혜주
    완료
  46. lygon
    2019-03-02 완료
  47. 김진욱
    완료
  48. 숨이
    완료했습니당
  49. 욘짱
    완료
  50. 김민영
    완료
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기