css: cascading style sheet
cascading:
author style
↓
user style
↓
browser
(!important : cascading을 끊어내는 거)
selectors
universal *
type Tag
ID #id
Class .class
State :
Attribute []
* {
color: green;
}
li {
color: blue;
}
#id {
color: pink;
.class {
width: 100px;
height: 100px;
background: yellow;
}
button:hover {
color: red;
background: beige;
}
a[href="naver"] {
color:purple;
}padding: content 안에
margin: content 밖에
div와 span에 css을 줄때 span은 내용이 있어야 나타남
display: inline, inline-block, block
position: 기본 값으로 static(=html에 정의된 순서대로 브라우저 상에 자연스럽게 보여지는 것을 말함)
<body>
<article class="container">
<div></div>
<div class="box">i'm box</div>
<div></div>
</article>
</body>
//css
.container{
background: yellow;
left:20px;
top:20px
posistion:static(aritcle은 body 안에 담겨 있기 때문에 자동으 로 왼쪽 위부터 시작)
relative ( left top 적용됨 원래 있어야되는 자리에서 이동함)
absolute ( item이 담겨있는 상자 안에서 이동)
fixed ( window 안에서 이동)
sticky ( 원래 있어야하는 자리에 있으면서 스크롤링 되도 그자리에 있음)
}float: left, center, right (text와 image 배치 용도)
Flexbox: container와 item 따로따로 설정해줘야함
container (display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content)
item(order, flex-grow, flex-shrink, flex, align-self)
중심축 ( 수직 , 수평 에 두냐에 따라 반대 축 결정)
.container {
background:beige;
height: 100vh (부모에 상관없이 다 보여주겠다?)
displayl: flex; (가로로 쭉 정렬 됨)
flex-direction: row(기본 값 왼->오)
row-reverse(오->왼)
column(위->아래)
column-reverse(아래->위)
flex-wrap: wrap;(안하면 item이 아무리 많아져도 한줄에 다 보여주고
설정하면 한줄 아래로 내려가서 보여줌 reverse도 가능)
flex-flow: column nowrap; 한번에 두개 설정 가능
**justify-content** /*main axis에서 배치*/:
flex-start, flex-end, center
(item 순서는 그대로고 덩어리가 왼쪽에 붙어서 시작 가운데 오른쪽에 붙어서 시작을 결정)
space-around, space-evenly, space-between (item들 공간을 갖게 됨)
align-itmes/*반대축에서 item들을 어떻게 할 것인지 결정*/: center , baseline(item중 하나가 변경되어도 baseline에 맞춰서 배치해주는 것)
align-content: 반대축으로 배치 justify-content와 비슷
새로나온 속성은 브라우저 호환 안되는 것들도 있음item의 속성들 알아보기
//html
<body>
<div class = "container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
//css
.container{
padding-top:100px;
background:beige;
height:100vh;
display:flex;
}
.item{
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1 {
background:red;
order: 0(기본값 설정해놓은 상태) 1,2,3 이렇게 하면 item 순서 바꿀 수 있음
flex-grow:0(기본값 상자의 빈 곳을 매꾸려고 하지 않음 고유의 크기 대로) 컨테이너가 점점 커질때 2, 1, 1하면 다른 item보다 2배로 늘어남
flex-shrink:컨테이너가 점점 작아질때
flex-basis: auto (기본값: grow랑 shrink 설정해놓은 대로)
60% 30% 10%라고 설정해놓으면 이 상태로 늘어나고 줄 어들때
align-slef: center 컨테이너에 지정된거에서 벗어나서 item 하나만 특별하게 배치하고 싶다.
