CSS - 4. 레이아웃 활용
Flex
-
Container에 부여하는 속성
-
display: flex
-
flex-direction(정렬 방향): row(default), row-reverse, column, column-reverse
-
flex-wrap: nowrap(default), wrap(container보다 아이템들의 크기 합이 더 크면 줄바꿈), wrap-reverse
-
flex-flow(flex-direction과 flex-wrap을 간략히 한 속성)
-
justify-content(가로선 상에서의 정렬)
-
flex-start(컨테이너의 왼쪽으로 정렬)
-
flex-end(컨테이너의 오른쪽으로 정렬)
-
center(가운데로 정렬)
-
space-between(요소들 사이에 동일한 간격)
-
space-around(요소들 주위에 동일한 간격)
-
-
align-items(세로선 상에서의 정렬)
-
stretch(default - 컨테이너에 맞도록 늘임)
-
flex-start(컨테이너 꼭대기로 정렬)
-
flex-end(컨테이너 바닥으로 정렬)
-
center(컨테이너 세로선 상의 가운데로 정렬)
-
baseline(컨테이너 시작 위치에 정렬)
-
-
align-content(세로선 상에 여분의 공간이 있는 경우 flex Container 사이의 간격을 조절)
-
flex-start(여러 줄들을 컨테이너의 꼭대기에 정렬)
-
flex-end(여러 줄들을 컨테이너의 바닥에 정렬)
-
center(여러 줄들을 세로선 상의 가운데에 정렬)
-
space-between(여러 줄들 사이에 동일한 간격을 둠)
-
space-around(여러 줄들 주위에 동일한 간격을 둠)
-
stretch(여러 줄들을 컨테이너에 맞도록 늘림)
-
-
-
item에 부여하는 속성(선택자에서
.item:nth-child(2){}하면 두번째 item 선택)-
order(item 순서를 지정): 0(default)
-
flex-grow: 0(default), 1(컨테이너 영역을 1/n로 차지)
-
flex-shrink: 1(default), 0(줄어들지 않게 지정)
-
flex-basis(flex방향에 해당되는 엘리먼트 크기 지정): auto
-
flex(flex-grow, flex-shrink, flex-basis 축약)
-
align-self(align-items 값을 무시하고 세로선 상에서 정렬): auto, flex-start, flex-end, center, baseline, stretch
-
flex - holy grail layout
<head>
<style>
.container{
display: flex;
flex-direction: column;
}
.content{
display: flex;
}
nav, aside{
flex-basis: -rem;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<section class="content">
<nav></nav>
<main></main>
<aside></aside>
</section>
<footer></footer>
</div>
</body>
Media query(미디어쿼리)
미디어에 query하여 미디어에 따라 적합한 다른 디자인을 보여준다.
반응형 웹을 만들 때 중요한 역할
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (max-width: 500px) {
<!-- 화면의 크기가 최대 500px일 때 적용(500px 이하일 때 적용) -->
}
@media (min-width: 500px) {
<!-- 화면의 크기가 최소 500px일 때 적용(500px 이상일 때 적용) -->
}
</style>
</head>
Cascading으로 인해 동일한 조건 시 나중에 있는 것을 우선순위
float 기본
이미지 삽입 시 사용하는 기법(레이아웃 잡는 데도 쓰임)
float를 적용하지 않고 싶은 단락에는 style="clear:both;"
다단 만들기(multi-column)
column-count, column-width 이용.
둘 다 이용시 count이상은 나누지 않으면서, column-width 유지함.
column-gap(컬럼 사이의 간격 조정)
column-rule-style(절취선 스타일)
column-rule-width(절취선 두께)
column-rule-color(절취선 색상)
column-span: all(컬럼 적용 하지 않음)
댓글남기기