Display
span과 div에 대해서
span은 기본적으로 inline이며 div는 블록이다
div는 한줄을 다 먹는다,
하지만 이들의 속성(inline, box)을 display로 바꿀 수 있다
속성중에서는 inline-box라고 있는데, 기본적으로 box의 속성을 갖고 있대, 가로로 나열된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Block level -->
<div>1</div>
<div>2</div>
<div>3</div>
<!-- Inline level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>div, span{
width: 80px;
height: 80px;
margin: 20px;
}
div {
background: pink;
display: inline-block;
}
span {
background: #fff9c4;
display: block;
}position
static, relative, absolute, fixed, static
기본적으로 static의 속성을 지닌다.
relatve : 본래 이 box가 있어야 할 곳에서 이동 (가장 직관적이다)
absolute: 내가 담겨 있는 상자에서 이동
(일 단 위 두개만 알아도 될 듯하다)
fixed : 웹 페이지 내에서 이동
sticky : 스크롤 내애서 항상 붙어있음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<artitle class = "container">
<div></div>
<div class="box">I'm box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</body>
</html>div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: pink;
}
.container {
background: #e1bee7;
left : 20px;
top: 20px;
position: relative;
}
.box {
background: #fff9c4;
left : 20px;
top: 20px;
position: fixed;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/position
position
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
developer.mozilla.org
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
맛ㅇ쪙 저녁ㅊ묵기 : 14번까지만 풀면됨!
FlexBox
CSS의 꽃
vh vs % :
vh(view height) 현재 보는 화면에서의 % (요걸루하자)
% 내 부모에서 적용된 것의 %.. body는 100%가 아니고 html의 %를 따른다.
Emmet 사용하기
css.container>div.item.item${$}*10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>.container {
background: beige;
height: 100vh;
display: flex;
1flex-direction: column;
flex-direction: row;
1flex-wrap: wrap;
1flex-flow: column-reverse nowrap;
justify-content: space-evenly;
align-items: center;
}
.item {
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1 {
background: #ef9a9a;
}
.item2 {
background: #b39ddb;
}
.item3 {
background: #81d4fa;
}
.item4 {
background: #c5e1a5;
}
.item5 {
background: #fff59d;
}
.item6 {
background: #ffcc80;
}
flex-direction : 가로로 늘여 놓거나(row), 세로로 늘여 놓는다.(column)
기본적으로 row이다. column도 있으며 row-reverse로 반대로 배치 가능
flex-wrap : 상자를 찌그릴찌(nowrap : 기본값), 아니면 밑으로 재배치할지(wrap).이다.
flex-flow: 위 두개를 합쳐 놓은 것. ex) flex-flow : column-revse wrap-reverse
/* main axis */
justify-content: (flex-start, flex-end, center, space-{around, evenly, between}) : 얘를 사용하자!!
flex-direction과 대비된다, flex-end할 시, 좌우가 뒤바뀌지 않는다.
space-around , 박스를 스페이스로 둘러싸게
space-evenly, 똑같은 간격
space-between, item 끝은 맞춘다
/* cross(sub) axis */
align-items: (center, flex-end) (flex-start: 기본값)
align-items
The CSS align-items property sets the align-self value on all direct children as a group.
developer.mozilla.org
수직에서 중앙으로 가..
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
개구리 ㅅ끼 문제 ! 13번까지만 풀면된다!
화이팅 ㅎㅎ
'Front-end > HTML & CSS' 카테고리의 다른 글
| HTML 중 중요한것.. input태그의 disabled 속성 (0) | 2021.03.07 |
|---|---|
| 오랜만에 HTML & CSS (0) | 2021.03.01 |
hi hello... World >< 가장 아름다운 하나의 해답이 존재한다
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
