블록 요소와 인라인 요소의 차이와 태그 설명 ✔️

2021. 5. 12. 14:54·개발/HTML

HTML 태그에는 블록 요소와 인라인 요소가 존재합니다. 블록 레벨 요소는 새로운 줄에서 시작하며, 차지할 수 있는 모든 가로 길이(width)를 차지합니다. 반면, 인라인 요소는 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 만큼의 길이를 차지합니다.

블록 요소를 사용하는 태그들

블록 레벨 요소는 새로운 줄에서 시작하며, 화면의 왼쪽에서 오른쪽 끝까지의 길이를 차지합니다. 다음은 블록 요소를 사용하는 일반적인 태그들입니다.

Headings

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Paragraphs

  • <p> ... </p>
  • 인라인 요소만 내부에 포함할 수 있음

Divs

  • <div>...</div>
  • 보통 하나의 문단보다 긴 영역을 포괄

인라인 요소를 사용하는 태그들

인라인 요소들은 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 길이만큼의 공간을 차지합니다. 다음은 인라인 요소를 사용하는 일반적인 태그들입니다.

Images

  • <img src="xxx.jpg" alt="image description">
  • img 태그에는 alt, title, class와 같은 속성들을 추가할 수 있음

Span

  • <span>...</span>

Button

  • button>...</button>

'개발 > HTML' 카테고리의 다른 글

<div>와 <span> 태그 차이 설명  (0) 2021.05.12
HTML 기본 용어 요소, 태그, 속성 설명  (0) 2021.05.07
HTML 역사, HTML 5가 되기까지 무슨 일이 있었던 걸까요?  (0) 2021.05.07
'개발/HTML' 카테고리의 다른 글
  • DOM이란 무엇일까요?
  • <div>와 <span> 태그 차이 설명
  • HTML 기본 용어 요소, 태그, 속성 설명
  • HTML 역사, HTML 5가 되기까지 무슨 일이 있었던 걸까요?
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
Klook.com
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 기록 N
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터 N
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
블록 요소와 인라인 요소의 차이와 태그 설명 ✔️
상단으로

티스토리툴바