- 제작 전 기본적인 틀 세우기
1-1 css 작성 전에도 큰 틀을 만들어 var(적용)하면 편하다.
:root {
/* Color */
--white-color: #fff;
--black-color: #140a00;
--blue-color: #045fd4;
--red-color: #ff0000;
--grey-dark-color: #909090;
--grey-light-color: #e0e0e0;
/* Size */
--spacing: 12px;
--spacing-small: 6px;
--avatar-size: 36px;
/* Font Size */
--font-large: 20px;
--font-regular: 16px;
--font-medium: 14px;
--font-small: 12px;
--font-micro: 10px;
}header {
display: flex;
justify-content: space-between;
padding: var(--spacing);
background-color: var(--black-color);
color: var(--white-color);- section>div>span 순서로 정리하기
2-1. css 적용 시에도 마찬가지
.info .metadata .titleAndButton .title {
font-size: var(--font-medium);
margin-right: var(--spacing);
}- button에 css 적용 시 회색 배경이 나타나는 경우 백그라운드 컬러에 transparent 또는 원하는 색상을 적용한다.
button,
button:focus {
border: none;
cursor: pointer;
outline: none;
background-color: transparent;
}display: flex;
: 뷰포트나 요소의 크기가 동적으로 변하는 반응형 웹에서 사용되는 display 속성
1) 레이아웃 잡는데 주로 사용
2) 상속되지 않음 > 직계 자식에게 적용되는 속성
3) 부모 flex-container + 자식 flex-item
.info .actions button {
display: flex;
flex-direction: column;
font-size: var(--font-small);
color: var(--grey-dark-color);속성
부모 container
- flex-direction
: 주축 설정 row/row-reverse/column/column-reverse- flex-wrap
:nowrap/wrap/wrap-reverse- flew-flow
:flew-direction,flex-wrap; 단축속성- justify-content
: 주축을 기준으로 정렬 flex-start/flex-end/center/space-between/space-around/spase-evenly- align-items
: 아이템이 두 줄 이상일 때, 교차축 기준 정렬 (flew-wrap:warp; 일 때 사용 가능)
stretch/ flex-start/ flex-end/ space-around/ space-between/space-evenly/ center/- gap
: 최신 기술로 flex-item에 margin을 넣어 간격을 설정하던 번거로움을 해결 {gap: row-gap col-gap;}
자식 item
- flex-grow
: 여백 공간이 있을 때 그 공간을 채우다.- flex-basis
: flex-item의 기본 크기를 설정- flex-shrink
: 공간이 작아질 때 어떻게 줄일 것인지 설정한다.
flex-shrink: 1; //기본값
flex-shrink: 0; //flex-basis보다 작지 않게
flex-basis의 값보다 얼마나 작아질 수 있는지를 결정한다.- order
: 순서를 임의로 설정하여 바꿀 수 있다.- z-index
: position과 같이 z-index 속성을 가진다.
Position
static
static으로는 위치 변경을 할 수 없으며 위치에 따라 동작 방식이 달라진다. 평소에는 relativw와 같이 동작하지만 지정한 임계값을 넘으면 fixed와 같이 동작한다.
.player {
position: sticky;
top: 0;
text-align: center;
background-color: var(--black-color);
}MDN static : https://developer.mozilla.org/ko/docs/Web/CSS/position
media
미디어 쿼리: 매체의 종류에 따라 적합한 디자인에 따른 반응형으로 css 디자인 하는 것
@media screen and (min-width: 768px) {
.infoAndUpNext {
flex-direction: row;
}형태: @media(특정한 조건){적용될 태그 {적용될 속성}}
특정한 조건 예시에서 사용된 screen과 and는 또다르게 사용 가능하다.
screen > speech/print/all
and > not/only/,(comma)
ㄴ> Media Queries 문법 추가 설명
- and 연산자 : 어러 미디어 특징들을 하나로 결합함
- , (or) 연산자 : 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임
- not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함
- only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지(참고) 머테리얼 디자인에 대해 공부하고 싶다면 : 사이즈 설정 등 https://material.io/design/layout/understanding-layout.html#layout-anatomy
