04.HTML-블록요소 VS 인라인요소

17771 단어 CSShtml멋사TILCSS

블록요소 VS 인라인요소

Block Level(블록요소)

Block Level 요소란?

: 하나의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소

  • 일반적으로 볼록 요소를 사용하면 라인이 바뀐다.
  • 블록요소는 블록요소와 인라인 요소 모두를 포함할 수 있다.
  • <article> , <header>, <nav>, <section>, <div> 등

Inline Level 요소란?

: 컨텐츠 자신의 크기만큼 영역을 차지하는 요소.

  • 인라인 요소들은 인라인 요소만 중첩이 가능
  • <text-align> 의 영향을 받음
  • <span>,<strong> 등

실습

직접 코드를 작성해보면서 확인해보자 !!!

<body>
    <p>hello world</p>
    <p>hello world</p>
    <span>hello world</span>
    <span>hello world</span>
</body>

이랬을때 스타일을 줘 보았다,. 

<style>
  p{
    /* display: block; */
    width: 300px;
    background-color: red;
  }
  span{
    /* display: inline; */
    width: 300px;
    background-color: blue;
  }
</style>

블록요소는 높이와 넓이 값 조절이 잘 된다
But 인라인 요소는 높이와 넓이 값 조절이 안된다.

<인라인요소의 문제점>

  • 높이와 넓이 값 조절이 안됨
  • 그래서 <display: block > , <display: inline-block > 을 주면서 스타일링 해야한다.

Inline-block

  • span을<display: block > 으로 해 줄 수 있지만
    옆으로 붙는 속성을 유지한채 block 요소로 만들고싶다면 inline-block 을 사용하는 것 
<style>
  p{
    display: block;
    width: 300px;
    height: 300px;
    background-color: red;
  }
  span{
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: blue;
  }
</style>
<body>
    <p>hello world</p>
    <span>hello world</span>
    <span>hello world</span>
</body>

Inline 요소의 문제점을 더 살펴보자 !

(문제1)

저 span 박스들 사이의 중간의 여백을 없애주고 싶다면?
우선 저 공백은 엔터키 때문이다
html 에서 

<body>
  <p>p</p>
  <span>span</span>
  <span>span</span>
</body>

이렇게 적어줬기 때문에 엔터의 여백이 생김 

<body>
    <p>hello world</p>
    <span>hello world</span><span>hello world</span>
</body>

이렇게 <span> 을 엔터없이 붙여써도 되지만.. 아니 안됨 사실
이렇게 작성하는건 좋지 않은 방법이니깐 해결해주는 방법 몇가지를 살펴보자.

  • 이미지처럼 span 박스 둘을 딱 붙게 만들어 주기 위해서는

    1. font-size: 0; ( 일부 브라우저에서 안먹는 경우있음)
    2. enter 를 삭제 (like 위 코드 => 좋지못한방법)
    3. -margin . 폰트 종류가 달라지면 딱 맞아 떨어지지 않음 (아래 여백문제)
    4. float

이 4가지 중 첫번재 방법을 코드로 살펴보면
(font-size 로 조절하는 방법)

div 로 묶어주고 .one 이라는 클래스명을 붙여준다. 

<div class="one">
      <span>hello world</span>
      <span>hello world</span>
</div>
span{
    font-size: 1rem;
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  .one {
    font-size: 0;
  }

(문제 2)

  • 여백이 달라지는 문제점이 발생 (os 마다 다름)
    폰트의 사이즈에 의해 여백이 달라지는 문제이다.

    저 여백을 없애고 싶은걸?

  • 해결위해 div 로 감싸고 line-height 값을 주면 여백 제거가 가능하다구 ~!

근데 이건 좋은 방법이 아니긴 합니다.. 

<body>
  <p>p</p>
 <div class="one">
  <span>span</span>
  <span>span</span>
 </div>


 <div class="three">
  <span class="two">H</span>ello
  <span class="two">H</span>ello
 </div>

</body>
.one {
	font-size: 0;
}
.two {
    display: inline;
    font-family: 'Rubik Wet Paint', cursive;
}
.three {
    line-height: 16px;
}

(출처: 제로코딩베이스캠프)

ES6 in iOS 12
모던 자바스크립트 Deep Dive 19장-프로토타입

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage