flex2 20230721 CSS3 Flex flex요소를 사용 할 때 shirink, grow, baisis를 border의 width, style, color속성들을 일렬로 사용하듯이 일렬로 작성해 사용가능하다. glow, shrink, basis순으로 사용하는 것이며 예로 아래와 같다. flex: 0 1 auto 첫 번째는 glow 두 번째는 shrink 세 번째는 basis 순으로 사용하면 된다. 만약 flex: 1 100px 라고 사용 하면 glow, shrink를 1로 공통되게 사용 flex: 1 이라고 사용하면 glow 1로 사용한다는 뜻이다. 만약 가변길이의 input요소 3대 button 1의 비율을 갖는 flex를 갖고 싶다면 아래와 같이 작성하면된다. 위에 코드를 이용하면 아래와 같이 설정할 수 있다. main-nav의 자식요소.. 2023. 7. 21. 20230719 flex 블럭 요소를 가로로 배치하는 테스트에 관련한 수업이다. 블럭 요소를 가로로 배치하는 테스트 div1 div2 div3 div4 div5 위와 같은 코드로 div를 만들면 아래처럼 세로로 출력이된다. style을 추가해줘보겠다(잘 보이게하려고..) 블럭 요소를 가로로 배치하는 테스트 div1 div2 div3 div4 div5 원래 세로로 배치 되던 것이 flex를 사용하여 가로로 배치 되었다. 여기서 width를 제거하게 되면 자식요소들은 필요한 만큼만의 width를 자동으로 갖게 된다. flex-direction을 통해 오른쪽을 기준으로 배치시킬수도 있다. flex-direction의 column과 column-reverse를 사용하면 아래와 같다. flex-wrap의 특징은 아래와 같다. 정렬의 관한.. 2023. 7. 19. 이전 1 다음
