CSS 정리

Front-end/HTML & CSS

CSS 정리

philo0407 2020. 10. 15. 20:36

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

https://flukeout.github.io/

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번까지만 풀면된다!

화이팅 ㅎㅎ