Html5, Css3, Flex

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

---

Html5 가 뭔가요?

HTML	HTML5
Hyper Text Markup Langyage 문서와 문서의 연결 / 태그로 이루어진 / 언어
	- 차세대 웹 표준, 멀티미디어 등. 다양한 어플리케이션까지 제공하도록 진화. - Client Side, 모바일 핵심 - 그래서 ActiveX 같은 플러그인 사용 안하게됨

 

Css3 은 뭘까요?

(과거) Css	Css2	(최신) Css3
텍스트 서식, 폰트 설정, 마진 설정 등 핵심 기능만 구현 가능	이미지를 기반으로 다양한 표현이 가능해짐. 그라데이션 같은것	이미지 기반이었던 많은 부분을 해소. bootstrap 과 JQuery 를 레거시함

 

- 두개가 발전할 수 있었던 이유는 Client Side 개발이 가능해졌기 때문

- 쉽게 설명하면, 요즘 기기들의 사양이 좋아져서 ~ 사용자의 기기에서 랜더링을 돌려도 충분하기 때문에 가능해짐

 

Client Side 는 쉽게 설명하자면

- 클라이언트 사이드 : 프론트엔드

   사용자 기기에서 진행되어 보여짐

- 서버 사이드 : 백앤드

   개발자가 뒤에서 다양한 데이터를 가지고 작업을 진행하여 보여줌

---

Flex 는 Css가 3까지 진화하였기 때문에 사용할 수 있는데

부트스트랩을 통해 사용했던 기능 (특히 단 나누기) 을 구현할 수 있게 되었다.

 

1. Flex 는 기본적으로 display 속성이다.

Css 의, display 에는

1). Block : 기본적으로 가로 영역의 한 섹션 모두 차지, 높이와 폭 속성 지정가능

2). Inline : 텍스트와동일한 속성, 태그같음. 줄바꿈 X, 높이와 폭 속성 지정 X

3). Inline-block : Block 과 Inline 의 중간속성. 줄바꿈 X, 높이와 폭 속성 지정가능

4). None : 랜더링 되지 않음. 영역도 차지하지 않는다.

5). Flex : 자식 요소들의 속성을 하나하나 ? 디테일하게 부여할 수 있는! 아주좋은 기능.

 

찾아보니.. 예를들면 버튼을 눌렀을때 화면에 div가 보여졌다가 감춰지는 방식은

Css 의 display 를 활용해서 block 등으로 View 에 띄우고 - none 으로 숨기는 식으로 사용

---

2. 어떻게 쓰나요?

1). Flex Container

     - 여러개의 flex item 을 포함한 부모 역할을 한다.

     - flex-direction : 박스가 늘어하는 방향을 지정

     - flex-wrap : 박스 안을 묶어주는 역할. 박스가 다음줄로 넘어가는 방식을 지정

     - justify-content, align-content, align-item : 자식요소인 flex item 을 정렬하는 방식을 지정

 

2). Flex Item

     - 컨테이너 안에 존재, 존재하는 박스 하나하나의 모양을 결정

     - flex-basis : 박스의 크기

     - flex-grow : flex-basis 에 의해 결정된 Flex Item 이 남은 여백에 맞춰 사이즈가 늘어남

     - flex-shink : flex-basis 에 의해 결정된 Flex Item 이 남은 여백에 맞춰 사이즈가 줄어듬

     - align-self : 나열되는 순서

     - 참고블로그: https://choar816.tistory.com/119

 

 

3). 예를 들어

<div class="wrap_main">

   <div class="wrap_subcontents> 제목

       <div class="subcontents_title> 제목 </div>

       <div class="subcontents_body> 내용입니다 </div>

   </div>

</div>

부모 div 인 wrap_main 의 css 에, display: flex 로 설정해주면 Flex Container 역할을 가지게 되며,

하위 div 인  wrap_subcontents 를 Flex Item  로써 정의할 수 있다.

 

.wrap_main {

    display: flex;           // 자신을 포함한 자식 div 들이 flex 속성을 가짐

    flex-direction: row;  // 내용물인 자식 div 들이 row 열(가로 나열)로 배치

}

 

.wrap_main .wrap_subcontents {

    align-self: center;  // 부모 div 로 부터 상속받은 flex 속성을 통해. 자식 div 가 어떻게 나열될지 정의

}

 

이러한 속성들을 사용하기 위해서, 주 축과 교차 축의 개념을 알아야 하는데.

https://heropy.blog/2018/11/24/css-flexible-box/

정리가 잘된 블로그.

 

개인적으로 주 축과 교차 축 등. 개념을 이해하는건 중요하지만

각각 상속된 div 들이 row - 가로 정렬, column - 세로 정렬. 어떻게 되는지 보니까 쉽게 알것 같았다.

 

이런게 있었다.