🖋
CSS Layout Practice
margin 속성을 사용해서 엘리먼트를 수평 가운데 정렬시킬 수 있습니다.
div {
margin: 0 auto;
}
position: static따로 position을 설정하지 않았을 때의 기본값position: relative주변의 다른 엘리먼트들과의 상대적인 위치를 설정할 수 있게 됩니다.
.class {
position: relative;
}
사진과 같은 모양으로 만들어주세요!
position: absolute주변의 엘리먼트는 무시하고, position이 relative로 설정되어 있는 가장 가까운 상위 엘리먼트만을 기준으로 위치를 설정할 수 있게 됩니다.
.class {
position: absolute;
}
Could not load image
사진과 같은 모양으로 만들어주세요!
flex는 크게 두가지 요소로 구성됩니다.
flex container: flex box 들을 감싸는 요소입니다.flex item: 유연(flexible)하게 늘어나거나 줄어들며 레이아웃을 구성하는 요소들 입니다.
.flex-container {
display: flex;
}
.flex-box {
flex: 1;
}
사진과 같은 모양으로 만들어주세요!
flex-direction 속성을 통해 flex item들이 정렬될 방향(축)을 바꿀 수 있습니다.
.flex-container {
display: flex;
flex-direction: column;
}
사진과 같은 모양으로 만들어주세요!
flex container의
justify-content와 align-items 속성을 통해 flex item들을 정렬시킬 수 있습니다..flex-container {
display: flex;
justify-content: center;
align-items: center;
}
사진과 같은 모양으로 만들어주세요!
Last modified 1yr ago