[CSS] reset.css란? reset.css 공유 처음 사이트 제작 시 주의 깊게 보시면 내가 설정하지 않은 CSS 속성들이 적용되어 있는 것을 확인하실 수 있습니다.이는 사이트에서 자체적으로 제공하는 기본 스타일(Default Styles) 때문입니다. 브라우저는 사용자 경험을 위해 HTML 요소에 기본적인 스타일(CSS)을 제공합니다.예를 들어, a 태그는 파란색 텍스트와 밑줄 효과가 있으며, h1, h2 같은 헤딩 태그는 크기와 굵기가 다르게 설정됩니다. 또한, 문단 간의 기본적인 margin이나 padding 역시 기본 스타일입니다.이러한 기본 스타일은 사이트 제작 시 대단히 불편하기 때문에 처음에 reset.css로 CSS를 초기화한 후 개발을 진행하게 됩니다.reset.css는 개발자마다 소소하게 다르며 아래 코드는 제가 사용하는 reset... 2024. 11. 25. [CSS] animation에 대해 알아봅시다 CSS의 animation은 단어 그대로 html에 애니메이션을 입힐 수 있는 속성입니다.animation의 활용법은 무궁무진합니다. 가끔 코드팬을 둘러보면 무척 재밌고 유쾌한 코드들이 많이 있습니다시간이 있으실 경우 구글에 “codepen animation”이라고 검색해 보시면 다양한 개성의 코드들을 만나 보실 수 있을 겁니다.실 사용법:marquee 효과: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen. 파도 애니메이션: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) o.. 2024. 11. 22. [CSS] transition에 대해 알아봅시다 transition은 요소의 상태 변화에 따라 부드러운 애니메이션 효과를 제공하는 CSS 속성입니다. animation과 달리, transition은 요소의 상태 변경(예: hover, focus, active 등)에 반응하여 특정 방향으로만 애니메이션을 적용할 수 있다는 특징이 있습니다.실 사용법:바쁘신 분들은 아래 코드팬 코드를 우선적으로 보셔도 됩니다. See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.hover 이벤트에 transition을 주고 싶을 경우 주체가 되는 요소에 transitinon을 주어야 합니다.여기서.. 2024. 11. 21. display:grid 간단 사용법과 grid로 반응형 하는 법 오늘은 저번 flex에 이어 grid를 알아보겠습니다.flex는 1차원(선) 컨텐츠에 적합하고, grid는 2차원(면) 컨텐츠에 적합합니다. flex와 grid가 무엇이 다르냐 여쭤보시면 직관적인 설명으로는 아래 구조를 보여드릴 수 있을 것 같습니다.대부분의 사이트는 flex로 구현할 수 있습니다.그러나 2번째 예시 같은 구조는 반응형까지 고려하였을 때 그리드로 만드는 게 무척 편합니다. 그럼 이어서 알아두면 쓸모 많은 grid에 대해 설명해 드리겠습니다.아래 설명에서 “중요”라고 적은 속성들만 우선 외워두시거나 메모해 두시면 큰 도움이 될 겁니다.실제 사용 예시바쁘신 분들은 아래 CodePen 코드만 보셔도 됩니다!0.25x와 0.5x를 통해 코드창에서 반응형을 체험하실 수 있습니다.Grid 레이아웃 .. 2024. 11. 18. display: flex;에 대해 알아봅시다 오늘은 display: flex;에 대해 알아보겠습니다.최종적으로는 flex를 통해 display: gird;를 소개해드리는 것이 목표입니다.grid에 관한 설명은 다음 글에서 이어서 하겠습니다.grid를 이해하기 위해서는 먼저 flex를 이해해야합니다.flex는 가로나 세로로 컨텐츠를 배치할 수 있는 CSS 속성입니다.1차원(선)이 flex, 2차원(면)이 gird라고 이해하면 편합니다.그러나 flex-wrap을 사용해서 flex도 면과 같이 사용할 수 있고 grid도 1차원적으로만 사용할 수 있기 때문에 정확한 설명은 아닙니다.flex 이전에는 float라는 속성을 사용했습니다.float: right; float: left;를 사용해서 컨텐츠를 좌에서 우로, 우에서 좌로 흐를 수 있도록 했었지요.가끔.. 2024. 11. 17. 스크롤 바를 변경하거나 안 보이게 하는 코드 앱을 보면 스크롤 효과는 대부분 보이지 않게 처리합니다.대신 UI로 컨텐츠가 더 있음을 암시하는 방법이 더 선호되는 것 같습니다. (특히 가로 스크롤은 대부분 보이지 않게 처리하지요.)물론 케바케이지만 스크롤 바가 이쁘지 않거나 거추장스러워서 빼고 싶어 하는 디자이너 분들을 많이 뵈었습니다. 이런 디자이너 분들의 요구에 맞는 코드를 가져왔습니다.앱에 익숙한 요즘 사람들에게 비슷한 사용 환경을 제공하기 위해서 스크롤 바를 변경하거나 보이지 않게 처리하는 코드는 아래를 참고해 주시기 바랍니다.body 태그를 스크롤이 생기는 요소로 치환하면 바로 사용하실 수 있습니다!/* 스크롤 바 변경 */body::-webkit-scrollbar { width: 3px; /*스크롤 바의 너비*/ } body::-webki.. 2024. 11. 14.
