레이아웃
구성 요소를 공간에 효과적으로 배열하는 일
(웹 요소를 올바른 장소에 배치하는 기술)
-일반적 문서 흐름, display속성, 플렉스박스, 그리드 레이아웃, float속성, position속성
플렉스박스
행, 열을 주축으로 하여 웹 요소를 배치,정렬하는 1차원 레이아웃 방식
플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소
플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소
display:flex;
*주축의 기본값은 가로방향임*
<글자의 위치 자유자재로 이동하게 하기 위한 목적>
class명 뒤에 띄어쓰기 하고 flex해도 됨
<title>플렉스박스 레이아웃</title>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
}
ul{
display: flex;
padding: 0;
list-style-type: none;
height: 200px;
flex-direction:row;
/*행 열*/
flex-wrap:wrap;
flex-flow: row wrap;
/*direction, wrap을 flow로 동시에 주기 가능함*/
/*flex는 화면 모양이 변했을 때의 상황 결정*/
justify-content: center;
/*정렬방식(가운데 정렬)*/
align-items: center;
/*글자를 어디에 둘지
align item 할 때는 space 쓰지 않는다.*/
}
li:nth-child(3){
align-self: flex-start;
}
li{
background-color:red;
}
li:nth-child(2n){
background-color: green;
}
li:nth-child(2){
flex-grow: 1;
/*크기 결정함 기본값은 0
반대는 felx-shrink*/
}
li:nth-child(2n-1){
flex-basis: 200px;
/*가로 길이 결정*/
flex: 1 1 120px;
/*grow shrink 너비
flex item은 flex container가 아니다
따라서 li 안에 p태그 넣으면 그 값은 flex적용 안된다.*/
}
</style>
</head>
<body>
<h2>유노코딩이 목격한 동물들</h2>
<ul>
<li>물오리</li>
<li>물까치</li>
<li>고라니</li>
<li>누룩뱀</li>
<li>너구리</li>
</ul>
</body>
</html>
'Front-end > html,css,javascript' 카테고리의 다른 글
| [JS]기본 문법 (0) | 2023.09.28 |
|---|---|
| [JS]기초개념 (0) | 2023.09.28 |
| [CSS] CSS 기초(3) (0) | 2023.09.15 |
| [CSS] CSS기초(2) (0) | 2023.09.15 |
| [CSS] CSS기초(1) (0) | 2023.09.13 |
