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. 단단비
    a 태그처럼 자신과 자신을 둘러싸고 있는 하나의 같은 정보에 위치하고 있는
    태그를 인라인 엘리먼트 //

    혼자 하나서 다 쓰고있는 것을 블럭라인 엘리멘트라고 한다.

    블럭레벨을 인라인으로 바꿀 수 있다. ( 그 반대도 가능)
    {display: inline;}
    {display: block;}
    속성 얼마든지 바꿀수 있어요
  2. 사이구
    제일 레이아웃이 헷갈려요ㅠㅠ
  3. 쿠쿠다스
    감사합뉘당
  4. 14번째
    5.19.
  5. php가 첫취업?
    재강의 예약해야겠네요...쓰는법은 알겠는데;;;

    막상 실전가면 어떨지 고민이 됩니다.
  6. 새로움
    강의 멋있습니다.
  7. 시금치
    정말 명쾌하고 깔끔한 강의입니다
    책을 여러권 보고도 이해를 못해서 수년간 헤매고 있었는데
    바로 정리가 되는군요!
  8. 코딩을해보자
    어렵우면서 재밌습니다
  9. matheios
    강의 감사합니다
  10. 텐지로
    inline-block에 대한 설명도 추가해주세요 :)
  11. 곧 프로그래머
    잘 보고 있습니다
  12. matheios
    감사합니다. 공부 중에 인라인과 블럭 요소의 차이가 궁금했는데 일정부분 이해가 된 것 같습니다~
  13. done!!!!
  14. 백합이군요
    좋은 강의 감사합니다 ^^
  15. 임지호
    태그들 중 화면 전체를 차지하는(한 줄을 차지하는)태그는 블럭레벨 엘리먼트
    화면 일부를 차지하는(딱 자기 크기만큼 차지하는)태그는 인라인 엘리먼트라고 한다.
    각 태그마다 지정되있는 속성이 있는데 이것은 <style>태그에서 display속성을 바꿔주면 변경할 수 있다.
  16. GunLoc
    잘보았어요! 감사드려요
  17. 박상민
    감사합니다!
  18. 감성팔이
    ㅎㅎㅎ좋은 강의들 만들어주시느라 고생 많으십니다
    항상 감사하고 응원해요!
    대화보기
    • egoing
      아이고 제가 졸음 강의를 했나봐요 ㅠㅠ
      대화보기
      • 감성팔이
        egoing 님 feedback 드립니다.

        설명문에는 아래와 같이 되어 있는데요
        *화면 전체를 사용하는 태그 => inline element
        *화면의 일부를 차지하는 태그 => block level element

        설명과 태그명이 바뀐 것 같습니다.
        그리고 동영상 처음에 설명하실 때도 둘이 바뀌어 있습니다.

        이후 강의에서는
        화면 일부를 차지하는 태그 = inline
        화면 전체를 사용하는 태그 = block 으로 맞게 설명하시고
        display로도 그렇게 적용하고 있습니다.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기