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. 박상민
    감사합니다!
  2. 감성팔이
    ㅎㅎㅎ좋은 강의들 만들어주시느라 고생 많으십니다
    항상 감사하고 응원해요!
    대화보기
    • egoing
      아이고 제가 졸음 강의를 했나봐요 ㅠㅠ
      대화보기
      • 감성팔이
        egoing 님 feedback 드립니다.

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

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

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