공부정리

개발을 하던중 css에서 dom 요소를 화면에서 보이지 않게 해주는 속성들을 사용하게 될때가 있습니다.

visibility, diasplay, opactity를 제어하는 것이 대표적인 방법입니다.

이 요소들 간에 어떤 차이가 있을지 궁금중이 생겨 포스팅을 합니다.

세개의 속성 전부 dom 요소에는 포함이 됩니다.

opacity: 0과 visibility: hidden은 화면상에 공간을 차지합니다. 

하지만 display: none은 화면에서 공간을 차지하지 않습니다.

opacity: 0은 eventHandler를 등록할 수 있지만

visibility: hidden은 eventHandler를 등록할 수 없었습니다. (visibility: visible 이면 eventHandler는 정상적으로 등록되어집니다.)

visibility: hidden일때 eventHandler가 등록되지 않는 것과 

opacity: 0 일때 eventHandler가 등록되는 것이 가장 인상깊었습니다.

기획에 따라 알맞은 도구를 선택하는 것이 중요할 듯 합니다.

아래는 예시들 입니다!!

마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다.

이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!!

부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고

자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다.

이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요

위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 

지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 

scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다. 

더 나은 ux를 제공해 줄 수 있을것 같습니다.

부모 요소 지정 속성

scroll-snap-type : [none | x | y | block | inline | both] [mandatory | proximity]? ;

scroll-padding : [우리 padding 주듯이]

scroll-snap-type은 scroll을 어디로 할 것이냐를 지정합니다. 

저는 y축으로의 스크롤에 효과를 주기 위해 y를 넣어주었습니다.

mandatory | proximity 는 필수로 지정할 것이냐 | 브라우저의 속성을 따를 것이냐 입니다.

기본 속성은 mandatory 입니다.

scroll-padding은 보이는 화면에서 padding을 주는 것입니다.

자식 요소 지정 속성

scroll-snap-align : [none | start | center | end]

scroll-margin : [우리 margin 주듯이]

scroll-snap-align은 기준점을 의미합니다. 

start를 하면 시작점

center를 하면 중간

end를 하면 끝점을 기준점으로 지정합니다. 

scroll-margin은 개별 요소에서 margin을 지정할 수 있습니다.

See the Pen scroll-snap by 정우병 (@woobottle) on CodePen.

이전 글 중 scroll을 smooth 하게 하는 속성도 있어서 같이 첨부합니다!

2022.03.22 - [markup/css] - scroll-behavior 🌱

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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: orange;
    }
  }

미디어 쿼리에는 논리연산자를 이용해 미디어 기기, 미디어 특성 등을 설정할 수 있습니다.

위의 예시중 screen은 미디어 기기, 조건은 min-width 입니다.

미디어 쿼리에 사용할 수 있는 논리연산자는 다음과 같습니다.

• and -> 모든 조건이 참일때 쿼리 내용을 수행합니다. 주로 미디어 기기와 특성을 조합할때 사용합니다.
• not -> 쿼리가 거짓일때만 내용을 반영합니다. (미디어 쿼리 전체의 내용을 부정합니다)
• only
• ,  -> or의 역할을 대신해 줍니다.

미디어 기기에는 다음과 같은 종류가 있습니다.

• all  -> 모든 장치에 적합합니다.
• screen -> 화면이 대상입니다.
• print -> 인쇄 결과물 및 출력 미리보기 화면에 나오는 문서입니다.
• speech -> 음성 합성장치 대상입니다.

복잡한 미디어 쿼리의 예시를 살펴보겠습니다.

@media (min-width: 30em) and (orientation: landscape) {...}

최소 width가 30em 이고 미디어 기기가 가로모드일때만 쿼리를 실행합니다.

@media screen and (min-width: 3em) and (orientation: landscape) {...}

화면이 달린 기기여야 하고 최소 width가 3em 이고 미디어 기기가 가로모드일때만 쿼리를 실행합니다.

이때 미디어 특성의 width는 viewport를 기준으로 입니다.

출처: https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

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;

부드러운 동작을 선호하는 저로서는 사용할 일이 많을것 같습니다!

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

css를 이용하여 간단한 progress bar를 만들어 보았다.

