학습 목표
- 다양한 CSS 셀렉터 규칙을 이해할 수 있습니다.
- 레이아웃을 위한 HTML을 만들 수 있습니다.
Flex
Flex 메서드
- 얼마만큼 늘릴 것인가? : flex-grow
- 플랙스를 줄일수 있을것인가? : flex-shrink
- 얼마만큼의 크기를 갖는가?: flex-basis
- 한번에 입력 : flex
- 수평 정렬: justify-content
- 수직 정렬: align-items
- 방향:flex-direction
- flex요소의 순서를 지정: order
- 지정된 align-items 무시하고 새로선상에서 새롭게 정렬: align-self
- 한줄 또는 여러 줄로 정렬:flex-wrap
- flex-direction + flex-wrap : flex-flow
Atomic 방법론
클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법을 Atomic CSS 방법론이라고 합니다.
예를 들어
<div class="w70 h40">.w70{ width: 70%; }
.h40{height: 40%; }와 같이 클래스 1개에 기능1개를 넣어 요소에 여러 클래스를 넣는 방법입니다.
레이아웃 리셋
<HTML>과 <body>태그에 각각 디폴트로 적용된 기본 스타일링 때문에 margin, border, padding등 미쳐 여백을 고려하지 못하였을때에 발생하는 문제를 해결해야 합니다. 즉 기존의 역백을 고려하지 않는 셋팅을 지우고 고려하는 새로운 셋팅을 설정해야 합니다.
*{
box-sizing:border-box;
} //여백도 고려하여 계산
body{
margin:0;
padding:0;
} //기존의 기본 설정 초기화(여백x)display:flex
부모 박스 요소에 display:flex를 적용하여 자식 박스들을 flex형식으로 배치시킬 것을 결정합니다.
또한 다양한 flex메서드로 flex 요소들의 방향, 채우기, 크기 등을 설정할 수 있습니다.
# outer{
display: flex;
border: 1px dotted red;
padding: 10px;
}
.box{
border: 1px solid green;
padding: 10px;
}
flex-direction
자식인 flex요소들이 어느 방향으로 쌓일지 정하는 메서드입니다.
row(기본값) : 좌에서 우로 쌓입니다.row-reverse: 우에서 좌로 쌓입니다.column: 위에서 아래로 쌓입니다.column-reverse: 아래에서 위로 쌓입니다.
flex-grow, flex-shrink, flex-basis
flex-grow
남는 여백을 어느 비율을 만큼이나 차지할지 입력합니다. 값이 0일땐 기본 크기 만큼 차지하지만 1이상일때 남는 여백을 다른 flex요소의 flex-grow와 비율계싼하여 나눠갖습니다.
0: 확장x1이상: 여백을1이상/n 비율로 확장해서 가집니다.
flex-shrink
컨텐츠의 크기가 flex-basis보다 작을때 축소할지 여부를 결정합니다.
0: 축소x1이상: 축소o
flex-basis
flex요소가 가지는 기본 크기를 지정합니다. flex-shirnk가 0이고 컨텐츠의 크기가 flex 크기보다 작을때 flex-basis만큼 차지합니다. flex-shrink가 0이 아니거나 width > flex-basis보다 클땐 적용되지 않습니다.
- px, pt, em, rem, %등의 단위도 가능합니다.
flex
박스 모델이나 텍스트와 같이 각각 세부사항들을 일일이 지정하지 않고 한번에 지정하는것이 가능합니다.
flex:flex-growflex-shrinkflex-basis
justify-content
부모 박스에 justify-content속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있습니다.
flex-start: 시작 위치로 정렬flex-end: 끝 위치로 정렬center: 중앙으로 정렬space-between: 전체를 n등분하여 정렬(크기는 그대로, 양 끝 여백x)space-around: 전체를 균일하게 정렬(크기는 그대로, 양 끝 여백o)
align-items
부모 박스에 align-items속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있습니다.
flex-start: 위로 정렬합니다.flex-end: 아래로 정렬합니다.center: 중앙으로 정렬합니다.stretch: 부모 크기에 맞춰 위, 아래로 잡아 늘립니다.baselinke: 기준선에 맞춰 정렬합니다.
order
요소의 위치를 수정할때 사용됩니다. 상대적인 값을 가지나 요소를 앞이나 뒤로 보낼 수 도 있습니다.
-1: 해당 요소를 맨 앞번 순서로 이동시킵니다.0(기본값) : 요소를 현재 위치에 그대로 둡니다.1: 요소를 맨 뒤로 이동 시킵니다.
flex-wrap
Flex 컨테이너에서 flex요소를 한 줄로 표시할지 또는 여러행으로 나누어서 복수의 행을 표시할지 여부를 지정합니다.
wrap: 여러줄로 줄바꿈을 합니다.nowrap: 줄바꿈을 하지 않습니다.wrap-reverse: 줄바꿈을 하지만 항목의 순서가 역방향이 됩니다.
flex-flow
flex메서드와 마찬가지로 자주 사용하는 두 메서드를 합쳐 하나의 메서드로 만든 메서드입니다.
flex-direction과 flex-wrap을 합쳤으며 두 메서드의 값을 모두 사용할 수 있습니다.
flex-flow:flex-directionflex-wrap
와이어 프레임(Wireframe)
웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 에니메이션, 사용자 ㅔ스트 같은 스타일링 요소나 UX를 판단하는 것이 아닙니다.
