css에서 새로 배운 것이나 헷갈렸던 부분을 깜박하지 않게
cheat sheet처럼 두기위해 올림😛
flex-flow: (flex-direction) (wrap or no-wrap);
flex property ->
/ One value, unitless number: flex-grow /
flex: 2;
/ Two values: flex-grow | flex-shrink /
flex: 2 2; (unitless number)
/ Two values: flex-grow | flex-basis /
flex: 1 30px; (unit number)
/ Three values: flex-grow | flex-shrink | flex-basis /
flex: 2 2 10%;
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
box-shadow property ->
(안으로 생기는 그림자)->
inset 숫자 숫자 색
기본: 왼 위
rem rem black
반대: -오 -아래
-rem -rem black
(바깥에 생기는 그림자)->
px px px ( px ) rgba-color;
오 아래 희미정도 (번짐크기)
-왼 -위
예시 )
box-shadow: 왼쪽과 위 inset 100px 100px ( 블러정도 ) #000000 ,
오른쪽과 아래 inset -100px -100px ( 블러정도 ) #000000;
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
grid:
grid-template-columns: 2fr 1fr;
이런식으로 2대1 / 3대1 비율 맞춰줄수도 있음
grid-template-columns: auto auto auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
(px rem % 단위로 가능)
grid-column: 2 / 4;
grid-row: 1 / 3;
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
white-space:nowrap;
하면 div에서 줄이 넘쳐서 엔터친거처럼 다음 줄로 넘어가는걸 방지.
줄바꾸기없이 한줄!
white-space:pre;
하면 html에 내가 넣은 내용 그대로 띄워쓰기 까지 다 반영해서 그대로 들어감.
중요한건 이거 줄바꾸기없이 한줄!
이건 wrap이 안되서 overflow말그대로div밖으로 넘침
(자동 줄바꾸기가 안되니까 한줄로 쭈욱 밖으로 넘침)
white-space:pre-wrap: pre성질을 그대로 가져가되 박스밖으로 넘칠것
같을땐 자동으로 줄바꾸기해주는 것
pre 와 pre-wrap의 비교는 줄바꾸기가 있냐 없냐임.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
.div .a{
display:block;
background-image: url(/images/mujido-logo.jpg);
background-repeat: no-repeat;
width:200px;
height:100px;
background-size: cover;
}
anchor tag안에 img tag를 넣었더니 계속 anchor가 존재해서 자리를 차지하면서
이미지가 줄어듬. 그래서 a 자체에 백그라운드 이미지 속성을 씀. 근데
여기서 중요한 것은 백그라운드이미지를 쓸때, 블록 형태로 하고, 크기를
지정해주고 background-size:cover라는 걸 통해서 무조건 이미지가 내가
원하는 크기에 알맞게 스스로 shrink하거나 맞춰질수있도록 해야함.
아니면 5퍼센트의 이미지만 보이거나 이럴수있음.
background-size:cover (definition below)
Resize the background image to cover the entire container,
even if it has to stretch the image or cut a little bit off
one of the edges
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
background image로 사진 넣고나서
사진 위치는 백그라운드 포지션으로 잡을수 있음
centet top
center center
center bottom
아니면 퍼센트로 x% y% x는 가로위치 y는 세로위치로 정할수있음
0,0은 left top 100,100은 rigth bottom임
background-position:50% 20%;
background-image:url(./img/shoe-3.png),radial-gradient(#fff,#555);
background-repeat: no-repeat;
background-attachment: fixed;
background-blend-mode:multiply;
그외에 백그라운드 이미지를 쓸때 이미지url뒤에 comma를 쓴뒤 radial-gradient같이
사진 배경색을 바꿀수 있고 attachment-fixed 를 쓰면 백그라운드 사진은
스크롤 내리면 고정되어있는 디자인 가능 그리고 백그라운드색위에 색을 덧입히는
느낌으로 블렌드모드 multiply사용가능
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
ul li 이렇게 부모 자식이 뚜렷한 상황이거나 아니면 밑에 div p 태그처럼
블록요소일때 spacing이라는 이름의 css class를 만들어줘서 첫번째것혹은
첫번째 두번째 세번쨰는 제외시키고 나머지 자식들한테 효과를 넣을때 쓸수있음.
html ex)
<ul class=”container spacing”>
<li> blah blah blah blah</li>
<li> blah blah blah blah</li>
<li> blah blah blah blah</li>
<li> blah blah blah blah</li>
<li> blah blah blah blah</li>
</ul>
css ex)
.spacing> * + * + * + * {
border-bottom:1px solid red;
}별이 4개라서 4번째거 부터 스타일 적용됨. 별이 2개라면 2번째거부터 적용됨
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
image밑에 그림자를 주고싶을때 쓰는 방법:
:: after 를 사용해서 밑에 padding을 부모의 크기 100프로를 받아온다
padding:100% 100% 0 0; 이렇게 하면 위의 이미지 크기와 똑같은 상자가 아래에 생김
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
각각 아이템이 하나씩 split하기 바랄때 :
아이템을 스플릿이라는 div안에 넣고 이것들을 플렉스wrap으로 해두고
스플릿 > * 안에 각각 전체 아이템들에게 flex-basis를 주고 min-width를 준다
.split{
display:flex;
flex-wrap:wrap;
gap:2rem;
justify-content: center;
}
.split > * {
flex-basis:30%;
min-width:15em;
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
< p >, < div > 에 같은 width 값을 부여한다. 부모에 width 를 주고 < p > , < div >의 width 는 100%로 설정한다. p와 div를 부모 너비만큼의 50%를 이동하는 경우
부모의 50% 즉 부모가 100px이었다면, 이미지가 left: 50px으로 이동했다는 뜻. div의
왼쪽시작선이 50px에서 시작. 그래서 div가 차지하는 영역은 50%+20px(div크기). 한가운데 지점에서 이미지가 시작하고 20px만큼 차지했으니 div의 중심점이 한가운데가 아님.
다시 div의 반(20px의 반)만큼 왼쪽으로 이동시키면 이제 정확히 반에 위치.
margin-left: -10px;
