markup/css15 Css visibility: hidden, display: none, opacticy: 0️⃣ 개발을 하던중 css에서 dom 요소를 화면에서 보이지 않게 해주는 속성들을 사용하게 될때가 있습니다. visibility, diasplay, opactity를 제어하는 것이 대표적인 방법입니다. 이 요소들 간에 어떤 차이가 있을지 궁금중이 생겨 포스팅을 합니다. layout paint add Event visibility: hidden 0 x display: none x x opacity: 0 0 0 세개의 속성 전부 dom 요소에는 포함이 됩니다. opacity: 0과 visibility: hidden은 화면상에 공간을 차지합니다. 하지만 display: none은 화면에서 공간을 차지하지 않습니다. opacity: 0은 eventHandler를 등록할 수 있지만 visibility: hidden은 .. 2022. 4. 5. Css scroll snap 😶🌫️ 마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다. 이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!! 부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고 자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다. 이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요 위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다.. 2022. 4. 4. 미디어 쿼리 🌱 반응형 웹을 반영하기 위해서 미디어 쿼리를 적용해야 합니다. 아래는 미디어 쿼리의 실사용 예시 입니다. @media screen and (min-width: 200px) { .media-query-div { background-color: black; } } @media screen and (min-width: 400px) { .media-query-div { background-color: green; } } @media screen and (min-width: 600px) { .media-query-div { background-color: blue; } } @media screen and (min-width: 800px) { .media-query-div { background-color: oran.. 2022. 3. 29. scroll-behavior 🌱 css 속성중에 scroll-behavior 속성이 있습니다. 위의 이미지는 scroll-behavior을 적용한것 아래의 이미지는 적용하지 않은 것입니다. scroll-behavior 속성을 적용하면 navigation이나 cssom scroll API에 의해 scroll이 발생했을때의 동작을 정의할 수 있습니다. 아래와 같은 값들을 적용할 수 있습니다. /* Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: revert; scroll-behavior: unset; 부드러운 동작.. 2022. 3. 22. Css progress bar 만들기 css를 이용하여 간단한 progress bar를 만들어 보았다. 이전에 class101 clone을 할때 구현하지 못했었는데 이렇게 쉽게 구현할 수 있는걸 보니 어이가 없을 정도다. css만 가지고 있으면 할 수 있다. 이왕 animation을 이용할거 rotate도 주어 box의 흔들림또한 같이 표현하였다. 시간을 표시해주는 부분은 미세한 ms의 차이로 인해 완벽히 들어맞지는 않는다. 하지만 closure와 setInterval을 이용하여 구현하였다. box 내부의 차오름과 비어짐은 가상요소인 ::after를 이용하였다. 가상 요소인 before와 after는 쓰임새가 참 많아서 좋다 keyframe으로 animation의 이름을 지정하고 그 안에 %가 증가할때마다의 action을 정의해 주었다. c.. 2022. 3. 19. Css margin과 padding의 차이 margin요소의 바깥 여백, padding은 요소의 안쪽 여백을 지정해줄수 있습니다 margin과 padding은 개별요소 들을 설정해줄수도 있고 축약형으로도 사용할 수 있습니다. 아래에 사용예시와 방향에 대한 정보가 같이 있습니다. margin-top: 10px margin-right: 10px margin-bottom: 10px margin-left: 10px padding-top: 10px padding-right: 10pxm padding-bottom: 10px padding-left: 10px // 상 우 하 좌 (시계방향으로 인식하면 편함) margin: 10px 9px 8px 7px padding: 10px 9px 8px 7px // 상,하 좌,우 margin: 10px 9px paddin.. 2022. 3. 19. 이전 1 2 3 다음
