[생활코딩] flex : intro

---

주로 레이아웃을 잡을 때 사용하는 기능입니다.

(레이아웃 : 어떤 컨텐츠를 만들 때 잘 정리 정돈해서 구조화 시킬 때 사용하는 기능)

 

 Layout의 흑역사

레이아웃은 아름답지 못한 역사를 가지고 있었습니다.

인류가 레이아웃을 코드로 잘 표현하는 방법을 몰랐기 때문입니다.

 

1. 테이블(표)
격자 모양, 그리드 모양처럼 생긴 테이블 태그를 사용해서 레이아웃을 잡았습니다.

이 방법에는 구조화된 정보, 많은 정보를 잘 정리 정돈 하기 위한

정보로써의 의미를 지니고 있는 데 그것을 의미가 없는 레이아웃에 사용하다 보니

검색 엔진이나 스크린 리더, 여러 가지 HTML을 해석하는 여러 가지 소프트웨어들의 입장에서

이것이 표로 사용된 것인 지, 레이아웃에 사용된 것인 지 구분하기 어렵다는 치명적인 문제가 있었습니다.

또한 테이블이 아주 복합하고 코드 양이 많기 때문에 웹 안에서, 웹페이지 안에서 테이블이 꽉 차게 되면

그것을 짜는 것은 쉽지만 변경 할 때는 까다롭다는 문제도 있었습니다.

 

2. position
 absolute, relative를 사용하여 각각의 태그, 요소들을 적당한 위치로 옮기는 방식도 많이 사용 했습니다.
이는 현재에도 많이 사용하는 방식이기 때문에 나쁜 방식은 아닙니다.

 

3. float
이미지를 삽화 같은 것으로 표현 할 때 이미지 옆에 글씨가 흘러가게 하는 효과들을 floating 효과하고 하고

그런 효과들을 활용하여 레이아웃을 잡을 때 많이 사용 했었습니다.

 

float는 이해하기 어렵고, 레이아웃을 만들기 위해서 고안 되었다고 보기 어려워서 좋은 방법은 아니었습니다.

 

아주 오랫동안 인류는 레이아웃을 코드로 표현하는 부분에서 갈팡지팡, 사춘기 시절을 오랫동안 보냈고

그렇게 고안된 레이아웃 방법이 바로 flex라는 것 입니다.

 

flex를 사용하기 위해서는 태그가 두 단계가 필요합니다.

마치 li 태그는 반드시 ul, ol이라는 부모가 필요하듯이

정렬 하고자 하는 아이템들을 감싸고 있는 부모 태그가 필요합니다.

 

즉, 컨테이너 역할을 하는 부모 태그와 자식 역할을 하는 아이템 태그가 있어야 한다는 뜻입니다. 

 

바깥 쪽에 있는 태그와 안쪽에 있는 태그들은 각각에 부여해야 하는 속성들이 구분 되어 있습니다.