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

'align-content'이란? 'align-item'과 비슷하다. 하지만 'align-content'란 아이템이 아닌 아이템 라인을 정렬한다. 단, 'align-content'를 제대로 써주기 위해선 'flex-wrap'이 적용되서 라인이 두 줄이상 되어야 한다. 'align-content'의 속성값 'align-content'의 속성은 다음과 같이 설정해준다. align-content: 속성값; 속성값 설명 stretch 기본 설정값. flex-start 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 위쪽부터 정렬. flex-end 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 ..

'flex-wrap'이란? 플렉스 박스의 베이스라인에 더이상 여유가 없을 때 플렉스 아이템을 다음 줄로 넘길지 설정하는 것. 아래와 일반적으로 박스가 나열되있는 상황에서 브라우저 창의 크기를 줄이면 아래 사진처럼 변경된다. 하지만 'flex-wrap'을 속성값으로 줬을 때는 아래와 같이 줄을 넘겨서 정렬해준다. 'flex-wrap'의 속성값 'flex-wrap'의 속성은 다음과 같이 설정해준다. flex-wrap: 속성값; 속성값 설명 nowrap 기본 설정. 플렉스 아이템이 다음줄로 넘어가지 않음. 대신 아이템 너비를 줄여서 한 줄에 배치시킴. wrap 플렉스 공간에 여유가 없으면 다음 줄로 넘김. wrap-reverse 플렉스 공간에 여유가 없으면 다음줄로 넘김. 단 reverse의 경우 역으로 아래..

align-items란? 'align-items' 속성을 이용하면 아이템들을 교차축(Cross Axis)기준으로 정렬할 수 있다. 'align-items'의 속성값으로 줄 수 있는 값은 다음과 같다. align-items: 속성값; 속성값 설명 stretch 기본 설정임. 플렉스 아이템 높이가 컨테이너 높이와 같게 변경된 뒤 연이어 배치됨. flex-start 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 좌쪽부터 정렬 flex-end 수평축이 메인축일 때 교차축인 수직축 아래쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 우쪽부터 정렬 center 수평축이 메인축일 때 교차축인 수직축 가운데 정렬 수직축이 메인축일 때 교차축인 수평축 가운데 정렬 baseli..

justify-content는? 'justify-content' 속성을 이용하면 아이템들을 메인축 기준으로 정렬할 수 있다. 'justify-content'의 속성값으로 줄 수 있는 값은 다음과 같다. justify-content: 속성값; 속성값 설명 flex-start 기본 설정값과 같은 값. 수평축이 메인축일때 수평축 좌측부터 정렬. 수직축이 메인축일때 수직축 위쪽부터 정렬. flex-end 수평축이 메인축일 땐 수평축 우측부터 정렬. 수직축이 메인축일 땐 수직축 아래부터 정렬. center 수평축이 메인축일 땐 수평축 가운데 정렬. 수직축이 메인축일 땐 수직축 가운데 정렬. space-around 아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으..

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

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

visibility 1번 박스 2번 박스 3번 박스 visibility는 해당 요소의 공개 여부를 결정하는 속성이다. visibility를 속성으로 부여하고 속성값으로 'hidden'을 주면 해당 요소는 화면에서 숨겨진다. 하지만 눈에는 보이지 않지만 실제로는 공간을 차지한다. 예시에선 visibility가 hidden된 box2가 눈에 보이진 않지만, 위치는 차지하게 된다. z-index 1번 박스 2번 박스 3번 박스 각종 요소를 배치하다보면 해당 요소들이 겹칠 수 있다. 이때 'z-index'값을 설정하면 해당 요소들이 겹쳤을 때 어떤 요소가 앞에 올지 정할 수 있다. 'z-index'값이 높을 수록 해당 요소가 가장 앞으로 나오게 되어있다. 예시에선 3번 박스의 'z-index'값이 가장 크므로 ..