> block element 를 한 줄에 (가로로) 나열하기
div 의 display 기본 설정 값은 block , block element 는 element 를 따로 작성하면 새로운 줄에 표시됨
그런데 한 줄에 나열하고 싶다면?
display (css property) 를 inline-block 으로 설정
→ display:inline-block;
inline 으로 설정하면 크기 (width, height) 가 적용되지 않음
inline-block 으로 설정하면 크기 (width, height) 설정이 그대로 적용됨
* table 로 코드를 작성하는 경우도 간혹 있음
<head>
<style>
.item{
border:2px solid green;
background-color:lightseagreen;
padding:15px;
width:200px;
height:100px;
display:inline-block;
}
</style>
</head>
<body>
<div class="item">this</div>
<div class="item">is</div>
<div class="item">example</div>
</body>
> flexbox
<head>
<style>
.item{
background-color: darkgray;
font-weight: bold;
font-size: 32px;
}
.item:nth-child(2n){
background-color: chocolate;
}
.container{
display:flex;
background-color:khaki;
height:300px;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
<div class="item" id="item3">3</div>
<div class="item" id="item4">4</div>
<div class="item" id="item5">5</div>
</div>
</body>
flex container: display 값이 flex 로 설정된 요소 → display:flex;
flex item: flex container 의 자식 요소들
flex item 들은 flex container 의 main 축 기준으로 배치됨
* main 축↓ (기본값은 가로)
* flex item 은 가장 높은 높이를 기준으로 통일됨
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
↑왼쪽은 flex container 로 설정될 수 있는 property (ex. display) / 오른쪽은 flex item 으로 설정될 수 있는 property (ex. order)
1. justify-content : main 축 기준으로 item 을 배치하는 방법을 정의함
<style>
#container1{
justify-content:flex-start;
}
#container2{
justify-content:flex-end;
}
#container3{
justify-content:center;
}
#container4{
justify-content:space-between;
}
#container5{
justify-content:space-around;
}
#container6{
justify-content:space-evenly;
}
</style>
2. align-items
<style>
#container1{
align-items:stretch;
}
#container2{
align-items:flex-start;
}
#container3{
align-items:flex-end;
}
#container4{
align-items:center;
}
#container5{
align-items:baseline;
}
</style>
* 중앙에 배치하기
<head>
<style>
.center{
background-color:black;
color:white;
font-size:32px;
font-weight:bold;
text-align:center;
padding:10px;
width:150px;
}
.container{
background-color:thistle;
margin-top:15px;
height:300px;
}
#div1>.center{
margin:auto;
}
#div1{
display:flex;
}
#div2{
display:flex;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<div class="container" id="div1">
<div class="center" contenteditable="true">center</div>
</div>
<div class="container" id="div2">
<div class="center" contenteditable="true">center</div>
</div>
</body>
3. flex-grow : flex item 이 남은 공간을 얼마나 차지할 것인지 정의
단위 없으며, 여러 개인 경우 비율로 나눠 차지하게 됨
#container1>.item:nth-child(5){
flex-grow:1;
}
#container2>.item:nth-child(4), #container2>.nth-child(5){
flex-grow:1;
}
#container3>.item:nth-child(4){
flex-grow:2;
}
#container3>.itme:nth-child(5){
flex-grow:1;
}
#container4>.item:nth-child(3){
flex-grow:1;
}
4. flex-basis : flex item 이 전체 공간을 얼마나 차지할 것인지 정의 (남은공간X)
#container2>.item{
flex-grow:1;
flex-basis:0;
}
* 한번에 작성하는 flex
flex 로 flex-grow, flex-shrink, flex-basis 를 한번에 작성할 수 있음
#container3>.item{
flex:1;
}
> icon
* 다양한 아이콘을 다운로드 할 수 있는 곳: fontaawesome
회색 아이콘은 유료이며, 링크를 받아서 사용(로그인 필요) 하거나 직접 다운로드 받아 사용할 수 있음
https://fontawesome.com/v5.15/icons?d=gallery&p=2
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
Start for Free - Download - Download Font Awesome Free for the Web 에서 파일 다운로드
다운로드 한 파일 압축풀기 - 작업하던 폴더에 새 폴더(icon) 를 만들고 그 안으로 이동
download 페이지의 Using Web Fonts with CSS 에 있는 코드를 복사해서 입력
경로를 "/your-path-to-fontawesome/css/all.css" 에서 "../icon/css/all.css" 로 변경
사용하고자 하는 아이콘의 html (ex.<i class="fab fa-apple"></i> ) 을 복사하여 body 안에 입력
'course 2021 > HTML\CSS\JS' 카테고리의 다른 글
| day09 - position (0) | 2021.11.05 |
|---|---|
| day07 - list, table (0) | 2021.10.28 |
| day06 - link, pseudo class, combinator (0) | 2021.10.23 |
| day05 - font (0) | 2021.10.22 |
| day04 - box model (0) | 2021.10.20 |
