구름

🌼 오늘은 CSS의 꽃이라 불리는 Flexbox에 대해 알아보겠습니다. 🌼 1. Flexbox 사용하는 이유 flexbox가 등장하기 전에는 브라우저 상에서 요소들을 배치하기 위해 float 속성을 사용했습니다. float은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float 속성의 값에는 left / none / right가 있습니다. left는 이미지를 왼쪽에 배치하고 나머지 공간에 텍스트를 배치합니다. float은 텍스트와 이미지를 배치하기 위한 속성으로, 텍스트와 이미지가 아닌 요소를 배치하기 위해 float를 사용하는 것은 의도에 맞지 않습니다. 그..

오늘은 CSS position 속성 값에 대해 알아봅시다. 🌻 position이란? CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. position 속성을 사용하여 위치를 지정할 때에는 어느 곳에서부터 얼만큼 떨어지게 할 것인지를 지정해줘야 하므로 top, right, bottom, left 속성과 함께 작성해 줍니다. position의 기본값은 static이고 그 외의 값으로는 relative, absolute, fixed, sticky가 있습니다. 📍 position 값 1. static position 속성의 기본값이며 요소를 일반적인 문서 흐름에 따라 배치합니다.top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 2. re..

프로젝트를 만들면서 자주 쓰였던 CSS 속성들을 정리해 보았습니다. 😊 1. 커서가 요소 위에 있을 때 속성값 변경 웹페이지를 이용할 때 사용자가 현재 어떤 요소를 바라보고 있는지 알 수 있도록 하는 것은 UX(사용자 인터렉션)에서 중요한 부분입니다. 사용자의 커서가 텍스트, 버튼, 링크 등을 가리킬 때 색상을 다르게 지정해 준다든지, 크기가 커지도록 한다든지 등 변화를 주면 사용자의 웹페이지 이용에 대한 만족감을 높일 수 있습니다. :hover :hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다. 📝 예제 button { color: black; transition: color .5s..

🤷🏻‍♀️ CSS 란? : Cascading style sheets 의 약어로, 브라우저에서 웹 페이지가 표시되는 방식을 제어하는 선언적 언어입니다. 쉽게 말하자면 웹 페이지를 스타일링해주는 언어라고 할 수 있죠. CSS는 HTML 및 JavaScript 와 함께 세 가지 핵심 웹 기술 중 하나입니다. CSS는 일반적으로 HTML 요소의 스타일을 지정하지만 SVG 또는 XML 과 같은 다른 마크업 언어와 함께 사용할 수도 있습니다. Cascading Cascading의 사전적 의미는 "폭포같은, 계속되는, 연속적인" 으로, 하나의 태그에 대해서 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 스타일이 결정된다는 의미입니다. 우선순위를 결정하는 요소에는 중요도, 명시도, 코드의 순서가 있습니다. 🧚..