알아야 할 내용
- HTML
- CSS
- 시각 디자인 - Applied Visual Design
- 접근성 - Applied Accessibility
- 반응형웹다지인 원칙 - Responsive Web Design Principles
소개
웹사이트에서 유저 인터페이스 (User Interface, UI) 에는 두 가지 구성분이 있다.
첫 번째로는
색상, 폰트, 이미지 등과 같은 시각적인 엘레먼트가 있다.
두 번째로는
첫 번째에서 언급한 엘레먼트를
어디에 위치시켜야 하는지
화면 상에 구성을 어떻게 해야 하는지에 대한 부분이다.
반응형 웹디자인에서는
여러 사이즈의 브라우저와 기기에 스스로 맞춰지도록
UI 레이아웃을 갖춰야 한다.
CSS3 에서는 플렉스박스라고 하는 기술이 소개되었다.
플렉스박스로 UI 의 구성이 변화하는
다이내믹한 레이아웃을 만들 수 있다.
레이아웃 모드를 화면과 브라우저의 사이즈에 따라 바뀌도록 정해놓는 것이다.
대부분의 현대의 브라우저에서는
CSS3 의 플렉스박스를 지원한다.
목록
- 디스플레이 플렉스 사용하기 - Use display: flex to Position Two Boxes
- 디스플레이 플렉스 적용해보기 - Add Flex Superpowers to the Tweet Embed
- 플렉스 디렉션 사용하기 - Use the flex-direction Property to Make a Row
- 플렉스 디렉션으로 열(row) 만들기 - Apply the flex-direction Property to Create Rows in the Tweet Embed
- 플렉스 디렉션으로 행(column) 만들기 - Use the flex-directoin Property to Make a Column
- 플렉스 디렉션으로 행(column) 적용해보기 - Apply the flex-direction Property to Create a Column in the Tweet Embed
- 엘레먼트 안에 있는 콘텐츠 정렬하기 - Align Elements Using the justify-content Property
- justify-content 프로퍼티 사용해보기 - Use the justify-content Property in the Tweet Embed
- align-items 사용해보기 - Align Elements Using the align-items Property
- align-items 적용해보기 - Use the align-items Property in the Tweet Embed
- 플렉스랩 사용해보기 - Use the flex-wrap Property to Wrap a Row or Column
- 플렉스 슈링크 사용해보기 - Use the flex-shrink Property to Shrink Items
- 플렉스 그로우 사용해보기 - Use the flex-grow Property to Expand Items
- 플렉스 베이시스 설정하기 - Use the flex-basis Property to set the Initial Size of an Item
- 플렉스 프로퍼티 사용하기 - Use the flex Shorthand Property
- 플렉스 아이템의 순서 바꿔보기 - Use the order Property to Rearrange Items
- 얼라인 셀프 사용해보기 - Use the align-self Property
- CSS 플렉스 박스를 마치며...
Use display: flex to Position Two Boxes
디스플레이 플렉스 사용하기
설명
CSS 를 이용하여
엘레먼트를 유동적으로 위치시켜보자.
CSS 프로퍼티(property) 에
display: flex; 라고 넣어주면,
반응형 페이지를 만들 수 있다.
문제
1. #box-container 아이디에 display 프로퍼티를 넣어보자.
2. 당연히 display: flex; 라고 넣어줘야 되겠다.
원래는 아래와 같은 식으로 박스가 구성되어 있다.
플렉스 프로퍼티를 넣어주는 순간,
아래와 같이 박스의 구성이 변한다.
답변
#box-container {
height: 500px;
display: flex;
}Add Flex Superpowers to the Tweet Embed
디스플레이 플렉스 적용해보기
설명
프리코드캠프에 아래와 같은 화면이 보일 것이다.
레이아웃만 약간 조정해도 훨씬 보기 좋을 것 같다.
그렇다면, 같이 한 번 레이아웃을 건드려보자.
문제
다음 CSS 셀렉터에 모두 display: flex; 프로퍼티를 적용해보자.
1. 헤더
2. 헤더의 .profile-name 클래스
3. 헤더의 .follow-btn 클래스
4. 헤더의 h3 및 h4
5. 푸터 (footer)
6. 푸터의 .stats 클래스
조정 후에는 아래와 같은 레이아웃으로 바뀐 모습을 볼 수 있다.
답변
header {
display: flex;
}
header .profile-name {
display: flex;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header h3, header h4 {
display: flex;
margin: 0;
}
footer {
display: flex;
}
footer .stats {
display: flex;
font-size: 15px;
}Use the flex-direction Property to Make a Row
플렉스 디렉션 사용하기
설명
display: flex; 프로퍼티를 엘레먼트에 적용하면
엘레먼트가 플렉스 콘테이너라는 것으로 변한다.
엘레먼트가 플렉스 콘테이너가 되면,
이 엘레먼트의 모든 칠드런(children, 하위 엘레먼트) 을
행(row)과 열(column) 으로 정렬하는 것이 가능해진다.
플렉스 디렉션 (flex direction) 프로퍼티를
패런트(parent, 상위 엘레먼트) 에 추가하면,
칠드런 엘레먼트를 행이나 열로 정렬하는 것이 가능해지는 것이다.
플렉스 디렉션을 행(row)으로 설정하면 가로 방향으로 정렬되고,
열(column) 으로 설정하면 세로 방향으로 정렬된다.
또 다른 옵션으로는
row-reverse 와 column-reverse 가 있다.
reverse 라는 단어에는 '반전시키다' 라는 의미가 있다.
row-reverse 는 왼쪽에서 오른쪽 방향으로 흘러가는 기본 방향을
오른쪽에서 왼쪽 방향으로 바꾸는 것이다.
column-reverse 는 위에서 아래 방향으로 흘러가는 기본 방향을
아래에서 위쪽 방향으로 바꾸는 것이다.
플렉스 디렉션의 기본값은
일반 row 로 설정되어 있다.
프리코드캠프 화면에는 아래와 같이
플렉스 디렉션이 설정되어 있지 않은 박스 두 개가 놓여져 있다.
디스플레이 플렉스는 설정되었지만,
플렉스 디렉션이 설정되어 있지 않다면,
기본값인 일반 row 가 적용되어 있는 것이다.
플렉스 디렉션을 일반 column 으로 적용하면
아래와 같이 레이아웃이 바뀐다.
문제
1. #box-container 아이디에 플렉스 디렉션 프로퍼티를 추가해보자.
2. 이를 row-reverse 로 설정해보자.
플렉스 디렉션을 row-reverse 로 설정하면,
아래와 같은 순서로 박스가 놓여지는 것을 확인할 수 있다.
답변
#box-container {
display: flex;
height: 500px;
flex-direction: row-reverse;
}Apply the flex-direction Property to Create Rows in the Tweet Embed
플렉스 디렉션으로 열(row) 만들기
설명
현재 프리코드캠프 화면에 있는
헤더와 푸터에는 여러 엘레먼트가 있는 상태이다.
이전에 디스플레이 플렉스를 적용하여,
row 방향으로 정렬이 되기는 했지만,
이를 우리가 실질적으로 적용하지는 않은 상태이다.
이전에 살펴본 바와 같이
플렉스 디렉션에 row 를 적용해보자.
문제
1. header 에 flex-direction: row; 를 적용해보자.
2. footer 에도 같은 방식으로 적용해보자.
아마 무언가 시각적으로 바뀌지는 않을 것이다.
하지만 헤더와 푸터에 열(row) 이 생성되었다는 것을 알 수 있다.
우리가 직접 생성해놓은 상태이기 때문이다.
답변
header {
display: flex;
flex-direction: row;
}
footer {
display: flex;
flex-direction: row;
}Use the flex-direction Property to Make a Column
플렉스 디렉션으로 행(column) 만들기
설명
지금까지는 열(row)로 정렬하는 문제만 살펴보았다.
이번에는 행(column)을 만드는 문제를 살펴보자.
콜럼을 만들면,
문자 그대로 세로방향의 콘테이너가 만들어지는 것으로 이해하면 된다.
문제
1. #box-container 아이디에 플렉스 디렉션을 적용해보자.
2. flex-direction: column; 으로 설정하자.
답변
#box-container {
display: flex;
height: 500px;
flex-direction: column;
}Apply the flex-direction Property to Create a Column in the Tweet Embed
플렉스 디렉션으로 행(column) 적용해보기
설명
이번에는 플렉스 디렉션을 콜럼(column, 행) 으로 설정해보자.
문제
1. .profile-name 클래스에 플렉스 디렉션을 column 으로 설정해보자.
프리코드캠프에는 원래 아래와 같은 화면이 있다.
빨간색 박스 부분으로 표시된 부분이
.profile-name 클래스가 주어진 부분이다.
이 클래스 셀렉터에 플렉스 디렉션 콜럼을 설정하면,
아래와 같이 빨간색 박스 안에 있는 내용이
세로로 정렬되는 것을 확인할 수 있다.
답변
header .profile-name {
display: flex;
flex-direction: column;
margin-left: 10px;
}Align Elements Using the justify-content Property
엘레먼트 안에 있는 콘텐츠 정렬하기
설명
플렉스를 설정한 공간을 플렉스 콘테이너라고 보면 된다.
그리고 플렉스를 설정한 엘레먼트를 플렉스 아이템이라고 보면 된다.
나는 이 개념이 처음에 잘 이해되지 않았다.
예를 들어,
화면 안에 아래와 같이 박스 2개가 나란히 있다고 생각해보자.
여기서 우리가 볼 수 있는 것은 이 박스 2개가 전부이다.
하지만 웹브라우저는 우리 눈에 보이지 않는 것을 더 볼 수 있다.
아래 그림과 같은 식으로 말이다.
저런 박스 엘레먼트를 만들기 위해서
먼저 옅은 파란색으로 표시된 콘테이너라는 공간을 먼저 만들었다.
그리고 나서 그 안에 가로/세로가 각각 50% 씩 차지하는 박스를 2개 만든 것이다.
그래서 이런 식으로 작업을 하다 보면,
플렉스 콘테이너 안에 있는 플렉스 아이템이
가끔 플렉스 콘테이너 공간 전체를 다 채우지는 않는다는 사실을
사용하다 보면 깨닫게 될 것이다.
플렉스 콘테이너를 열(row) 방향으로 설정하면
왼쪽에서 오른쪽 방향인 가로 방향으로 세팅 된다는 것을 이미 알 것이다.
플렉스 콘테이너를 행(column) 방향으로 설정하면
위에서 아래 방향인 세로 방향으로 세팅 된다는 것도 이미 알 것이다.
아래 그림과 같이
열(row) 로 설정됐을 때는
메인 액시스 (main axis, 주 방향) 가 가로 방향이고,
행(column) 으로 설정됐을 때는
메인 액시스가 세로 방향이다.
마치 물이 흘러가듯
플렉스 아이템이 놓여진 방향과
메인 액시스는 일치한다고 생각하면 된다.
그래서 플렉스 아이템을 설정할 때
정렬 뿐만 아니라 공간에 대한 설정도 함께 할 수 있다.
이번에는 이를 설정할 수 있는
justify-content 프로퍼티에 대해 알아보려 한다.
아래 내용을 확인하고,
프리코드캠프 화면상에서 직접 하나하나 테스트 해보며
차이점을 눈으로 보고 이해해보자.
| justify-content: center; | 플렉스 아이템을 플렉스 콘테이너 중간에 위치시킴. |
| justify-content: flex-start; | 플렉스 아이템을 플렉스 콘테이너 시작 부분에 위치시킴. - 열(row) 방향으로 설정됐을 경우, 왼쪽에 위치 - 행(column) 방향으로 설정됐을 경우, 위쪽에 위치 |
| justify-content: flex-end; | 플렉스 아이템을 플렉스 콘테이너 마지막 부분에 위치시킴. - 열(row) 방향으로 설정됐을 경우, 오른쪽에 위치 - 행(column) 방향으로 설정됐을 경우, 아래쪽에 위치 |
| justify-content: space-between; | 플렉스 아이템 사이에 빈 공간을 생성함. 플렉스 콘테이너 안에 플렉스 아이템이 2개가 있다면, 플렉스 아이템은 양쪽 끝에 놓임. |
| justify-content: space-around; | 플렉스 콘테이너 안에 있는 각 플렉스 아이템 주변으로 동일한 사이즈의 공간들이 생김. 플렉스 아이템 간에는 2배 사이즈의 공간이 있는 것임. |
| justify-content; space-evenly | 플렉스 콘테이너 안에 있는 플렉스 아이템 간에 동일한 사이즈의 공간들이 생김. 플렉스 아이템 간에도 공간 사이즈가 같음. |
문제
#box-container 를 justify-content: center; 로 설정해보자.
답변
#box-container {
background: gray;
display: flex;
height: 500px;
justify-content: center;
}Use the justify-content Property in the Tweet Embed
justify-content 프로퍼티 사용해보기
설명
이번에는 justify-content 를 아무거나 적용해보는 연습을 해보자.
문제
1. .profile-name 클래스에 justify-content 프로퍼티를 적용해보자.
2. 프로퍼티의 값은 위에서 나온 내용 중 아무거나 적용해도 상관없다.
참고로
나는 하나씩 적용해보고,
내 눈에 가장 잘 들어오는 것을 골랐다.
답변
header .profile-name {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 10px;
}Align Elements Using the align-items Property
align-items 사용해보기
설명
이번엔 align-items 프로퍼티에 대해서 살펴보려 한다.
기본적으로는 위에서 이미 살펴본 justify-content 와 비슷하다.
플렉스 아이템은 메인 액시스에 맞춰 정렬된다는 것을 기억할 것이다.
그래서 가로방향으로 정렬될 땐, 메인 액시스 또한 가로방향이고,
세로방향으로 정렬될 땐, 메인 액시스도 세로방향이다.
플렉스 콘테이너는 메인 액시스 뿐만 아니라
크로스 액시스 (cross axis) 라는 개념도 있다.
메인 액시스의 반대라고 생각하면 된다.
그래서 가로방향으로 정렬될 땐, 크로스 액시스는 세로방향이고,
세로방향으로 정렬될 때의 크로스 액시스는 가로방향이다.
align-items 프로퍼티를 설정하면
플렉스 아이템을 크로스 액시스 방향으로 정렬하는 것이 가능하다.
현재 프리코드캠프에는 아래 그림과 같은 박스가 있다.
이제 이 박스에 align-items 프로퍼티를 센터로 설정하면,
아래 그림과 같은 식으로 정렬이 된다.
여기서 회색 부분은
플렉스 아이템이 놓여진 플렉스 콘테이너이다.
그래서 플렉스 콘테이너와 플렉스 아이템 차이점을 정확히 이해하고 있어야 한다.
align-items 프로퍼티에는 센터 값 뿐만 아니라,
더 많은 값을 설정할 수 있다.
| align-items: flex-start; | 플렉스 아이템을 플렉스 콘테이너 시작 부분에 정렬. - 열 (row, 가로방향) 로 놓여진 상태에서는, 세로로 정렬되기 때문에 가장 위에 정렬된다. - 행 (column, 세로방향) 의 상태에서는, 가로로 정렬되어 왼쪽에 정렬된다. |
| align-items: flex-end; | 플렉스 아이템을 플렉스 콘테이너 끝 부분에 정렬. - 열 (row, 가로방향) 로 놓여진 상태에서는, 세로로 정렬되기 때문에 가장 아래에 정렬된다. - 행 (column, 세로방향) 의 상태에서는, 가로로 정렬되어 오른쪽에 정렬된다. |
| align-items: center; | 플렉스 아이템을 플렉스 콘테이너 가운데에 정렬. - 열 (row, 가로방향) 로 놓여진 상태에서는, 세로로 정렬되어 위/아래에 같은 사이즈의 빈 공간이 생긴다. - 행 (column, 세로방향) 의 상태에서는, 가로로 정렬되어 양옆에 같은 사이즈의 빈 공간이 생긴다. |
| align-items: stretch; | 플렉스 아이템을 플렉스 콘테이너에 스트레칭 시켜 콘테이너를 채움. - 열 (row, 가로방향) 로 놓여진 상태에서는, 세로 방향으로 콘테이너를 채운다. align-items 값이 설정되어 있지 않은 상태에서는, 이 값이 기본값으로 설정된다. |
| align-items: baseline: | 플렉스 아이템을 베이스라인에 정렬. 텍스트 위치와 같다고 생각하면 편함. |
문제
1. #box-container 아이디에 align-items: center; 를 설정해보자.
2. 위의 모든 값으로 연습을 해봐도 좋다.
답변
#box-container {
background: gray;
display: flex;
height: 500px;
align-items: center;
}Use the align-items Property in the Tweet Embed
align-items 적용해보기
설명
이번에는 위에서 배운 align-items 프로퍼티 개념을 실제로 적용해보자.
문제
1. header의 .follow-btn 클래스에 align-items: center; 를 적용해보자.
답변
header .follow-btn {
display: flex;
align-items: center;
margin: 0 0 0 auto;
}Use the flex-wrap Property to Wrap a Row or Column
플렉스랩 사용해보기
설명
플렉스박스에는
플렉스 아이템을 여러 열(row) 이나 행(column) 으로
분할할 수 있는 기능이 있다.
기본적으로는
플렉스 콘테이너에 모든 플렉스 아이템이 꽉 차는 식이다.
예를 들어,
플렉스 콘테이너를
가로방향인 행으로 설정하면
가로방향으로 한 줄에 모든 아이템이 다 들어차는 것이다.
하지만 플렉스랩 (flex-wrap) 프로퍼티를 사용하면
사이즈가 정해진 아이템이 콘테이너에 꽉 찼을 경우,
나머지 플렉스 아이템이
새로운 열이나 행으로 이동한다.
플렉스랩에는 몇 가지 옵션이 더 있다.
| flex-wrap: nowrap; | 기본값이다. 플렉스랩을 적용하지 않는다. |
| flex-wrap: wrap; | 가로방향 기준에서는 왼쪽에서 오른쪽 방향으로 플렉스랩을 적용한다. 세로방향 기준에서는 위에서 아래 방향으로 플렉스랩을 적용한다. |
| flex-wrap: wrap-reverse; | 가로방향 기준에서는 오른쪽에서 왼쪽 방향으로 플렉스랩을 적용한다. 세로방향 기준에서는 아래에서 위 방향으로 플렉스랩을 적용한다. |
문제
1. 현재 프리코드캠프 화면에는 색상 레이아웃이 있다.
2. 행 하나에 너무 많은 아이템이 들어차 있는 상태이다.
3. #box-container 아이디에 flex-wrap: wrap; 을 적용해보자.
원래는 아래와 같은 모양이다.
플렉스랩을 적용하면 아래와 같이
각 플렉스 아이템의 사이즈 기준에 맞춰 콘테이너 하나가 먼저 들어차고,
나머지 아이템은 그 다음 콘테이너에 들어간다.
답변
#box-container {
background: gray;
display: flex;
height: 100%;
flex-wrap: wrap;
}Use the flex-shrink Property to Shrink Items
플렉스 슈링크 사용해보기
설명
지금까지 플렉스 아이템의 패런트(parent, 상위 엘레먼트) 엘레먼트인
플렉스 콘테이너에 대해 여러가지 알아보았다.
하지만 플렉스 아이템 자체에도 유용한 프로퍼티가 몇 가지 있다.
플렉스 슈링크(flex-shrink, 수축) 프로퍼티는
콘테이너 안에 있는 아이템 사이즈 비율을 정한다고 생각하면 편하다.
플렉스 슈링크에는 숫자를 값으로 넣을 수 있는데
1 이 100% 라고 생각하면 되고,
2 가 50% 등으로
숫자가 커질수록 비율은 그만큼 더 줄어든다고 생각하면 된다.
아래에는 동일한 스타일링이 적용된 플렉스 아이템 2 개가
1 개의 플렉스 콘테이너 안에 있는 것이다.
여기에서 빨간색 아이템의
플렉스 슈링크를 2 로 설정하면 아래와 같이 된다.
여기서 다시 빨간색 아이템의
플렉스 슈링크를 3 으로 설정하면 아래와 같이 된다.
문제
1. #box-1 아이디에 플렉스 슈링크를 1 로 설정해보자.
2. #box-2 아이디에 플렉스 슈링크를 2 로 설정해보자.
답변
#box-1 {
background-color: dodgerblue;
width: 100%;
height: 200px;
flex-shrink: 1;
}
#box-2 {
background-color: orangered;
width: 100%;
height: 200px;
flex-shrink: 2;
}Use the flex-grow Property to Expand Items
플렉스 그로우 사용해보기
설명
위에서 살펴본 바와 같이
플렉스 슈링크 (flex-shrink) 의 값을 올릴수록
플렉스 콘테이너 사이즈에 비례하여 줄어든다.
플렉스 그로우 (flex-grow) 는 이와 정반대라고 생각하면 된다.
예를 들어,
플렉스 그로우 값이 1 인 박스에 비해
플렉스 그로우 값이 3인 박스는
콘테이너가 커질수록 그만큼 비례하여 더 커진다.
문제
1. #box-1 과 #box-2 에 플렉스 그로우 프로퍼티를 넣어보자.
2. #box-1 에는 1 을, #box-2 에는 2 를 넣어보자.
그러면 아래와 같이
#box-1 보다 2배 정도 큰 #box-2 가 화면에 나타날 것이다.
답변
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-grow: 1;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-grow: 2;
}Use the flex-basis Property to Set the Initial Size of an Item
플렉스 베이시스 설정하기
설명
플렉스 베이시스 (flex-basis) 프로퍼티는
플렉스 슈링크나 플렉스 그로우의 설정이 적용되기 전에
초기의 기본 사이즈를 설정한다.
이를 설정할 때 사용하는 단위는
px, em, % 등이다.
사이즈를 오토(auto) 로 설정할 경우
콘텐츠의 기존 사이즈가 적용된다.
문제
1. 플렉스 베이시스를 사용하여, 초기의 기본 사이즈를 설정해보자.
2. #box-1 과 #box-2 에 플렉스 베이시스 프로퍼티를 적용해보자.
3. #box-1 은 10em 으로 설정한다.
4. #box-2 는 20em 으로 설정한다.
설정을 마칠 경우,
프리코드캠프 화면에서 아래와 같은 이미지를 확인할 수 있을 것이다.
답변
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-basis: 10em;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-basis: 20em;
}Use the flex Shorthand Property
플렉스 프로퍼티 사용하기
설명
플렉스(flex) 프로퍼티를 사용하면,
지금까지 배운 flex-grow, flex-shrink, flex-basis 를
한꺼번에 설정할 수 있다.
예를 들어,
flex: 1 0 10px; 라는 것은
아래 3가지 항목과 같은 의미를 지닌다.
- flex-grow: 1;
- flex-shrink: 0;
- flex-basis: 10px;
플렉스 프로퍼티의 기본값은
flex: 0 1 auto: 이다.
문제
1. #box-1, #box-2 에 flex 프로퍼티를 추가해보자.
2. #bow-1 에는 flex-grow:2; flex-shrink:2; flex-basis:150px; 과 같은 플렉스 프로퍼티를 추가해보자.
3. #box-2 에는 flex-grow:1, flex-shrink:1; flex-basis:150px 과 같은 플렉스 프로퍼티를 추가해보자.
제대로 설정한다면
아래와 같은 이미지를 확인할 수 있을 것이다.
답변
#box-1 {
background-color: dodgerblue;
flex: 2 2 150px;
height: 200px;
}
#box-2 {
background-color: orangered;
flex: 1 1 150px;
height: 200px;
}Use the order Property to Rearrange Items
플렉스 아이템의 순서 바꿔보기
설명
오더(order, 순서) 프로퍼티를 사용하면
플렉스 콘테이너 안에서
각 플렉스 아이템의 순서를 설정할 수 있다.
이러한 설정 없이, 기본적으로는
HTML 상에 있는 순서대로 화면에 나타나게 된다.
오더 프로퍼티는 숫자로 설정할 수 있고
음수(negative) 숫자도 사용할 수 있다.
문제
1. #box-1, #box-2 에 오더 프로퍼티를 설정해보자.
2. 현재는 아래와 같은 순서로 이미지가 보일 것이다.
3. #box-2 오더 프로퍼티를 2 로 설정하고, #box-1 오더 프로퍼티를 1 로 설정해보자.
아래와 같이 박스의 순서가 바뀌는 것이 보일 것이다.
답변
#box-1 {
background-color: dodgerblue;
order: 2;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
order: 1;
height: 200px;
width: 200px;
}Use the align-self Property
얼라인 셀프 사용해보기
설명
플렉스 아이템에서 알아볼 마지막 프로퍼티는
얼라인 셀프 (align-self) 프로퍼티이다.
이 프로퍼티로 각 아이템이 개별적으로 정렬할 수 있다.
플렉스 아이템에는 플로트(float), 클리어(clear), 버티컬 얼라인 (vertical-align) 등과 같은
일반적으로 정렬하는 기법이 통하지 않기 때문에
얼라인 셀프 프로퍼티를 더욱 유용하게 사용할 수 있다.
align-self 는 align-items 와 같은 값을 받을 수 있지만,
얼라인 셀프가 별도의 값으로 설정된 경우에는
얼라인 아이템의 값을 무시된다.
문제
화면에는 아래와 같은 박스 2개가 보일 것이다.
1. #box-1, #box-2 에 얼라인 셀프 프로퍼티를 설정해보자.
2. #box-1 에는 center
3. #box-2 에는 flex-end 를 설정하자.
설정을 제대로 한다면,
아래와 같이 이미지의 배열이 바뀐 것을 확인할 수 있을 것이다.
답변
#box-1 {
background-color: dodgerblue;
align-self: center;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
align-self: flex-end;
height: 200px;
width: 200px;
}CSS 플렉스 박스를 마치며...
플렉스 콘테이너와 플렉스 아이템의 개념을 이해하는데 조금 힘들었던 것 같다.
특히 콘테이너는 눈에 보이지 않다보니,
더욱 이해하기가 힘들었던 것 같다.
모든 아이템은 콘테이너 안에 있다고 생각을 해야 하고,
어떤 콘테이너에 속해 있는지를 알아야
웹페이지를 구성하는 것이 더 쉬워질 것 같다.
다음은 CSS 그리드에 대해 배워볼 차례이다.
CSS 그리드 확인하러 가기
'freeCodeCamp 프리코드캠프 > 1 반응형 웹 디자인' 카테고리의 다른 글
| 1-7 CSS 그리드 - CSS Grid (0) | 2020.09.16 |
|---|---|
| 1-5 반응형 웹 디자인 원칙 - Responsive Web Design Principles (0) | 2020.07.24 |
| 1-4 접근성 - Applied Accessibility (0) | 2020.07.21 |
| 1-3 시각 디자인 - Applied Visual Design (0) | 2020.07.01 |
| 1-2 CSS (0) | 2020.05.09 |
