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

'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..

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