[UI/UX]coding 기초 - CSS- flex, semantic

Dohee·2024년 12월 22일

자식박스의 직접 적용하여 크기를 지정하는 flex속성들

자식요소의 기본 크기를 지정하는 속성이다.
자식요소를 가로로 배치하면 flex-basis값은 자식요소의 넓이를 기준으로 하고,
세로로 배치하면 높이를 기준으로 한다.
flex-basis의 기본값은 auto인데, 여러가지 의미가 있다.
만약 자식요소에 width가 지정되어 있다면 width값이 flex-basis의 값이 된다.
그러나 자식요소에 width 값이 없다면 컨텐츠 영역만큼만 flex-basis 영역이 된다.
flex-basis의 단위는 px,%,vw와 같은 단위를 사용해서 기본영역을 지정할 수 있다
컨텐츠(자식요소) 등이 부모요소보다 넓으면 임의로 맞춰 컨텐츠가 줄어든다
그러나 flex-basis를 지정하면 지정한 넓이 이상 줄어들지 않는다.

 flex-grow: 1;  flex-grow: 6;  flex-grow: 3;

flex-shrink속성은 부모영역에 맞춰 자식요소를 줄이는 속성이다.
만약 flex-shrink를 0으로 지정하면 자식요소의 총합이 더 넓더라도 자식요소를 축소하지 않는다.

flex-shrink: 1;

flex-shrink: 0;

flex-shrink: 2;

flex basis, flex-grow, flex-shirink를 한꺼번에 선언하는 속성이다.
- 순서는 grow, shirink, basis순으로 선언하고 3개의 기본값은 각 0,1,auto 이다.
flex속성에 값으로 숫자를 하나만 지정한다면 flex-grow의 값으로 사용되고 shrink는 1, basis는 0이 된다.
- 즉, flex:1 = flex: 1 1 0과 같다.
  flex-basis의 값이 0이면 확장, 축소하는 상황에 따라 항목의 기본 크기를 비율대로 설정한다.
만약 flex속성값으로 none을 쓰면 컨테이너 안에서 자식요소를 확장하거나 축소하지 않는다. 그러면 크기는 미리 정해놓은 width, height값을 사용하거나 값이 없다면 내용의 크기에 따라 결정된다.
- 즉, flex:none = flex:0 0 auto와 같다.
  레이아웃에서 특정부분만 확장, 축소하지 않도록 만들고 싶을때 사용하는 값이다
flex속성값으로 auto를 사용하면 자식박스의 크기를 auto로 설정한다.
자식요소에 width,height가 들어있으면 그 값을 사용하고, 없으면 컨텐츠가 차지한 만큼만 영역으로 사용한다. 또 grow shirink는 각각 1의 값을 갖는다.
- 즉, flex:auto면 flex: 1 1 auto 값이 된다.

flex속성에 값으로 숫자를 두개를 지정한다면 첫 번째 값은 grow의 자리고,
두번째 값은 단위가 붙어있으면 basis로 설정되고 단위가 없으면 shirink값으로 설정됨

[기본형]

flex : grow shrink basis(단위);

-값이 하나일때
flex : 1;
= (flex : 1 1 0)

-값이 두개일때
flex : 1 150px; =(flex : 1 1 150px)
flex : 1 1; =(flex : 1 1 0)

자식 사이에 여백을 늘릴 때 왼쪽으로 여백을 크게 늘려 컨텐츠를 밀고싶다면
margin-left:auto로 설정하고, 오른쪽으로 여백을 늘려 밀고 싶다면 margin-right:auto를 설정한다.

웹 페이지의 레이아웃 구조를 만드는 태그들로 모두 block속성이며 뒤에 닫는 태그가 있는 일반 태그이다.

✔ 1. header

  웹페이지 최상단에 위치한 영역을 지정할때 사용한다.
  보통 로고, 메뉴를 포함한다.

✔ 2.nav

  메뉴영역을 지정할때 사용하는 태그. nav태그는 html문서 안에 여러 번 사용이 가능하고
  여러 개를 지정할때 id로 구분한다.

✔ 3.main

  main태그는 section태그나 article태그 등 본문 영역을 묶어주는 태그이다.
  주제별로 묶어진 큰 영역들을 감싸는 컨텐츠 영역을 말한다.

✔ 4. section

  컨텐츠들을 포함하는 태그이다. 보통 컨텐츠들을 주제별로 묶을 때 사용하고
  section태그에는 h1~h6과 같은 제목태그가 포함된다.

✔ 5. article

  <article>태그는 웹 상의 실제 내용을 작성하는 영역으로 쓰인다. 
  article태그 안에는 section가 들어갈 수 있고, section태그 안에도 article태그가
  들어갈 수 있다. 서로 포함하여 쓸 수 있다.

✔ 6. aside

  웹 문서에서 왼쪽이나 오른쪽 혹은 하단에 사이드바가 표시되는 영역이 있다. 
  aside태그에는 광고나 링크 모음같은 것들이 들어가며 메인내용에 영향을 미치지 않는 내용이 들어간다.
  필수 태그가 아니며 생략 가능하다.

✔ 7. footer

  웹 문서의 하단에 저작권 표시와 같은 내용과 연락처 정보, 이용약관 등을 포함하는 영역이다.
  푸터에는 사이트맵과 같은 전체 메뉴를 표시하기도 한다.