flexytale project.css로 정렬을 하기 위한 기본 상식 ; display ; inline과 block

 

참고자료:

CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript   드림코딩엘리

https://www.youtube.com/watch?v=jWh3IbgMUPI 

 

 

 

웹사이트를 만들 때 가장 중요한 것은 우리가 만든 박스들을 원하는 원하는 사이즈로 만들어 위치에 배치하는 것입니다. 즉 레이아웃을 잘 다룰 수 있어야 합니다. 그러기 위해서는 display와 position에 대해 잘 알아야합니다. 오늘은 우선 display에 들어갈 inline과 block에 대해 알아보겠습니다.

 

---

 

DISPLAY

display는 요소가 block, inline, inline-block 등의 요소로 처리되는지 여부를 설정하고,

더해서 block, inline, inline-block의 자식요소인 flow layout, grid, flex등에 사용되는 레이아웃을 설정하는 css속성입니다. display가 block, inline, inline-block와 그 하위 요소들을 결정하는 속성이기 때문에 이 속성을 잘 사용하기 위해서는 "인라인과 블럭"의 개념을 알아야 한다. 이제부터 그에 대해 블록과 인라인의 차이점을 중심으로 설명하겠습니다.

 

 

인라인과 블록

 

--inline 속성의 특징--

Inline 속성이란, 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향입니다. (그래서 Inline 속성은, 문장안에서 사용하는 태그에 주로 기본값으로 설정되어 있습니다. ex. strong)

인라인 요소를 가진 태그들이 서로 나열되었을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 때문에 인라인 요소는 몇가지 특징을 가지게 되었습니다.

 

인라인 요소는 크게 세가지 특징을 가지고 있습니다.

 

1. margin-top, margin-bottom 속성이 적용되지 않음

 

2. width와 height이 적용되지 않음

 

3. 인라인 요소끼리 연속으로 사용되는 경우, 좌우에 margin이 자동으로 발생함

 

 

 

 

첫번째, margin-top, margin-bottom 속성이 적용되지 않는 이유는 인라인 요소의 상하 여백은 margin이 아닌 line-height에 의해 발생하기 때문입니다. 이러한 특징은 문장안에서 사용하는 태그에서 골머리를 앓게 하고는 합니다. 아래의 링크를 통해 자세한 사항을 알아보세요.

 

글자(텍스트) 요소들에 대한 이해에 관련된 참고자료들: 

vertical-align 속성은 무엇인가? :: 마이구미

https://mygumi.tistory.com/368

img요소 하단에 생기는 알 수 없는 빈 공간 파헤치기 | CSS 갈증해소 프로젝트 OACSS | 빔캠프

https://www.youtube.com/watch?v=7oOai_rOnuI&list=PLnJxj-9nHZFPaeuxG-XkJee061TYfKhzw&index=3&t=2s 

 

---

line-height이란 무엇인가

참고자료: https://mygumi.tistory.com/366

line-height에 대해 알기 전에 우선 line-height: normal이 어떤 것인지 이야기해보겠다.

사용자가 fonsize=100px; 일때

1640* (100px/1000em) = 164px

164px의 전체 폰트 덩어리(inline-box)의 높이를 content-area라고 한다.

//content-area 는 폰트 사이즈에 대해 동일한 비율을 가지게 계산된 높이이다.

결론 : line-height의 실높이는 폰트 사이즈와 같다

 

 

두번째, width와 height이 적용되지 않습니다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰집니다. 그래서 인라인 요소 내부에 아무것도 적혀있지 않으면 

 

세번째, 인라인 요소끼리 연속으로 사용되는 경우, 좌우에 margin이 자동으로 발생합니다. 인라인 블럭 간의 최소 간격을 유지하기 위해서 만들어진 설정입니다.

 

 

--인라인 요소의 상위호환? inline-block--

 

1. inline-block을 기본값으로 가지고 있는 태그는 없습니다.

2. margin-top, margin-bottom 속성 정의 가능

