개인 공부용 블로그

구조 중앙정렬 방법 1. 자식 -> .item 에 inline-block지정 (content 영역만큼만 자리잡으므로 중앙으로 위치함, block은 안됨) 상위부모 -> .items 에 text-aling: center 지정 .items { text-align: center; } .item { display: inline-block; } 중앙정렬 방법 2. items에 display: flex; justify-content: center; align-items: center; 지정 .items { display: flex; justify-content: center; align-items: center; } 중앙정렬 방법 3. position을 이용 .items { position: relative; } ..

1. 메뉴바 See the Pen 1007_flex header 만들기 by limhaneul2244 (@limhaneul2244) on CodePen. 많이 사용하는 header부분의 메뉴바. flex를 알기전이라면 float을 통해 왼쪽으로 붙여서 해야하는 불편함(?)이 있었겠지만 flex의 기본개념을 알고 있다면 간단하게 만들 수 있다. 여기에서 주의사항은 자식요소를 정렬한 뒤 100%로 늘리기 위해 flex-grow를 사용하면 IE에서 작동이 되지 않는다. (caniuse 사이트에서도 flex-grow 검색 시 부분지원 또는 불가가 많이 나온다) 그렇기 때문에 flex-grow보다는 width로 너비를 잡아주는 것이 안전하다. 2. 검색창 See the Pen 1007_flex search bar..

플렉스 아이템 크기 늘이고 줄이기 속성명 속성값 적용 요소 flex 아래 표 참고 플렉스 아이템 (자식) [flex-grow] [flex-shrink] [flex-basis] 비고 0 1 auto 기본값 0 X auto 0 1 auto와 같음 initial 0 1 auto 와 같음 auto 1 1 auto 와 같음 none 0 0 auto 와 같음 *공통사항 음수값은 사용할 수 없음 flex-grow 플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘릴 수 있는 속성 🐱‍👤남는 빈 공간의 여백 구하는 방법 플렉서블 박스(부모)의 너비 : 총 600px // 플렉스 아이템의 너비 : 100px border 값 2px을 제외하면 600px - 2 = 598px 598px - 박스 4개의 너비 400p..

justify : 메인축을 기준으로 정렬 align: 수직축을 기준으로 정렬 justify-content : 주축 방향 정렬 플렉스 아이템(자식)은 플렉서블 박스(부모) 주축의 시작점부터 배치된다. 주축 방향으로 박스를 배치하고 싶다면 아래 속성값을 사용하자. 속성명 속성값 적용 요소 justify-content flex-start(기본값) flex-end center space-between space-around space-evenly 플렉서블 박스(부모) See the Pen justify-content by limhaneul2244 (@limhaneul2244) on CodePen. 속성값 명 속성값 설명 비고 flex-start(기본값) 기본 값 flex-end 자식 박스를 부모 박스 주축의 끝..

플렉서블 박스가 등장하며 박스 요소들을 다양하고 자유롭게 조작할 수 있게 되었다. 예로 플렉서블 박스의 특정 속성값을 중앙으로만 설정하면 박스들을 중앙으로 배치할 수 있으며, 여러개의 박스가 나란히 있을 때는 가장 높은 크기의 박스에 맞춰 모든 박스 높이를 확장하는 등 유연하게 작동하는 박스를 간단히 만들 수 있다. 복잡한 구조의 반응형 웹사이트를 제작하기에 최적의 기술 1. 플렉서블 박스 = 부모 박스 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념 wrap처럼 모든 요소를 감싸고 있는 존재이다. 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동한다. 속성명 속성값 적용 요소 display flex, inline-flex 모든 요소 See the Pen flex..