CSS 왕초보 탈출하기 03 - inline속성

CSS 왕초보 탈출하기 03 - inline속성

인라인 속성이란 무엇일까?

---

 

한 라인에서 차곡차곡 쌓이는 성질이라고 할 수 있다.

 

우리가 워드나 한글 문서, 메모장 등을 작성할 때, 줄의 너비 안에서 타이핑 하는만큼 문자가 길어지게되는데 그렇게 생각하면 편하다.

입력하면 점점 늘어나는 글자들

또한, 문장의 길이가 길어져, 줄의 너비를 넘어서게되면 아래줄로 자연스럽게 줄바꿈(개행)이 되는데, 인라인도 그와 같다. 

 

---

먼저 block속성을 이야기한 이유는?

 

inline속성의 개념은 이미 우리가 아래아한글, 워드, 메모장 등에서 너무나도 일상적으로 접하고 있었던 개념이기 때문이다.

 

하지만 다시 한번 확인해보는 의미로 아래 내용을 보자.

 

 

 

지난번 블록속성시간을 다시 생각해보자.

1px인 블록속성이라고 하더라도, 한줄을 모두 차지한다고 했었다.

 

display속성이 block인 div로 아래와 같은 코드를 작성하고 확인한다면?

 

<div>
	<div class="div1">가가</div>
    <div class="div2">나나</div>
    <div class="div3">다다</div>
</div>

 

위와 같이 쓰면 어떻게 보일까. 아래 결과물을 확인해보자.

 

 

 

아래와 같이 보일것이다. 가가 나나 다다

각각 두글자만이 들어가서 우측 여백이 엄청많이 남는데도 줄바꿈 되어 표현되고있다.

 

 

---

그렇다면 inline요소는?

 

inline요소인 span을 사용해서 아래와 같은 코드를 작성했다.

<div>
  <span class="span1">가가</span>
  <span class="span2">나나</span>
  <span class="span3">다다</span>
</div>

 

아래와 같이 보일 것이다.   가가나나다다

---

그렇다면

inline요소가 길어져서 한줄을 넘어가면??

<div>
  <span class="span1">가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가</span>
  <span class="span2">나나</span>
  <span class="span3">다다</span>
</div>

이렇게 코드를 작성하면??

가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가가나나다다

이렇게 보일 것이다. span1의 가의 길이가 길어져 개행이 되었고, 그 옆에 span2, span3의 문자(컨텐츠)가 위치해있다.

 

 

 

 

---

다음시간에는

position에 대해서 배워보자