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. 푸른하늘
    10일차 공부 감사합니다
  2. 이경일
    display 속성을 이용해서
    한줄 전체를 이용하는 block
    자신의 공간만을 이용하는 inline
    설정을 취할 수 있다.
  3. 이 강의 무료 ? 실화?
    화면 일부를 차지하는 태그 = inline
    화면 전체를 사용하는 태그 = block

    끝!
  4. violet
    block level : 자기 혼자서 화면 전체를 차지하는 태그
    inline level : 화면의 일부를 차지하는 태그
    -> display 속성을 이용하면 블록 레벨 엘리먼트를 인라인 엘리먼트로, 인라인 레벨 엘리먼트를 블록 레벨 엘리먼트로 바꿀 수 있다!
  5. 오빠는다르다
    감사합니다~~~!!!
  6. Hoon Young Park
    지금까지 반대로 알고 있었네요...
    인라인라 라인을 다쓴다.... 블럭이라 자신의 영역만큼만 사용한다 라고 이해를 했었는데
    반대였다니 ㅜㅜ
    반대로 알고 있어서 다행이지 .... 전혀 다른걸로 알고 있었으면 큰 혼란을 줄 뻔했네요..
    감사합니다.
  7. <!--인라인VS블럭레벨-->
    <!--html 엘리먼트들은 크게 두가지로 구분됩니다.

    화면 전체를 사용하는 태그 => block element
    화면의 일부를 차지하는 태그 => inline level element-->
    <!--인라인 엘리먼트 : 자기 자신만을 둘러싸는 태그-->
    <!--블럭레벨 엘리먼트 : 화면 전체를 쓰는 태그-->
    <!--인라인이건 블럭이건 바꿀수 있는 방법이 있다.(display: inline, display: block)-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    h1, a{border: 1px solid red;}
    h1{display: inline;}
    a{display: block;}
    </style>
    </head>
    <body>
    <h1>Hello World</h1>
    안녕하세요. <a href="http://a.a">MunBe</a>입니다.
    </body>
    </html>
  8. illliilllliillliii
    감사합니다 !
  9. 단단비
    a 태그처럼 자신과 자신을 둘러싸고 있는 하나의 같은 정보에 위치하고 있는
    태그를 인라인 엘리먼트 //

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

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

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

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

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

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