CSS

[CSS] 인라인 요소/ 블록 요소

J-Plum 2023. 3. 2. 19:02

인라인 요소 (글자 요소)

1. 요소가 수평으로 샇임

<span>Hello</span>
<span>World</span>

줄바꿈이 띄어쓰기로 들어가있다.

<span>Hello</span><span>World</span>

인라인 요소는 하나의 글자처럼 취급하기 때문에 줄바꿈을 띄어쓰기로 인식한다

2. 인라인 요소는 자신이 포함한 콘텐츠 크기만큼 자동으로 줄어든다!

3. 인라인 요소는 width, height를 가질 수 없다.

4. margin, padding 등 여백의 경우 상하는 불가능, 좌우는 가능하다.

5. 인라인 요소 안에는 블록 요소를 사용할 수 없다.

블록 요소 (상자 요소)

<div>Hello</div>
<div>World</div>

1. 요소가 수직으로 쌓인다.

2. 부모 요소의 크기만큼 width가 자동으로 늘어난다.

3. 상하좌우 여백이 적용된다.

4. 블록 요소는 자식으로 인라인, 블록 요소를 사용할 수 있다

    예외 : 블록요소중 <p> 태그는 자식으로 inline 태그만 가질 수 있다.

요소별 종류

인라인 요소

1. 택스트의 경우 div 대신 사용한다

  • display: inline 처리가 되어있다
  • 기본적으로 contents를 감싸는 사이즈로 지정이 되어있다.
  • 원하는 사이즈로 바꾸고 싶다면 display : inline-block을 사용

2. : 이미지를 삽입하는 요소. (Image)

3. : 페이지를 이동하는 하이퍼링크를 지정하는 요소. (Anchor)

  • 방문 전/후 색상의 차이가 있다. (css로 수정 가능)
  • target 속성으로 _blank를 사용시 새탭이 열린다.
  1. <br> : 줄바꿈
  2. : <label> 라벨 가능 요소(input)의 제

블록 요소

1. <div>: 구역을 나눈다 (가로줄 전체를 차지한다.) 단점 : 구분이 안됨..

  • 기본적으로 css에 display: block; 처리되어있다
  • 컨텐츠가 없을경우 css를 입히기 위해서는 width와 height를 주어야한다.

아래의 것들로 대체하기 시작

<header>,<nav>,<main>,<footer>,<article>,<aside>,<figure>

  • <header> 가장 눈에 잘 띄고 크고 위에있는 부분
  • <nav> 네비게이션 메뉴
  • <main> 메인 컨텐츠 부분
  • <footer> 회사소개 사이트맵... 등등 부가정보

2. <h1~6> : 제목을 의미하는 요소 (Heading)

  • 숫자가 작을수록 더 중요한 제목을 정의.

3. <p> 문장을 의미하는 요소. (Paragraph)

  • div를 사용해도 상관없다

4. <ul> :  순서가 필요없는 목록의 집합을 의미한다 (Unordered List) 순서가 필요한 경우 <ol> 을 사용

  • <li> 는 목록 내 각 항목을 의미한다 (List Item)
  • 태그는 반드시
    의 자식으로 사용해야한다.

예외

1. <input> : 사용자가 데이터를 입력하는 요소, 인라인 요소 이면서, 블록 요소이다 (Inline-block)

  • tpye 옵션으로 입력받을 데이터의 타입을 지정한다.
  • placeholder 속성으로 사용자가 입력할 값에 대한 힌트를 제공할 수 있다.
  • 수평으로 쌓인다.
  • 블록 요소처럼 width, height 지정이 가능하다.

 

자주 쓰이는 블록 태그와 인라인 태그

대표적인 블록태그

<div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <section>, <table>, <ol>, <ul>, <p>

그외의 block 태그

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>,  <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <hgroup>, <hr>, <noscript>, <pre>,<output>,, <video>

대표적인 인라인 태그

<a>, <button>, <img>, <input>, <label>, <script>, <select>, <span>, <textarea>

그 외의 inline 태그

<abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <cite>, <code>, <dfn>, <em>, <i>, <kbd>, <map>, <object>, <q>, <samp>, <small>, <strong>, <sub>, <sup>, <tt>, <var>