컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

플렉스 아이템의 정렬 기준 플렉스 컨테이너 안의 각 아이템들은 어떠한 가상의 정렬 기준에 의해 정렬된다. 예를 들어 'display' 속성의 속성값으로 'flex'를 주면 수평축을 메인축으로 요소들이 정렬된다. 그리고 이러한 메인축은 'flex-direction' 속성으로 변경해줄 수 있다. 'flex-direction'의 속성값으로 줄 수 있는 값은 다음과 같다. flex-direction: 속성값; 속성값 설명 row 수평축을 메인축으로 설정. 왼쪽에서 오른쪽으로 아이템 나열. row-reverse 수평축을 메인축으로 설정. 오른쪽에서 왼쪽으로 아이템 나열. column 수직축을 메인축으로 설정. 위에서 아래로 아이템 나열. column-reverse 수직축을 메인축으로 설정. 아래에서 위로 아이템 ..

플렉스 박스란? 레이아웃 모델로서 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되고 언제나 레이아웃을 똑같이 유지할 수 있게 만들어준다. 플렉스 박스의 구성 아이템 1 아이템 2 아이템 3 플렉스 박스는 플렉스 컨테이너와 플렉스 아이템으로 구성된다. 플렉스 박스는 플렉스 아이템들을 하나로 묶어주는 역할을 한다. 그리고 박스 안에서 아이템들이 어떻게 배치될지 설정을 해준다. 플렉스 박스 설정하기 아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 HTML 상으로는 여러 아이템을 묶어줄 박스를 만들어주고 그 박스는 플렉스 컨테이너로 활용한다. 그리고 박스 안에 들어간 각 아이템들은 플렉스 아이템으로 이용해준다. 예시에선 우선 아이템으로 활용할 태그를 여러개 만들어줬다. 그후 태그를 ..