celine

1. Font-family 1 ) Serif : 각 문자의 가장자리에 작은 획이 있습니다. 2 ) Sans-serif : 깔끔한 선이 있습니다(작은 획이 첨부되지 않음) 3 ) Monospace : 모든 문자는 동일한 고정 폭을 가집니다. - Courier New - Lucida Console - Monaco 2. Font-Style 1) Normal 2) Italic 3) Oblique ✔️ Italic vs oblique Oblique 스타일 글꼴은 일반 스타일의 약간 기울어진 버전입니다. Italic 서예에 더 가깝습니다. 3. Font Size Font 단위는 절대 크기와 상대 크기로 나뉩니다. 1 ) 절대 크기 텍스트를 지정된 크기로 설정합니다. 사용자가 모든 브라우저에서 텍스트 크기를 변경하는..

[CSS] position: sticky - 스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성입니다. - position: sticky; top: 100px; 의 의미는 스크롤을 한 후 position:sticky를 적용한 요소가 스크롤이 되어 보이는 순간, viewport 기준 top: 100px; 위치에 fixed 가 됩니다. - position:sticky를 적용한 요소의 부모요소를 넘어가면 position:sticky를 적용한 요소의 fixed가 풀립니다. - 반드시 top, bottom, left, right 속성 중 하나는 입력을 해줘야 작동을 합니다. 입력 하지 않으면 작동 X - sticky 속성의 경우, 부모 또는 조상 노드에 overflow 설정이 ..

[CSS] - 모든 컨텐츠의 내용을 보여줄 수 없을 때, 디자인적인 측면으로 말 줄임표를 사용합니다. *조건 - 제목 1줄, 내용 3줄까지 노출되며, 영역이 넘어갈 시 말줄임표(...)를 표시합니다. See the Pen Untitled by 현정 (@Celine__509) on CodePen. 1. width를 사용하지 않고 max-width를 사용한 이유는 컨텐츠 내용의 길이가 짧을 수도 있는 상황을 고려함. 2. text-overflow: ellipsis; 한 줄 표출을 할 때, 일정 width를 넘어갔을 경우, 말줄임표를(...) 위해 사용함. 3. white-space:normal 은 자동 줄 바꿈을 위해 사용함. 4. webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정..

[말풍선 모양 스타일을 맞추기 위한 CSS] 1. 사각형과 삼각형 모양을 이용하여 작업을 할 예정입니다. 2. 사각형 div 태그를 사용하며, 삼각형 모양은 가상요소 before와 after를 사용하여 스타일을 적용합니다. See the Pen Untitled by 현정 (@Celine__509) on CodePen.

[css 애니메이션] animation 속성의 하위 속성은 다음과 같습니다. animation-name (en-US) 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다. animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다. animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. 재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것입니다. animation-iteration-count (en-US) 애니메이션이 몇 번 반복될지 ..

[탭 메뉴 클릭시 width가 늘어나는 현상을 해결하기 위한 방법] tab 메뉴 클릭 시 border를 적용하면서 border의 px만큼 늘어나 클릭 시 메뉴가 흔들리는 이슈가 있었습니다. px이 늘어나지 않게 하면서 border를 주기 위한 방법으로 box-shadow를 inset으로 적용하였습니다. box-shadow: 0 0 0 3px inset; .tab { width: 250px; height: 50px; background: yellow; border: 1px solid #333; box-shadow: 0 0 0 3px inset; text-align: center; line-height: 50px; } https://developer.mozilla.org/ko/docs/Web/CSS/box-..