(HTML) inline요소 (2019/9/9)

-종류

a, span, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, input, kbd, label, map, object, q, samp, small, script, select, strong, sub, sup, textarea

 

 

-특징

1. 영역이 가로로 정렬된다.

<div id="warp">
  <span>inlin_left:</span>
  <span>inlin_center:</span>
  <span>inlin_right:</span>
</div>

inline구조 가로정렬 화면

텍스트가 block구조와 다르게 화면에서 가로로 나열된다. 줄 바꿈이 없다.

다만, 부모 요소인 warp의 영역에 비해 자식 요소인 span의 영역이 크면 줄 바꿈이 일어나서 warp영역 보다 넘는 span태그는 아래로 내려간다.

 

 

2. width, height값을 줄 수 없다.

#warp span{
  background: crimson;
  color: #fff;
  width: 200px;
  height: 200px;
}

inline구조 크기 값 화면

background, color 값은 적용되지만 width, height값은 적용되지 않는다.

다만, padding, margin값은 적용된다.

(inline구조에서 widht, height값 적용되는 태그 input , textarea , select , img)

또한, inline구조의 영역은 텍스트 크기만큼 영역이 잡히기 때문에 span태그 안에 있는 텍스트의 폰트 크기가 커지면 span영역도 커진다.

 

 

3. inline요소는 글자로 취급되어 오른쪽, 왼쪽, 중앙 정렬이 가능하다.

#warp{
  background: lightgray;
  padding: 20px;
  width: 500px;
  margin: 100px auto;
  text-align: left; /*span영역을 왼쪽으로 잡았다*/
}

#warp span{
  background: crimson;
  color: #fff;
  width: 200px;
  height: 200px;
}

inline구조 왼쪽 정렬 화면

span의 부모인 warp(회색 영역)에게 text-align: left값을 주어 span영역을 왼쪽으로 정렬이 가능하다.

다만, 모든 영역은 text-align: left값이 기본값이라서 굳이 text-align를 주지 않아도 자동적으로 왼쪽으로 정렬된다.

 

#warp{
  background: lightgray;
  padding: 20px;
  width: 500px;
  margin: 100px auto;
  text-align: center; /*span영역을 중앙으로 잡았다*/
}

#warp span{
  background: crimson;
  color: #fff;
  width: 200px;
  height: 200px;
}

inline구조 중앙 정렬 화면

span의 부모인 warp(회색 영역)에게 text-align: center값을 주어 span영역을 중앙으로 정렬이 가능하다.

 

이렇게 text-align을 사용하여 부모 영역 안에서 레이아웃을 잡을 때 사용할 수 있다.