[CSS] position, flex, media

position을 이용해 요소의 중앙에 배치하기

1.          top:50%; // 부모요소 기준
            left:50%; // 부모요소 기준
            transform: translate(-50%,-50%); // 선택된 요소 기준
입력시 중앙배치 
부모요소기준의 시작점인 50% 한가운데에 요소가 배치된다. 그리고 선택된 요소의 top과 left가 50% -될시 정중앙에 배치된다.

2. top 50% / left 50% / margin-left:50px; /margin-top:100px; // 직접 계산해서 px을 넣어준다.

3. calc() 함수를 사용
calc(50% - 100px) 계산해줌


flex-box 레이아웃
해당 요소말고 부모요소에게 설정, 자식요소의 정렬을 설정할 수 있다.
부모요소에게 주는 속성
1. display : flex;
2. flex-direction : 배치방향 지정
row / column / row-reverse / column-reverse
row . 왼쪽부터 1,2,3 / row-reverse . 오른쪽부터 1,2,3
column . 위부터 1,2,3 / column-reverse . 아래부터 1,2,3

3. flex-wrap : 아이템을 한줄로만 배치할건지 여러줄로 배치할건지 지정
wrap / no-wrap / wrap-reverse
no-wrap : 한줄로만 배치하기에 자식요소에 크기를 지정해도 자동으로 줄어들음

4. flex-flow: row wrap / 한번에 두가지의 속성값을 줄 수 있다.

5. justify-content : 주축방향 아이템 정렬 지정
flex-start[시작점] / flex-end[마지막점] / center[중앙] 
space-around[부모요소를 포함해 요소양쪽에 공간을 주고 정렬함] 
space-evenly[around와 같지만 모든 사이의 공간을 같게지정] 
space-between[아이템과 아이템사이에 공간을 주고 부모요소에 붙임]

flex-direction 속성에 의해 x축 y축으로 바뀜 

6. align-items : 교차축 아이템 정렬 지정 (1줄일때)
flex-start / flex-end / center / strech(디폴트)
row로 준경우 start시 처음위치부터 y축방향으로 부모요소크기 만큼 늘어난다.

7. align-centent : 교차축 아이템 정렬 지정(여러줄일때)[items 사이에있는 공간을 없애줌]
flex-start[시작점] / flex-end[마지막점] / center[중앙] / strech(디폴트
space-around[부모요소를 포함해 요소양쪽에 공간을 주고 정렬함] 
space-evenly[around와 같지만 모든 사이의 공간을 같게지정] 
space-between[아이템과 아이템사이에 공간을 주고 부모요소에 붙임]


자식요소에게 주는 속성
1. order 아이템 배치 순서를 지정
2. align-self 
flex-start / flex-end / center / stretch / baseline

html5 시멘틱 태그
<header> <footer> <section> <nav> <article>
<main>
div 대신 사용하는 느낌으로..  태그 css가능

파비콘 / 웹브라우저에서 아이콘표시(검색해서 사용하면됌)

 

 

media 쿼리
1.
@media all and (min-width:320px) and (max-width:768px) {
스타일 작성(all 위치에 device종류 width320px~width768까지 적용)
}
반응형 웹사이트 / 너비에따라 스타일을 다르게 줄 수 있음.
and다음 띄어쓰기 해줘야함
0~768px (모바일)
769px ~1024px (태블릿, 탭)
1025px~ (웹)

style에 입력시 순서대로 적용 media쿼리는 밑쪽에 입력.

2.
<link rel="stylesheet" href="style.css" media="screen and (min-width:768px)">



css 변수
:root {
--main-bg-color: red;
--big-fong : 24px;
--middle-font : 18px;
}

div {
background:ver(--main-bg-color);
font-size: var(--big-font);
}
지정해놓은 색상이나 폰트사이즈를 변수로 사용가능


css애니메이션
@keyframes 이름{
from{
width:100px;
}
to{
width:200px;
}
}

div{
animation-name: 이름;
animation-duration: 1s;
}



    @keyframes scaleWidth{
            from{
                left:0;
            }
            to{
                left:500px;
            }

        }
        div{
            width:100px;
            height: 100px;
            position: absolute;
            top:100px;
            left:0;
            background-color: red;
            animation-name: scaleWidth; // 애니메이션 선언
            animation-duration: 1s; // 실행시간 1초
            animation-iteration-count: 5; // 5번 반복
            animation-delay: 3s;  // 3초후 시작
            animation-fill-mode: forwards; // 애니메이션이 끝나는곳에 위치[아니면 원레위치로돌아감
         }