이전에 class101 clone을 할때 구현하지 못했었는데 이렇게 쉽게 구현할 수 있는걸 보니 어이가 없을 정도다.

css만 가지고 있으면 할 수 있다.

이왕 animation을 이용할거 rotate도 주어 box의 흔들림또한 같이 표현하였다.

시간을 표시해주는 부분은 미세한 ms의 차이로 인해 완벽히 들어맞지는 않는다. 

하지만 closure와 setInterval을 이용하여 구현하였다.

box 내부의 차오름과 비어짐은 가상요소인 ::after를 이용하였다.

가상 요소인 before와 after는 쓰임새가 참 많아서 좋다

keyframe으로 animation의 이름을 지정하고 

그 안에 %가 증가할때마다의 action을 정의해 주었다.

css의 animation과 transform은 dom을 새로 그리지 않고 gpu 가속을 이용하기 때문에 항목의 이동이나 변화를 표현할 때 자주 사용한다.

animation 속성을 이용할때는

animation: animation-name animation-time animation-timingfunction animation-repeat을 주로 이용한다.

예를 들면 animation: shaking 6s linear infinite 와 같이 사용한다.

따로 지정할 수도 있고 축약형으로 위와 같이 사용할 수 도 있다.

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

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
padding: 10px 9px

// 상 좌,우 하
margin: 10px 9px 8px
padding: 10px 9px 8px

margin은 박스의 크기에 상관없지만 padding을 설정하면 박스의 크기가 커질수 있습니다.

이때는 box-sizing을 border-box로 설정하면 설정한 width를 기준으로 border의 width, padding이 안쪽으로 커지고 전체적인 크기는 커지지 않습니다.

자세한 사항은 아래의 글을 참고해주시면 됩니다.

2022.03.01 - [markup/css] - box-sizing 속성

margin은 특이한 점이 서로 상쇄됩니다.

아래의 예제에서 저는 위아래 box에 각각 margin-bottom, margin-top 을 10px씩 주었지만 두 박스간의 간격은 10px 입니다.

이를 margin collapse라 지칭합니다.

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

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-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch;

/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: unset;

대표적인 속성들만 살펴보도록 하겠습니다.

start, center, end 속성을 줄 경우 flexbox 내에서 교차축에 정렬 하는 것을 확인할 수 있습니다.

교차축에 따라 정렬을 하게 되므로 flex-direction: row, column 에 따라 다르게 정렬 되는 것을 볼 수 있습니다.

flex-direction에 따라 교차축이 달라지기 때문이죠!

align-items

align-items 들은 개별요소에 align-self로 부여하던 것을 상위요소에서 일괄적으로 적용하겠다는 것을 뜻합니다.

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline;
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: unset;

아래의 이미지는 부모의 요소에서 align-items: center를 부여하여 자식 요소들의 align-self를 center로 통일시키겠다는 의미 입니다.

align-content

flex item 들간의 항목 사이 및 주변의 공간 분포를 설정합니다.

/* Basic positional alignment */
align-content: center;     
align-content: start;      
align-content: end;        
align-content: flex-start; 
align-content: flex-end;   

/* Normal alignment */
align-content: normal;

/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between;                                  
align-content: space-around;  
align-content: space-evenly;  
align-content: stretch;       

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: unset;

align-items와 개념이 많이 헷갈렸는데요 예시와 함께 살펴보도록 하겠습니다.

혹시 차이점이 보이시나요???

저는 align-content를 전체 content들의 위치, 

align-items를 개별 content들의 위치 정렬로 이해하였습니다.

aling-content: start, center를 하면 간격들은 사라지고 전체 컨텐츠 들의 위치가 조정되는 것을 확인할 수 있습니다.

align-items 에서는 두 줄간의 간격은 그대로면서 개별 요소들의 위치만 정렬되는 것을 확인할 수 있습니다.

아래와 같이 stretch, space-between 등 다양한 값을 주어 원하는 대로 표시할 수도 있을것 같습니다.

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

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 요소를 수직정렬 시켜줍니다.

inline 요소를 위치시킬때 유용하게 사용할 수 있을것 같습니다.

See the Pen vertical-align by 정우병 (@woobottle) on CodePen.

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align