margin과 line-height 모두 적용가능

3. inline-block끼리 연속으로 사용되는 경우, 좌우에 margin이 자동으로 발생합니다

하지만 margin-left와 margin-right을 통해 조절가능하다

: 한줄에 표현하면서(가로로) margin, width, height을 표현할 수 있는 속성

 

 

--block속성의 특징--

 

Block 속성은 Inline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지하는 속성입니다.

 

1. 기본적으로 width : 100% 가지고 있음

따라서 다음 요소가 양 옆으로 붙을 공간이 없기 때문에 자연히 줄 넘김이 됩니다.

 

2. inline과 달리 margin, width, height 속성 모두 적용

inline 속성과 달리 모양새를 쉽게 제어할 수 있기 때문에 block은 구성, 레이아웃에 쓰입니다.

(그래도 inline 요소를 사용하는 이유는 <span>, <a>, <img>등 편리하거나 반드시 써야하는 몇가지 태그를 사용해야 하기 때문이다. )

 

 

--inline과 block의 관계--

블록은 inline 을 포괄,포함하는 개념입니다. 따라서 inline 속성 안에 block은 넣을 수 없습니다. 

<span><p>문장입니다.</p></span> 불가

 

 

 

 

 

 

 

 

 

 

 

 

inline과 block 실습 ; span과 div

block은 세로로 정렬되는 속성으로 div가 그 대표적인 예시이고 inline은 가로로 정렬되는 속성으로 span이 그 대표적인 예입니다.

div태그는 css로 사이즈를 설정하고 색을 넣으면 보이는 반면, span 태그는 같은 css를 적용해도 글자가 적혀있지 않으면 보이지 않습니다. 

 

Q . 그러면 span 태그의 덩어리는 아예 없다고 볼 수 있을까?

 

아니다. span 태그는 보이지 않을뿐 그 자리에서 부피를 차지하고 있다. 하지만, span태그(인라인 속성은 내부요소에 따라 크기를 알아서 적용하기 때문에 css에서 설정해준 width, height 와 다른 자체 기본값의 부피를 가진다.

 

기본적으로 block level은 한줄에 하나씩 나오고 inline level은 한 줄에 공간이 있으면 여러 개가 한줄에 있을 수 있습니다.

 

Q . 공간이 충분치 못할때 inline요소는 아래로 정렬되는가? 어떻게 되는가?

실습을 통해 알아보았다. span태그와 a태그 모두 공간이부족하면 다음 줄로 넘어간다. 

(Inline elements display in a line. They do not force the text after them to a new line. 인라인 요소는 한 줄로 표시됩니다. 그 뒤에 오는 텍스트가 한 줄에 있도록 강제하지는 않는다.)

 

가벼운 정의 상으로는 inline 속성이란, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향이다. 하지만, 그 뒤에 오는 텍스트가 한 줄에 있도록 강제하지는 않기 때문에 실제 동작할때에는 ‘공간이 충분할 때’ 한 행에 위치한다.

cf. block이 width를 100% 써서 블록이 하나 생길때마다 아래로 정렬되는 것과 같은 원리이다.

 

 

 

 

 

 

 

 

 

 

반드시 기억해야 할것

 

인라인 속성은 한 줄에 여러 개의 요소를 놓기 위해 만들어졌다.

따라서 문장 안에서 사용하는 태그들이 많다.

 

인라인 속성은 width, height, margin-top, margin-bottom이 적용되지 않는다.

자동으로 설정된다.

 

인라인 요소끼리 연속으로 사용하면 margin-left, margin-right이 자동으로 사용된다.

즉 좌우 간격을 자동으로 맞춘다.

 

블록 속성은 기본적으로 width : 100% 가지고 있다.

그래서 세로로 정렬된다.

(inline 가로 정렬, block 세로 정렬)

 

블록 속성은 margin, width, height이 적용된다.

커스터마이징이 쉽다.

하지만 그래도 가독성을 높이기위해 inline도 잘 사용해야한다.