블럭 요소를 가로로 배치하는 테스트에 관련한 수업이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step05_flex.html</title>
<style>
</style>
</head>
<body>
<div class="container">
<h1>블럭 요소를 가로로 배치하는 테스트</h1>
<div class="wrapper">
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<div class="box">div4</div>
<div class="box">div5</div>
</div>
</div>
</body>
</html>위와 같은 코드로 div를 만들면 아래처럼 세로로 출력이된다.
style을 추가해줘보겠다(잘 보이게하려고..)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step05_flex.html</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
.wrapper{
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1>블럭 요소를 가로로 배치하는 테스트</h1>
<div class="wrapper">
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<div class="box">div4</div>
<div class="box">div5</div>
</div>
</div>
</body>
</html>
원래 세로로 배치 되던 것이 flex를 사용하여 가로로 배치 되었다.
여기서 width를 제거하게 되면 자식요소들은 필요한 만큼만의 width를 자동으로 갖게 된다.
flex-direction을 통해 오른쪽을 기준으로 배치시킬수도 있다.
flex-direction의 column과 column-reverse를 사용하면 아래와 같다.
flex-wrap의 특징은 아래와 같다.
정렬의 관한 기능인 flex-start
flex-start, flex-end, center, space-between, space-around와 space-evenly가 있다.
space-between 은 각 div의 사이를 똑같이 만들어주고
space-around 은 각 div의 주변의 공간을 똑같이 만들어주고
space-evenly는 사이와 주변 공간을 똑같이 만들어 준다.
main축이 가로 또는 세로 에 따라 가로방향으로 정렬될 수도 있고 세로 방향으로 정렬이 될 수도 있다.
여기서 main축은 flex-direction의 속성 값으로 결정이 된다. row 또는 column으로 결정
main축 방향 정렬은 jstify-content를 사용하고
main축에 수직인 방향 정렬은 align-items를 사용한다.
align-items에는 stretch,flex-start, flex-end, center와 baseline 옵션이 있다.
space-evenly는 사용할 때 주의해야한다. 지원하는 브라우저가 제한적이다(엣지 등등)
align-content👉
flex-wrap 속성의 값이 wrap 또는 wrap-revers 이면 main 축을 따라서 아이템이 한줄이 아닌 두줄 이상이 될 수도 있다.
두줄 이상인 경우에 해당 줄을 main축에 수직인 축에 대해서 어떻게 배치할 것인지도 정해야 한다.
옵션으로stretch, flex-start, flex-end, center, space-between 그리고 space-around가 있다.
이 속성은 flex-wrap 속성의 값이 nowrap이면 의미가 없다.
위쪽으로 몰려있게 하고 싶으면 flex-start를 사용하면 된다.
밑에 몰려있게 하고싶으면 flex-end 가운데다가 하고싶으면 center를 사용하면된다.
align-content: space-between은 아래와 같다.
align-content: space-around는 아래와 같다.
'수업내용' 카테고리의 다른 글
| 20230720 CSS3 flex2 (0) | 2023.07.20 |
|---|---|
| 20230719 Andoroid (0) | 2023.07.19 |
| 20230718 Poligon 응용해보기 (0) | 2023.07.18 |
| 20230718 AndroidStudio설치/실행 (0) | 2023.07.18 |
| Lombok 다운로드/설치/적용 (0) | 2023.07.17 |
댓글