잡동사니_로드

Grid 선언 - 부모 요소에 "display : grid" 작성 속성 - grid-template-XXX - rows - 요소의 세로 길이의 길이와 비율 정의 - ex) grid-template-rows : 100px 1fr; - 첫 번째 요소의 세로 길이는 100px, 두 번째 요소는 세로의 나머지 길이 차지 - columns - 요소의 가로 길이와 그 비율 정의 - ex) grid-template-columns : 100px 100px; - 각 요소의 가로 길이는 100px cf1) grid-template-rows/columns는 축약 가능 ex) grid-template : 1fr 1fr / 1fr 2fr(row / column) cf2) repeat(n, width) - grid-templat..

box-shadow - 요소에 그림자 효과를 주려고 할 때 사용 - h-offset v-offset blur spread color - x y 흐린 정도 그림자 사이즈 색상 - h-offset -면 왼쪽으로 치우쳐저 +면 오른쪽으로 치우쳐저 생김 - v-offset -면 위로 그림자가 치우쳐저 +면 위로 그림자가 치우쳐저 생김 - blur 0이면 흐리지 않지만, 숫자가 커질수록 점점 흐려짐 단위는 px - spread 그림자의 사이즈가 커짐 디자이너는 spread 값을 쓰는 것을 좋아하지 않음 - color 그림자의 색상 cf1) 상하좌우로 box shadow를 주고 싶다면 box-shadow : 37px 37px 87px ..., -37px -37px 87px ... 처럼 여러 개를 쓰면 된다. cf2..

animation 1. 선언 A. @keyframes name(애니메이션 로직의 이름){ from { / 처음에 동작할 CSS 코드 } to{ / 마지막의 CSS 코드 } B. @keyframes name(애니메이션 로직의 이름){ 0% { / 처음에 동작할 CSS 코드 } 50%{ // 꼭 50%가 아니여도 상관 X } 100%{ / 마지막의 CSS 코드 } 2. 적용 .classname{ ... animation-name : name(위에서 작성한 애니메이션 이름 작성) animation-duration : 2000ms(2초간 애니메이션 지속) animation-timing-function : ease-in-out(애니메이션 속도) animation-delay : 1000ms; (1초 후 애니메이션 ..

transition property - transition을 적용시킬 속성 - all로 작성하면, 모든 속성에 대해 적용 duration - transition이 얼마 동안 일어나는지를 설정 - 단위 : ms, s(1000ms=1s) timing-function(생략 가능) - 변화의 속도에 대해 지정 - ease-in : 느리게 시작하지만, 나중에 속도 빨라짐 ease-out : 빨리 시작하지만, 나중에 천천히 바뀜 ease-in-out : 느리게 시작한 뒤, 느려지면서 종료 cubic-bezier() : 변화의 속도를 제어하고 싶을 때 - google에 cubiz-bezier 검색한 뒤, 홈페이지에서 제어 가능 delay(생략 가능) - 입력한 시간 뒤에 애니메이션 작동 transition은 자동으로..

background 1. background-color - 배경색을 주고 싶을 때 사용 - hex, rgb, rgba로 색상 표현 2. background-image - 배경으로 이미지를 넣고 싶을 때 사용 - url() : 괄호 안에 이미지 경로 작성 1. 상대 경로 입력 2. unsplash.com - 원하는 이미지 선택 - copy image address 복붙 - ex) background-image : url(" 파일 경로") 3. background-repeat - 배경 이미지의 반복 여부 결정 - repeat(기본값) / no-repeat(이미지 반복 X) 4. background-size - 배경 이미지 크기 조절 - contain(요소 안에 이미지가 원래 비율로 전부 들어갈 수 있도록) ..

typography font-size - 글씨의 크기 - ex) font-size : 16px; - 단위로는 px, em, rem - px : 절대 단위(어디에서도 고정된 단위) - em : 상대 단위 / 부모 요소의 글꼴 크기에 비례함 - rem : 상대 단위 / 최상위 요소(html)의 글꼴 크기에 비례함 cf>주로 px, rem 사용 권장 line-height - 줄간격 - 단위는 font-size와 마찬가지로, px / em / rem 사용 - line-height는 em 주로 사용(em 사용 시 em 생략이 관례) cf> line-height를 아무리 늘려도, 글자는 항상 줄간격의 중간에 존재 - 글을 수직으로 정렬할 때, line-height를 사용하는 경우가 많으니 기억 letter-spac..

flexbox - 선언 방법 - display : flex(inline-flex); inline-flex : inline-block와 비슷하게 움직임 flex : block와 비슷하게 움직임 - 정렬을 원하는 요소의 부모 요소에게 부여 - 가로/세로 정렬 - flex-direction : row/column/row-reverse/column-reverse -flex 사용시 보이지 않는 두 개의 축이 생김 -flex-direction의 값에 따라 축의 형태가 달라짐 - row(0인 부분에서 축이 시작됨) 0 l l l 0------------l---------------->main axis l l cross axis - column 0 l l l 0------------l---------------->cr..

position - 어떤 종류의 position을 사용하는가 - 위 position은 무엇을 기준으로 요소를 위치시키는가 static - 모든 요소의 기본 postion 값 - 가장 일반적인 상태 relative - 기준점 : 본래 요소가 위치했던 자리 - relative도 float와 마찬가지로, 붕 떠 있는 상태가 되지만, 부모 요소와 형제 요소는 relative가 적용된 요소를 기억하고 있음! - 따라서 relative로 이동해도 레이아웃이 무너지지 않음 - ex) div{ position : relative; top : 5px // 아래로 5px 이동! right : 5px // 왼쪽으로 5px 이동! - relative는 반대 방향으로 이동한다 absolute - 기준점 : position이 s..

float A. float를 적용한 요소는 부모 요소의 공중으로 간다! 1. float가 적용된 요소는 부모 요소의 공중으로 감 2. 떠올라서 생긴 빈 부분을 메꾸기 위해 다른 형제 요소가 이동 - 타 요소가 이동해서 생긴 빈 요소는 사라짐 - 즉, 두 요소에 대해 float : left를 적용시키면 제일 위 요소부터 차례대로 왼쪽 위로 간다. B. 요소에 float를 적용시키면 그 요소는 block으로 적용됨 - 즉, float이 적용된 요소에는 width, height 적용 가능 - 개발자 도구의 style -> box model 아래의 필터에서 display 검색 cf> float으로 block 요소가 된 경우에는 width=부모 요소의 width의 100% 가 적용되지 않음 적용 방법 .user-..

박스 모델 - content, padding, border, margin으로 이루어짐 1. content - 내용이 들어있는 상자 - 가로를 width, 세로를 height로 조절 2. padding - content와 테두리(border) 사이의 공간 3. border - 테두리 - border : 1px solid green(굵기 스타일 색상);으로 표현 - border : none - 테두리를 없게 하고 싶을 때 - border-radius : 4px - 모서리 부분이 둥글어짐 : 50% - 테두리가 완전히 원형이 됨 border-top-left-radius : 10px : 테두리의 위쪽의 왼쪽이 둥글어짐 4. margin - 요소와 요소 사이 간격 - margin-top : 10px cf>shor..