HTML
- 기획서 확인하고 UI 만들어 보기 2023.04.13
- flexbox 2023.03.23
기획서 확인하고 UI 만들어 보기
2023. 4. 13. 17:13
flexbox
2023. 3. 23. 17:06
HTML Flexbox는 웹페이지의 레이아웃을 조정하고 배치하는 데 사용되는 CSS 속성입니다.
Flexbox는 요소를 수평 및 수직으로 정렬하고 공간을 분배하는 데 사용됩니다.
Flexbox를 사용하면 레이아웃을 구성할 때 테이블 레이아웃이나 플로팅 요소와 같은
기존의 CSS 기술보다 더욱 강력하고 직관적인 방법으로 레이아웃을 구성할 수 있습니다.
Flexbox를 이해하기 위해 다음과 같은 기본 개념을 이해해야 합니다.
1. Flex container(플렉스 컨테이너): flexbox를 사용하여 요소를 배치하는 부모 요소입니다.
2. Flex items(플렉스 아이템): 플렉스 컨테이너 내에서 배치되는 자식 요소입니다.
3. Main axis(주 축)와 Cross axis(교차 축): 플렉스 컨테이너 내에서 요소가 배치되는 축입니다. Main axis는 flex-direction 속성에 따라 수평 또는 수직으로 결정됩니다.
4. Flex direction(플렉스 방향): 플렉스 컨테이너에서 플렉스 아이템의 배치 방향을 결정하는 속성입니다.
Flexbox를 사용하여 레이아웃을 구성하려면 먼저 HTML 요소를 작성하고 CSS Flexbox 속성을 적용해야 합니다.
HTML 태그에는 기본적으로 인라인 속성과 블록 속성이 있다
flex 속성을 사용 할려면 display 속성을 flex 로 변경 해주어야 한다.
> 기억합시다!
플렉스 아이템 정렬은 항상 부모 컨테이너에서 조정을 한다 !!!
box-sizing 속성은 요소의 크기를 계산하는 방법을 지정하는 CSS 속성입니다.
><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 내부 스타일 시트 -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: antiquewhite;
}
/*
display: flex; flex 속성을 이용해서 박스 옆에 박스를 사용할 수 있고
원하는대로 배치나 정렬이 가능 하다.
*/
.flex-container{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item {
width: 100px;
height: 100px;
background-color: brown;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item" >item1</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox 박스 연습</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
background-color: brown;
}
/*
flex : 1; <-- 단축형
flex : 1 0 px;
부모 컨테이너 요소에 크기를 1만큼 비율로 차지 하는 속성 , 즉 자식 요소가
2개이면 1 : 1 비율로 크기가 지정된다.
*/
.flex-item {
flex: 1;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">item1</div>
<div class="flex-item">item2</div>
<div class="flex-item">item3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.flex-container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item {
width: 300px;
height: 300px;
border: 1px solid indianred;
border-radius: 30px;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-child {
width: 150px;
height: 150px;
border-radius: 30px;
background-color: bisque;
display: flex;
justify-content: center;
align-items: center;
color: brown;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-child"><span>item child</span> </div>
</div>
</div>
</body>
</html>CSS 가상 선택자 : (콜론) 으로 시작하는 선택자를 가상 선택자라고 합니다.
: nth-child 부모 요소의 자식 요소 중에서 지정한 조건의 n번째 요소를 선택합니다.
:first-child - 부모 요소의 첫 번째 자식 요소일 경우 선택
:last-child - 부모 요소의 마지막 요소를 선택 합니다.
'HTML' 카테고리의 다른 글
| 기획서 확인하고 UI 만들어 보기 (0) | 2023.04.13 |
|---|