01 자식 요소의 배치방법을 지정하기
컨텐츠에 flex를 사용하면 편리하게 사용할 수 있다.
html 골격
css 편집
section, article > 영역잡아주기
article 옆으로 flex를 이용해서 정렬하기
display: flex; >> 옆으로 나열
display: iline-flex; - in-line 구조
dispaly: flex; - block 구조
flext-direction: column; 세로로 자식을 정렬
flext-direction: 가로로 자식을 정렬
display: flex;
align-item: center;
justify-content: center
article 안 요소 가운데 정렬
flext-direction: column-reverse; 세로로 자식을 반대로정렬
flext-direction: row-reverse; 가로로 자식을 반대로정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 요소의 배치방법을 지정할 수 있다.</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
/* 화면을 전체 다 사용하겠다. */
width: 100%;
height: 100vh;
background-color: lightblue;
}
section{
border: 10px solid blue;
/* 옆으로 나열 flex > block 구조 / inline-flex > in-line구조 */
display: inline-flex;
/* flex-direction: column; */
/* 세로로 자식을 정렬 */
/* flex-direction: row; */
/*가로로 자식을 정렬*/
flex-direction: column-reverse;
/*세로로 반대 정렬 */
/* flex-direction: row-reverse; */
/* 가로로 반대 정렬 */
}
section article{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<main>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
</section>
</main>
</body>
</html>
화면 크기 조절 시 border 밑으로 가게하기
flex-wrap: wrap 자식들의 공간을 그대로 유지시켜줌
flex-direction:row + flex-wrap => flex-flow: row wrap;
검사에서 flex를 클릭하면 미리보기 화면이 나온다.
미리보기 보고 원하는 모양으로 코드를 반영할 수 있다.
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
width: 100%;
height: 100vh;
background-color: lightblue;
}
section{
border: 10px solid blue;
display: flex;
/* flex-direction: row;
flex-wrap: wrap; */
box-sizing: border-box;
flex-flow: row wrap;
/* flex-direction:row + flex-wrap */
}
article{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #000;
}
</style>
</head>
<body>
<main>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</main>
</body>
</html>02 자식요소 정렬하기
flex-flow: row wrap
justify-content: flex-start; - 왼쪽 정렬
justify-content: flex-end; - 오른쪽 정렬
justify-content: center; -가운데정렬
justify-content: space-between; - 자식들을 간격을 띄워서 배치해줌
자식 요소의 좌우 사이 간격을 균일하게 배치하는 명령어
justify-content:space-around; - space-between 과 다르게 앞 뒤에 간격을 넣어준다. padding 대신 넣어줄 수 있음
자식요소의 기본 축 방향으로 주위 간격을 균일하게 배치하는 명령어
justify-content: space-evenly; -앞, 뒤 를 포함하여 모든 간격이 동일하게 떨어진다. padding 대신 사용 가능
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식요소 정렬하기</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
height: 100vh;
width: 100%;
background-color: lightblue;
}
section{
border: 10px solid blue;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
/* justify-content: flex-start; */
/* 자식들을 앞 쪽으로 배치 */
/* justify-content: flex-end; */
/* 자식들을 뒤 쪽으로 배치 */
/* justify-content: center; */
/* 자식들을 가운데로 배치 */
/* justify-content: space-between; */
/* 자식 요소의 좌우 사이 간격을 균일하게 배치하는 명령어 */
/* justify-content:space-around; */
/* 자식요소의 기본 축 방향으로 주위 간격을 균일하게 배치하는 명령어 */
justify-content: space-evenly;
}
article{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #000;
}
</style>
</head>
<body>
<main>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</main>
</body>
</html>'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 47_ 반응형 레이아웃 (0) | 2023.06.26 |
|---|---|
| [JAVASCRIPT] 4. 마우스 오버 효과 (0) | 2023.06.23 |
| 비주얼 스튜디오 코드 45_웹표준) 컨텐츠 (0) | 2023.06.23 |
| [JAVASCRIPT] 자바스크립트 이벤트 연결하기 (0) | 2023.06.22 |
| 비주얼 스튜디오 코드 43_웹 표준) 컨텐츠 (0) | 2023.06.22 |