생활코딩

Coding Everybody

코스 전체목록

닫기

인라인 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. 황금아가리
    211003
  2. neal
    2021.09.22 완료
  3. 두드
    2021.07.22 완료
  4. 감자먹는넘
    인라인 VS 블럭레밸
  5. jeisyoon
    2021.06.22 inline VS Block - OK
  6. 완료
  7. 블럭을 인라인으로 착각할때가 많은데 (로고 블록처럼..)
    그 반대군요 ~
  8. 강정진
    오늘 저녁은 블랙라벨이다
  9. inline elements: 콘텐츠만큼 크기를 맞춰줌, block elements: 블록의 크기대로 사용
  10. 임태경
    완료했어요 감사해요
  11. 스마일가이
    2021.01.26 완료 감사합니다
  12. datsciseol
    20210116
  13. 따뜻한츄르
    2020 1230
  14. 201214
  15. 만듀
    20201108
  16. 켄드릭
    2020년 11월 03일 15:45 1차 수강완료
  17. jaehyunlee
    완료
  18. 박병진
    2020.10.04 완료
  19. 콜라
    20200927 완료
  20. 김성곤
    20200718 감사합니다!
  21. jaehyunlee
    완료
  22. 한강
    inline 같은줄
    block 화면전체
    200603
  23. 무지개반사
    완료
  24. opper
    2020. 1. 6 수업완료
  25. Blanc
    2020.01.05
  26. jinxiong
    clear~
  27. 늦둥이
    완료
  28. Grigo
    완료
  29. alpha
    191002 수강완료
  30. 태태
    수강완료
  31. tots2626@hotmail.com
    재밌어요!!:)
  32. 치디우기
    수업완료
  33. FIRE
    20190729 완료
  34. 다나가
    190723 - 수업완료!!
  35. 김주엽
    수업완료
  36. 유희애
    완료!
  37. 노혜주
    완료
  38. lygon
    2019-03-02 완료
  39. 김진욱
    완료
  40. 숨이
    완료했습니당
  41. 욘짱
    완료
  42. 김민영
    완료
  43. SlowStarter
    감사합니다!
  44. 스페이스몽키
    감사합니다~!!
  45. 윤승호
    inline blockline 설명 잘들었습니다.
  46. 푸른하늘
    10일차 공부 감사합니다
  47. 이경일
    display 속성을 이용해서
    한줄 전체를 이용하는 block
    자신의 공간만을 이용하는 inline
    설정을 취할 수 있다.
  48. 이 강의 무료 ? 실화?
    화면 일부를 차지하는 태그 = inline
    화면 전체를 사용하는 태그 = block

    끝!
  49. violet
    block level : 자기 혼자서 화면 전체를 차지하는 태그
    inline level : 화면의 일부를 차지하는 태그
    -> display 속성을 이용하면 블록 레벨 엘리먼트를 인라인 엘리먼트로, 인라인 레벨 엘리먼트를 블록 레벨 엘리먼트로 바꿀 수 있다!
  50. 오빠는다르다
    감사합니다~~~!!!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기