블록태그와 인라인태그 / flex

블록태그와 인라인태그

블록태그

방을 만드는 태그

가장 큰 블록태그

• header, main, footer

콘텐츠 블록 종류 5개

• 제목: <h>, <h1>
• 목록 : <ul> , <ol>
• 문장 : <div>, <p>
• 표 : <table>
• 입력폼 : <form>

텍스트,콘텐트를 감싸는 최전방 블록들

제목열 정리하는 section 태그

• section, article,nav,aside

상대경로와 절대경로 차이 /크롬 확장프로그램/ HTML 문서구조

인라인요소

---

인라인태그

블록안에서 사용되는 태그

콘텐츠를 감싸거나, 콘텐츠 그 자체인 태그

<font>, <b> bold처리 ,<u> underline, <i>글기울임 

 

---

1. flex박스 지정하기
2. 기존 지정된것을 잃어버리고 flex디스플레이로 속성적용
3. 아이템의 기본크기 : 콘텐트크기
4. 여백나눠갖기 

 

콘텐트크기에 따라 기본 너비가 지정된다.

 

---

콘텐츠가 밖으로 나오는 현상

<div> 에 height 100px가 기본콘텐츠들의 높이보다 작아서 콘텐츠가 밖으로 나온다.

 

 

delete elements

개발자도구를 열고, elements에서 마우스오른쪽버튼을누르면 delete elements기능을통해 동적으로 확인가능

 

 

display : flex

display : flex 기본은 수평방향으로 나열된다.

 

 

flex-grow

flex-grow

1~7까지 콘텐츠박스가있고 나머지 오른쪽에 여백이있다. 이것을 나눠가져보자.

부모(item)에 flex-grow :1 지정 후 자식1(child)에 flex-grow :3 을 지정하면 

자식1을 제외한 6자식들에게 여백1개가 주어지고, 자식1에게 총3개의 여백칸이 주어진다.

여백을 3(자식1)+6(나머지자식) = 총 9등분으로 나눠서 가지게된다.

이때, 아이템박스자체가 3배가 되는것이 아니라, 자식1은 자신의콘텐츠블록과 여백3개를 갖는것이다.

콘텐츠영역과 여백영역이 합쳐보이니 주의.

 

flex-direction: 

flex-direction

flex-direction: ;컨테이너에게만 적용가능

 

 

 

반응형 움직임

width설정을 없애면 각 색깔이 창의 움직임대로 변형된다. (반응형)

 

 

여백

여백을 box3이 다 갖게되어 창을 움직일때마다 여백이box3으로 표현된다.

고정크기를 줘도 flex-grow를 설정하면 늘어난다.

 

 

flex-shrink

box1이 200px에서 고정되어 줄어들지않는다.

width는 개별적인 속성을 갖는다.

flex-shrink : 0 너비고정

flex-shrink : 1 남들보다 1배 줄어든다.

 

 

flex-direction : row-reverse 역방향

 

flex-basis

flex-basis 기본값이된다