달마루
기획자에서 개발자로
달마루
전체 방문자
오늘
어제
  • 분류 전체보기 (334)
    • 기획 이야기 (3)
    • 개발자로 전향한 이유 (1)
    • Github Address (1)
    • 개발자, 그 여정 (11)
      • 기초특강 (4)
      • 국비학원 선정 (4)
      • BitCamp_수업내용 (1)
      • 학원 프로젝트 후기 (1)
      • 정보처리기사 (1)
      • 개발 이야기 (0)
    • 개념 창고 (126)
      • JAVA (50)
      • CS (1)
      • Database (27)
      • NetWork (2)
      • 자료 구조 (2)
      • React (8)
      • Spring (3)
      • JPA (1)
      • HTML & CSS (18)
      • JS (3)
    • algorithm (186)
      • 백준 (161)
      • 프로그래머스 (23)
    • 사는 이야기 (0)

블로그 메뉴

  • Github
  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 알고리즘풀이
  • 혼공SQL
  • 프로그래머스
  • select
  • HTML
  • 혼공MySQL
  • 백준알고리즘
  • java algorithm
  • 혼자공부하는SQL
  • java
  • Scanner
  • MySQL
  • Bronze III
  • Bronze V
  • Bronze IV
  • BOJ algorithm
  • 문제풀이
  • SQL
  • SQL고득점Kit
  • programmers
  • 알고리즘
  • 백준문제풀이
  • sql 문제풀이
  • 자바
  • 백준
  • BRONZE
  • react
  • BOJ
  • math
  • Algorithm

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
달마루

기획자에서 개발자로

개념 창고/HTML & CSS

HTML 글자와 상자

2022. 5. 18. 14:21

내용(컨텐츠, 요소)이 화면에 출력되는 특성 2가지

 

1. 인라인(inline) 요소 : 글자를 만들기 위한 요소들

2. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들

 

1번의 인라인(inlone)의 대표적인 태그는

<span></span>이 있음.

본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임.

인라인 요소는 보통 수평으로 쌓인다. 줄어들려는 성질을 가짐.

 

<span>hi<span>

<span>bob<span>

 

출력 화면은

hi bob

으로 띄어쓰기가 된 상태로 나옴. 

단을 내리는 것 자체가 띄어쓰기로 확인되기 때문이며,

단을 안내리면 띄어쓰기가 안된다.  

 

<span><div></div></span> - 불가

<span><span></span></span> - 가능

이유는 span은 인라인(글자) 요소인데, div는 상자(블록) 요소이기 때문이다. 

 

2번 블록(Block)의 대표적인 태그는

<div></div> 이 있음.

본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임.

블록 요소는 보통 수직으로 쌓인다. 가로 너비는 늘어나려하나, 세로 너비는 줄어들려함.

가로와 세로, 마진과 패딩 여백 좌우, 위아래 등 사용 가능

 

<div><div></div></div> - 가능

<div><span></span></div> - 가능

이유는 div는 상자(블록) 요소로서 제약 사항이 적다.

'개념 창고 > HTML & CSS' 카테고리의 다른 글

HTML 자주 사용하는 태그2  (0) 2022.05.18
HTML 자주 사용하는 태그 요소  (0) 2022.05.18
HTML 빈태그  (0) 2022.05.18
HTML 부모와 자식 요소  (0) 2022.05.18
HTML 기본 문법  (0) 2022.05.18
    '개념 창고/HTML & CSS' 카테고리의 다른 글
    • HTML 자주 사용하는 태그2
    • HTML 자주 사용하는 태그 요소
    • HTML 빈태그
    • HTML 부모와 자식 요소
    달마루
    달마루
    항상 어제보다 좋은 코드를 지향합니다. https://github.com/LimDongHyun99

    티스토리툴바