on
구름에듀_한 눈에 끝내는 HTML5/CSS3 3. css 레이아웃
구름에듀_한 눈에 끝내는 HTML5/CSS3 3. css 레이아웃
inline 태그의 경우
width, height, margin-top, margin-bottom 속성을 가지지 않는다.
display:inline-block
inline와 block의 요소를 동시에 가진다.
기본적인 쓰임은 inline과 같지만 width, height, margin-top, margin-bottom 속성을 가질 수 있다.
display:none
주로 자바스크립트를 이용해 요소가 나타나거나 사라지게 할 때 사용한다.
position:static (기본 값)
top, right, bottom, left와 같은 좌표 프로퍼티를 사용할 수 없다.
position:relative
상대 위치, 좌표 프로퍼티를 사용해 위치를 이동한다.
원래 위치 기준으로 이동한다. (원래 위치 : position: static이었을 때의 위치)
position:absolute
절대 위치, 부모요소나 조상요소가 relative, absolute, fixed가 선언된 기준으로 작동한다.
부모요소나 조상요소에 해당 값이 없으면 를 기준으로 위치가 정해진다.
position:fixed
보이는 화면 기준으로 좌표 프로퍼티를 사용해 위치를 고정한다.
예시 : 따라다니는 메뉴
z-index
수직으로 어떻게 쌓이는지 정하는 프로퍼티
값은 숫자로 표현, 숫자가 클수록 전면에 출력된다.
static을 제외하고 사용할 수 있다.
+
stacking context (쌓임 맥락)
자식 요소의 z-index는 부모 요소 안에서만 의미를 가짐
부모 요소가 가지고 있는 z-index 값이 낮으면 자식의 z-index 값이 높아도 부모의 쌓임 순서를 따른다. (부모 요소들끼리 쌓일 때)
display:flex
flexbox는 기본적으로 가로 혹은 세로로 정해둔 방향을 기준으로 프로퍼티를 정렬한다.
요소들을 띄엄띄엄 일정한 간격으로 배치하거나 요소들을 꽉 채워 배치하는 등 다양하게 레이아웃을 구현 할 수 있다.
부모요소:flex container
부모요소에 사용할 수 있는 프로퍼티
flex-direction
flex item이 배치될 기본 방향을 정할 수 있다.
기본 값 : row(가로 정렬)
column (세로 정렬)
row-reserve (가로 역정렬)
column-reserve (세로 역정렬)
flex-wrap
일반적으로 한 줄에 들어가도록, flex item이 여러줄에 걸쳐지지 않도록 정렬한다.
row는 아래로 넘어가고
column은 오른쪽으로 넘어간다
+
설정하지 않았을 때 (flex-wrap: nowrap 기본 값)
설정하지 않았을 때 : 내용이 넘어가면 그 요소는 제자리에 있고 크기만 늘어남
설정했을 때
내용이 넘어가면 그 요소가 통째로 다음 줄로 내려감
설정했을 때 : 내용이 넘어가면 그 요소가 통째로 다음 줄로 내려감
flex-flow를 사용해서 한번에 쓸 수도 있다.
flex-flow:(direction) (wrap);
flex-flow:row wrap;
justify-content
정해진 방향에서 flex-item들을 어떻게 정렬할지를 결정한다.
row일 때
justify-content: flex-start 왼쪽 끝 정렬
justify-content: center 가운데 정렬
justify-content: flex-end 오른쪽 끝 정렬
column일 때
justify-content: flex-start 위쪽 끝 정렬
justify-content: center 가운데 정렬
justify-content: flex-end 아래쪽 끝 정렬
justify-content: space-between 양끝 맞춤(양끝에 있는 요소에 좌우 마진이 있음)
justify-content: space-around 마진까지 포함해서 양끝 마침(양끝에 있는 요소에 좌우 마진이 있음)
align-items
align-content
자식요소:flex item
flex
flex-grow
flex-shrink
flex-basis
order
from http://2021bong.tistory.com/60 by ccl(A) rewrite - 2021-10-05 11:27:42