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

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

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 상으로는 여러 아이템을 묶어줄 박스를 만들어주고 그 박스는 플렉스 컨테이너로 활용한다. 그리고 박스 안에 들어간 각 아이템들은 플렉스 아이템으로 이용해준다. 예시에선 우선 아이템으로 활용할 태그를 여러개 만들어줬다. 그후 태그를 ..

박스 모델이란? CSS의 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킨다. HTML에서 , 등으로 문서를 작성하게 되면 눈에는 보이지 않지만 태그별로 공간을 점유하게 된다. 문서 내용과 주변 공간을 통틀어 박스라 한다. 태그 별로 문서 부분 이외에 padding과 margine 값을 가지게 된다. 그림처럼 HTML 본문을 'contents'라 하면 해당 문서의 경계인 'border' 사이에 'padding'이 존재한다. 그리고 경계선인 'border' 밖으로 'margin'이 존재한다. 블록 레벨과 인라인 레벨 위 박스 모델을 블록 레벨과 인라인 레벨로 나눠진다. 블록 레벨 블록 레벨의 경우 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다. 블록 레벨인 태그를 써서 ..