이전까지의 속성들은 플렉스 컨테이너의 주축을 기준으로한 위치에 관한 속성이었다면 "align-"은 플렉스 컨테이너의 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지를 결정해주는 속성이다. ❓align-items 플렉스 컨테이너가 교차축위에서 아이템들을 어떻게 정렬할지 결정하는 속성 속성값 의미 stretch 플렉스 아이템이 교차축 길이에 맞춰 늘어남. but 너비 or 높이가 우선. flex-start 교차축의 시작점으로부터 끝점을 향해 배치 flex-end 교차축의 끝점으로부터 시작점을 향해 배치 center 교차축의 중심부에 배치 ❓align-self 각각의 플렉스 아이템이 교차축에서 어떤 식으로 정렬될 것인지를 아이템 스스로가 결정하는 속성이다. 속성값은 "align-items"와 동일하..

❓justify-content 플렉스 아이템들이 플렉스 박스 주축을 따라 배치될 때, 아이템 사이의 공간을 분배하는 방식을 결정한다. 속성값 의미 flex-start 주축의 시작점으로부터 끝점을 향해 배치 flex-end 주축의 끝점으로부터 시작점을 향해 배치 center 주축의 중심부에 배치 space-between 주축에서 일정한 간격을 둔 채 양끝 정렬 배치 (양끝의 여백은 없다.) space-around 모든 요소가 동일한 여백을 갖도록 배치 (플렉스 아이템이 가지는 여백을 동일하게 한다.) space-evenly 모든 요소 사이의 간격을 동일하게 유지해 배치 (플렉스 컨테이너의 여백을 부여한다.) 📕실습하기 space-around와 space-evenly는 비슷한 것 같지만서도 다르다. 직접 코..

❓flex-direction 플렉스 컨테이너의 주축을 결정하는 속성이다. "행 = 가로축, 열 = 세로 축" 을 의미한다. 속성값 의미 row 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일 row-reverse 주축은 행이고 방향은 콘텐츠의 방향과 반대 column 주축은 열이고 방향은 콘텐츠의 방향과 동일 column-reverse 주축은 열이고 방향은 콘텐츠의 방향과 반대 ❓flex-wrap 플렉스 아이템들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성 속성값 의미 nowrap 기본값. 공간이 부족하더라도 요소를 한줄에 배치 wrap 공간 크기에 따라 요소가 여러 행에 걸쳐 배치 wrap-reverse wrap과 동..

❓플렉스박스 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식이다. 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정된다. 플렉스 컨테이너: 플렉스 방식으로 레이아웃을 결정할 요소 (주로 여러개의 아이템을 포함하고 있는 태그 같은 요소들) 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스 방식으로 배치되는 요소 ❓display: flex; 플렉스 컨테이너를 만들기위한 선언. 기본적으로 박스레벨로 설정된다. ❓display: inline-flex; 플렉스 컨테이너가 인라인 레벨 요소이길 원할 때 사용한다. 플렉스박스 방식은 두 개의 축을 제공하는데, 그 중 하나의 축을 주축삼아서 요소를 배치한다. 주축의 기본값은 (x)축 -> 왼쪽에서 오른쪽이다. 📕 실습하기 거북이 ..

푸터에는 간단하게 개발자의 정보만 적을 것이다... 딱히 적을 내용이 없음! 간단하게 개발자의 정보와 SNS링크만 적용할 것이다. 아직 스타일을 적용하기 전이므로 보기에 이상한 것이 당연하다! 위 스타일 적용 후 다시 태어났다!

인스타그램과 학부 홈페이지로 이동하는 링크를 이미지와 함께 첨부해보겠다. 📕 링크 항목 배치하기 다음과 같이 html코드를 적는다. 태그는 이미지와 텍스트를 함께 표시하기 위한 태그이다. 위와 같이 SNS링크 항목이 배치된 것을 확인할 수 있다. 📕 링크 스타일 지정하기 이제 CSS를 이용하여 SNS링크를 가로로 배치하고 배경 이미지를 삽입하겠다. [결과]