@ css는 덮어쓴다는 느낌으로 작업해야 한다. 중요한 부분.
@ 자식이 float 되어 있으면 부모는 자식들을 안품고 있는거로 인식.
- 기본 css 적용되는 태그들은 기본 css를 없애주는 것이 좋다. 브라우저마다 기본 css가 다르기 때문.
ex) border : none; , outline : none; 등
- 색상표는 RGB라고 하는데 빨강초록파랑 순으로 앞글자르 딴 것. 이걸 hex표기법이라 한다.
- background : no-repeat;
:: width나 height가 변하면 빈 공간에 이미지가 반복해서 채워지도록 되는데 반복 채워짐을 막는다.
:: 이건 백그라운드 작업시 사용
:: 이거 해도 다른 이미지가 채워지면 이미지용 span을 따로 두고 작업
- background-position : -4px -10px 4px 10px;
:: 앞에 -를 붙이면 왼쪽 위쪽, -가 없으면 오른쪽 아래쪽 으로 width와 height를 줄 수 있다.
- background-image : url( 주소 또는 경로);
:: 해당 주소나 경로에 있는 이미지를 백그라운드에 적용
- background : url(주소 또는 경로) -4px -10px no-repeat; // 위의 3개 코드를 한번에 적용
- text-decoration : none;
:: a 태그의 밑줄 제거
- box-sizing : border-box
:: 컨텐트 사이즈를 margin,border,padding까지 합친 크기로 계산하도록 함
:: *로 지정해서 사용
- box-sizing: content-box
:: 컨텐츠 사이즈를 margin,border,padding을 제외한 컨텐츠 사이즈 크기로 계산하도록 함
:: *로 지정해서 사용
- *{} (에스터레스크)
:: 모든 태그에 속성 지정을 할 수 있다.
- vertical-align :
:: 세로 정렬로 display가 inline이나 inline-block일 경우에만 지정 가능.
- list-style : none
:: ul의 점을 없애줌
- clear : both
:: 위에서 적용된 설정 제거
- 태그 : after or before
:: after는 태그 뒤에 가상 엘리먼트를 적용
:: before는 태그 앞에 가상 엘리먼트를 적용
- @ media screen and (min-width: 700px)
:: 모바일 반응형 코드로 화면 크기가 700픽셀이 넘어가게 되면
내부의 코드가 실행되도록 하는 속성
- display: flex
:: 기본 동작은 자식들의 배치 상태를 inline, inline-block처럼 배치
- flex-direction : row or colum
:: 가로로 배치할지 세로로 배치할지 배치 방향 지정
- flex-direction : row-revers or colum-revers
:: 세로 or 가로로 배치하면서 기존 배치에서 반대로 배치
- flex-wrap : nowrap
:: 인터넷 창이 컨텐츠보다 줄어들었을 경우 밑으로 안떨어지고 overflow됨
:: display:flex 되면 기본 지정됨
- flex-wrap : wrap
:: 인터넷 창이 컨텐츠보다 줄어들었을 경우 내용이 밑으로 떨어짐
- flex-wrap : wrap-revers
:: 떨어지는 순서가 wrap의 반대
- flex : 숫자
:: 기본 값으로 flex-basis : 0; 이 적용됨
:: 전체 여백을 지정한 비율로 나눔
- flex-grow : 숫자
:: 남은 여백을 지정된 숫자 비율로 나누어 가짐
:: 화면이 늘어날 때의 비율을 지정
- flex-shrink : 숫자
:: 남은 여백을 지정된 숫자 비율로 나누어 가짐
:: 화면이 줄어들을 때의 비율을 지정
- flex-basis : 0
:: 전체를 여백으로 치고 컨텐츠를 grow에서 지정한 비율대로 나눔
- flex-basis : auto
:: 전체를 여백으로 치지 않고 grow상태처럼 나눔
- justify-content : flex-start
:: 지금 현재 축 방향으로 위치를 시작지점으로 정렬
- justify-content : flex-end
:: 끝 지점으로 정렬
- justify-content : flex-center
:: 가운데 지점으로 정렬
- justify-content : space-between
:: 각 컨텐츠 사이에 동일한 여백을 부여
- justify-content : space-around
:: space-between에서 양끝에도 여백을 부여
- align-items : stretch
:: justify의 축 반대방향으로 정렬
:: 기본값
- align-items : flex-start
:: 시작지점으로 붙음
- align-items : flex-end
:: 끝 지점으로 붙음
- align-items : center
:: 가운데 지점으로 붙음
- align-content : flex-start
:: flex-wrap: wrap인 상태에서 밑으로 떨어지는 컨텐츠를 시작 지점으로 모아줌
- align-content : flex-end
:: flex-wrap: wrap인 상태에서 밑으로 떨어지는 컨텐츠를 끝 지점으로 모아줌
- align-content : center
:: flex-wrap: wrap인 상태에서 밑으로 떨어지는 컨텐츠를 가운데 지점으로 모아줌
- align-content : space-between
- align-content : space-around