오물오물 개발일기

Typography Font-size - 폰트의 크기를 지정합니다. .text{ font-size:18px; } line-height - 줄 간격의 사이즈 - 줄 안의 세로 정중앙에 위치하게 됩니다. - px이나 rem 경우엔 단위를 명시하고 em은 단위를 명시하지 않습니다. .text{ line-height:16px; } .text1{ line-height:1rem; } .text2{ line-height:1.5; } letter-spacing - 글자간을 조절합니다. - px과 em을 사용합니다. - line-height와 달리 em의 경우에도 단위를 명시합니다. .text{ font-size:15px; line-height:1.5; letter-spacing:-.01em; } font-family ..

Media Query - 반응형 웹 (responsive web) 만들기 위해서는 꼭 필요하다. 👈👈 - head안에 를 선언한다. - 분기별 사이즈는 상황에따라 다르다. @media screen and (min-width | max-width : 사이즈){ /* css */ } 💡 반응형 웹 (responsive web) ? - 현재는 여러 디바이스, 디스플레이 사이즈가 있기때문에 사이즈에 따라 맞춰 화면을 보여주는 웹

Flex box - 요소들을 정렬하기 가장 편한 방법 - 정렬을 하기위한 요소의 부모요소에게 선언을 합니다. .flexbox { display : flex; /* flex | inline-flex */ } flex-direction - 가로, 세로 정렬 방향을 정하는 property - main-axis와 cross-axis의 방향이 따라 가게됩니다. - flex-direction : row -> 가로 방향으로 정렬 - flex-direction : row-reverse -> 가로 반대 방향으로 정렬 - flex-direction : column -> 세로 방향으로 정렬 - flex-direction : column-reverse -> 세로 반대 방향으로 정렬 .flexbox { display : fle..

Position - 요소를 원하는 위치에 자유롭게 이동시키기 위한 property - static | relative | absolute | fixed | sticky - top, left, bottom, right 를 사용하며 위치 시킬 수 있습니다. - top & left, top & right, bottom & left, bottom & right 등의 조합으로 사용 - 사용한 property의 교차점 기준으로 계산을 합니다. static - position : static; - 모든 요소의 기본 position relative - position : relative; - 본래 본인 위치를 기준으로 부모요소에서 떠있으나 위치를 기억하며 움직입니다. red green blue .test-contain..

Float - float : left | right | none; - 부모의 요소에서 나와서 떠있게 됩니다. 🛬 - 기본적으로 block를 가지게 됩니다. - 텍스트의 경우엔 float 된 content를 인식하여 자동으로 배치됩니다. - 구성한 레이아웃이 망가질 가능성이 많습니다. https://developer.mozilla.org/ko/docs/Web/CSS/float float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org 🚑 Float - fixed - 부모요소에 over..