CSS 정리

 

CSS란?

Cascading Style Sheet 의 약자입니다. 여기서 cascading 은 작은 폭포, 종속 등으로 해서되는데 이는 상위요소의  스타일 요소를 자손요소들에게 상속시키는 모습이 폭포수가 내려가는 모습을 닮았다고 합니다.

*우선 순위

Author style -> user style -> browser 

 

선택자  Selectors

* universal 모든 곳

 

tag 태그를 골라냄

 

#id 해당 id를 골라냄

 

.class class를 골라냄

 

:  state을 골라냄

 

[]  속성 attribute를 골라냄

 

CSS 사용

selector{

    꾸미고 싶은 것(color, width 등) : value;  //값//

}

ex)

butten:hover {  // 버튼에 마우스를 올리면 바뀜

    color: blue; 

}

 

더 자세한 정보

html 과 마찬가지로  https://developer.mozilla.org/ko/docs/Web/CSS/Reference에서 확인 가능

연습 사이트 https://flukeout.github.io/로 가능

 

blockline and inline

blockline 태그는 한줄 내리고 (ex) div)

inline 태그 (ex)span) 는 같은 줄에 쓰게 됩니다. 이건 html에서 쓰입니다.

 

css에서는 display를 이용해서 바꿀 수 있습니다. 

 

div{
	display: inline-block; //block tag -> inline 
}
span{
	display: block;   //inline tag -> block
}

inline은 우리가 지정한 크기로 표현이 되지만 block은 지정한 것을 무시합니다.

 

inline은 한줄에 여러개 가능 block은 한 줄에 하나

 

Position

css는 html에서 순서대로 보이거나 크기가 static으로 정해져있습니다.

이걸 position: relative; 을 넣어주어 바꿀 수 있습니다. 대상에서 바꾸어 줍니다.

 

반면 position: absolute; 는 대상을 가까이 있는 상자 기준으로 변경합니다.

 

position: fixed; 는 완전히 상자에서 벗어나 버립니다.

 

position: sticky; 는 스크롤을 내려도 그 상태 그대로 따라오게 됩니다.

 

항상 호환이 되는 것을 확인

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

에서 확인 가능

 

flexbox

float 

이미지를 글 어디에 배치할 것인지 정할 수 있습니다.

float: left   float: center   float: right

 

flex-direction: row; 기본값 value를 바꿔주는 것으로 row-reverse 반대로,  column 원래와 다른 축으로 변경ex x축 y축 

flex-wrap: nowrap; 많아도 한줄로 해줍니다. value가 wrap이면 화면의 크기를 줄이면 다음 줄로 자동적으로 내려갑니다.

 

위 두가지를 한번에 사용하는 것이 flex-flow: directionvalue wrapvalue; 이렇게 위 두가지의 value를 바꾸어주면서 사용가능합니다.

 

justify-content: flex-start; 정렬을 맨앞에서부터 flex-end; 마지막을 화면 끝에서 붙여서 정렬

space-around; 는 아이템들 사이사이에 공간 만들기 화면 처음과 끝도 적용 

반면 space-between;는 화면 처음과 끝도 붙여서 

 

align-item: value;  center;이면 아이템이 있는 줄을 통채로 옮겨줌 

baseline; 은 아이템들의 텍스트가 균등하게 보이도록 줄을 섬

 

 

 

align-content: value;  space-between;이면 3줄이상일 때 가운데 줄이 정확히 가운데 오게 됩니다. 

center;일 때는 모든 줄이 중간에 모입니다.

 

참고 https://css-tricks.com/

CSS-Tricks

flex-grow: number; 

  item들의 속성에 넣어주면 화면을 늘리면 따라서 늘어남 숫자만큼 배수가 됩니다.

flex-shrink: number; 

 작아질 때를 말합니다.

flex-basic: number%;

 위 두가지를 함께 줄어들 때 늘어날 때 퍼센트로 움직이게 됩니다.

 

align-self: value;

하나의 컨테이너에 들어있던 item도 따로 벗어나 변경할 수 있습니다.

 

연습사이트 https://flexboxfroggy.com/#ko

Flexbox Froggy