CSS : cascading stype sheet
selectors
| selector | 방법 |
|---|---|
| universal | * |
| type | Tag |
| id | #id |
| class | .class |
| attribute | [] |
universal
* {
color: green;
}type
li {
color: blue;
}id
#special {
color: pink;
}class
.red {
background:yellow;
}attribute
a[href^="naver"] {
color: green;
}a tag 중에 href 속성중 naver로 시작하는 것
css종류
width : 너비
height : 높이
padding : 컨텐츠 안의 공간
margin : 컨텐츠 밖의 공간
background : 배경색
border-width
border-style
border-color
border: 2px dashed red : 줄여서 가능
display : inline, inline-block, block
position :
- static : 기본
- relative : 원래있어야 하는 위치에서 옮겨짐
- absolute: 속해있는 상자에서 옮겨짐
- fixed : 윈도우 level에서 옮겨짐
- sticky : 원래 있어야 하는자리에서 고정
flexbox
container 를 꾸밀수 있는 아이들
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
item 을 꾸밀수 있는 아이들
- order
- flex-grow :늘어나는 설정
- flex-shrink : 줄어드는 설정
- flex-basis: auto
flex-basis : 60%, auto - align-self : center
display:flex;
: flex박스 설정!
flex-direction: row;
:item 방향설정
: row, column, row-reverse, column-reverse
flex-wrap: nowrap, wrap;
: item이 많아지면 다음으로 넘길지 결정
: nowrap -> item을 줄이고 넘기지 않음
: wrap -> 다음줄로 넘김
flex-flow: column nowrap
위 두개를 하나로 세팅
justify-content :flex-start;
중심축에서 아이템을 어떻게 배치 할것인지
: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items : baseline
반대축에서 아이템 배치
align-content:
border : 1px solid black;
media quories
요즘은 미디어 쿼리가 사이즈가 정해져 있지 않다
그래도 대충 정리해보면
mobile : 320px~480px
tablet : 768px~1024px
desktop : 1024px~
@media screen and (min-width: 800px) {
.container {
width: 50%;
}
}