🎨 [UIUX] 1211 CSS Coding, 코딩 기초 11

✏️ 2024. 12월 11일 / CSS 언어, 코딩 기초 11

🔥 자식박스의 크기를 지정하는 flex속성들에 대해 알아봅시다.
✖️
☁️ 자식박스의 크기를 지정하는 flex속성들
아래 속성들은 부모 컨테이너가 아닌 자식에 직접 적용하는 속성이다.
이 속성들은 flex자식 요소들의 크기를 정하는 속성들이다.
👻 1. flex-basis
자식요소의 기본 크기를 지정하는 속성이다.
자식요소를 가로로 배치한다면 flex-basis값은 자식요소의 넓이를 기준으로 하고,
자식요소를 세로로 배치한다면 flex-basis값은 자식요소의 높이를 기준으로 한다.
flex-basis의 기본값은 auto인데, 여러가지 의미가 있다.
만약 자식요소에 width가 지정되어 있다면 width값이 flex-basis의 값이 된다.
하지만 만약 자식요소에 width값이 없다면 컨텐츠 영역만큼만 flex-basis의 영역이 된다.
flex-basis의 단위는 px, %, vw와 같은 단위를 사용해서 기본영역을 지정할 수 있다.
👻 2. flex-grow
flex가 적용된 자식요소를 확장하는 속성이다.
부모박스가 자식박스의 총합보다 넓이가 넓으면 빈 공간이 생긴다.
이때 남은 공간을 어떻게 나눌지 결정하는 속성이다.
flex-grow의 기본값은 0이며, 0보다 큰 숫자를 사용하면 부모박스를 채운다.(음수값 사용불가)
flex-shrink
컨테이너의 넓이가 줄어들 경우 그 안에 있는 자식박스들은 자연스럽게 줄어들면서 부모영역을 채운다.
flex-shrink의 기본값이 1이기 때문이다.
flex-shrink속성은 부모영역에 맞춰 자식요소를 줄이는 속성이다.
만약 flex-shrink를 0으로 지정하면 자식요소의 총합이 더 넓더라도 자식요소를 축소하지 않는다.

🔥 자식박스의 크기를 지정하는 flex속성들에 대해 알아봅시다. - 2
✖️
☁️ flex
flex-basis, flex-grow, flex-shrink를 한꺼번에 선언하는 속성이다.
세 속성을 선언할때에는 자리가 지정되어 있어 순서를 지켜줘야 한다.
순서는 grow shrink 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:0 0 auto와 같다.
레이아웃에서 특정부분만 확장, 축소하지 않도록 만들고 싶을때 사용하는 값이다.
flex속성값으로 auto를 사용하면 자식박스의 크기를 auto로 설정한다.
자식요소에 width, height가 들어있으면 그 값을 사용하고, 만약 width, height속성이 없으면 컨텐츠가 차지한 만큼만 영역으로 사용한다.
또, grow shrink는 각각 1의 값을 갖는다.
즉, flex:auto면 flex: 1 1 auto와 같다.
flex속성에 값으로 숫자를 두개를 지정한다면 첫 번째 값은 grow의 자리고,
두번째 값은 단위가 붙어있으면 basis로 설정되고 단위가 없으면 shrink값으로 설정됨.
[기본형]
flex : grow shrink basis;
- 값이 하나일때
flex : 1; /* flex : 1 1 0;*/
- 값이 두개일때
flex : 1 150px; /* flex : 1 1 150px; */
flex : 1 1; /* flex : 1 1 0; */

🔥 flex박스에 여백을 지정하는 방법
✖️
☁️ flex박스에 여백을 지정하는 방법
flex가 설정된 컨테이너에 justify-content를 space-between으로 설정하면 자식 사이에 동일한 간격이 설정된다.
이때 자식 사이에 여백을 늘리고 싶다면 margin을 사용하여 비어있는 여백을 더 크게 늘릴 수 있다.
margin을 사용할때 왼쪽으로 쭉 여백을 크게 늘려 컨텐츠를 밀고싶다면
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>태그튼 웹 상의 실제 내용을 작성하는 영역으로 쓰인다.
예를 들면 이벤트 페이지나 블로그의 포스트같은 독립적인 웹 컨텐츠가 이에 해당된다.
여러 사용자에게 공유가 가능한 페이지를 작업할때 주로 사용된다.
또한 article태그 안에는 section가 들어갈 수 있고, section태그 안에도 article태그가 들어갈 수 있다. 서로 포함하여 쓸 수 있다.
👻 6. <aside>
웹 문서에서 왼쪽이나 오른쪽 혹은 하단에 사이드바가 표시되는 영역이 있다.
이런 사이드 영역을 만드는 태그가 aside태그이다.
aside태그에는 광고나 링크 모음같은 것들이 들어가며 문서의 메인내용에 영향을 미치지 않는 내용들이 들어간다.
필수 태그가 아니며 생략 가능하다.
👻 7. footer
웹 문서의 하단에 저작권 표시와 같은 내용과 연락처 정보 등을 포함하는 영역이다.
보통 로그인이 가능한 사이트라면 개인정보처리방침, 이용약관 등의 내용이 포함 될 수 있고
만약 사이트에서 구매가 가능하다면 사업자 등록번호, 대표자의 이름, 개인정보 처리자,
통신판매업 신고번호와 고객센터 전화번호 등이 포함되어야 한다.
또한 사이트에서 사용자의 위치 정보를 수집한다면 위치정보 이용약관도 포함된다.
푸터에는 사이트맵과 같은 전체 메뉴를 표시하기도 한다.