markup/css

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은 ..

Css scroll snap 😶‍🌫️

마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다. 이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!! 부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고 자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다. 이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요 위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다..

미디어 쿼리 🌱

반응형 웹을 반영하기 위해서 미디어 쿼리를 적용해야 합니다. 아래는 미디어 쿼리의 실사용 예시 입니다. @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..

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; 부드러운 동작..

Css progress bar 만들기

css를 이용하여 간단한 progress bar를 만들어 보았다. 이전에 class101 clone을 할때 구현하지 못했었는데 이렇게 쉽게 구현할 수 있는걸 보니 어이가 없을 정도다. css만 가지고 있으면 할 수 있다. 이왕 animation을 이용할거 rotate도 주어 box의 흔들림또한 같이 표현하였다. 시간을 표시해주는 부분은 미세한 ms의 차이로 인해 완벽히 들어맞지는 않는다. 하지만 closure와 setInterval을 이용하여 구현하였다. box 내부의 차오름과 비어짐은 가상요소인 ::after를 이용하였다. 가상 요소인 before와 after는 쓰임새가 참 많아서 좋다 keyframe으로 animation의 이름을 지정하고 그 안에 %가 증가할때마다의 action을 정의해 주었다. c..

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..

css align-content, align-items, align-self

css속성중 위의 3개 속성들은 flexbox 혹은 grid에서 컨텐츠 들을 정렬시킬때 사용합니다. align-self grid나 flex item들의 정렬위치를 제어할 수 있습니다. 적용할 수 있는 value 값들은 아래와 같습니다. /* Keyword values */ align-self: auto; align-self: normal; /* Positional alignment */ align-self: center; align-self: start; align-self: end; align-self: self-start; align-self: self-end; align-self: flex-start; align-self: flex-end; /* Baseline alignment */ align-s..

css vertical-align

vertical-align 속성은 inline 요소나 table-cell box의 수직정렬을 제어할 수 있습니다. 주로 사용하는 것들만 알아보겠습니다. vertical-algin: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom; baseline => 부모의 baseline에 맞추어서 inline 요소를 수직정렬 시켜줍니다. top => 부모의 top에 맞추어서 inline 요소를 수직정렬 시켜줍니다. middle => 부모의 baseline + x-height/2 에 맞추어서 inline 요소를 수직정렬 시켜줍니다. 정확히 중앙은 아닐수 있겠네요 bottom => 부모의 bottom에 맞추어서 inline 요소를..

css white-space

css white-space 속성은 연속된 빈칸들에 대한 제어와 개행 문자에 대한 처리를 어떻게 할지에 대한 속성입니다. white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; 하나씩 설명하겠습니다. white-space 속성은 필요할때마다 문서 참고하여서 적용하시는게 건강에 좋을것 같습니다. normal 연속된 공백을 하나로 합칩니다. 개행문자도 다른 띄어쓰기들과 동일하게 처리합니다. 줄이 길어지면 줄바꿈을 해줍니다. nowrap 연속된 공백을 합치고, 줄바꿈은 태그로만 가능합니다.. 부모요소의 크기또한 무시합니다. pre..

css float

css float은 설정된 요소가 흐름을 빠져나와서 다른 요소들이 자기 컨테이너 주위에 배치되는 것을 제어할 수 있습니다. 말이 어려우니 예시와 함께 살펴보겠습니다. float은 아래의 값과 같이 다양한 값을 가질 수 있습니다. // 키워드 값 float: left; float: right; float: none; float: inline-start; float: inline-end; // 전역 값 float: inherit; float: initial; float: unset; 주요 값들의 예시만 살펴보면서 어떻게 화면에 출력되는지 살펴보겠습니다. float: left float 설정을 left를 주게 되면 부모 영역의 top:0, left:0 으로 위치하게 되고 나머지 요소들은 자신의 주위를 감싸게 ..