[HTML] HTML(block, inline)

2022. 9. 17. 01:12·Language/HTML
728x90

HTML 요소의 타입

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다.

대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 된다.

  • 블록(block)
  • 인라인(inline)

블록(block) 타입의 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소이다.

<div>요소

<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다.

<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.

인라인(inline) 타입의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.

<span>요소

<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소이다.

<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.

'Language > HTML' 카테고리의 다른 글

[HTML] iframe의 단점  (0) 2022.09.17
[HTML] iframe 요소  (1) 2022.09.17
[HTML] HTML 테이블(Table)  (0) 2022.09.16
[HTML] HTML 리스트(List)  (0) 2022.09.16
[HTML] HTML 링크(Link), 이미지(Image)  (2) 2022.09.16
'Language/HTML' 카테고리의 다른 글
  • [HTML] iframe의 단점
  • [HTML] iframe 요소
  • [HTML] HTML 테이블(Table)
  • [HTML] HTML 리스트(List)
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    객체
    리액트
    JavaScript
    react
    array
    HTML
    Java
    event
    자바스크립트
    object
    next.js
    web
    제어문
    파이썬
    MySQL
    변수
    Python
    타입스크립트
    CSS
    TypeScript
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[HTML] HTML(block, inline)
상단으로

티스토리툴바