css modifier, visibility

1. modifier

modifier는 수식어 라는 뜻이다.

구글에 검색해보니 CSS 개발 방법론 중에 하나로 BEM방법론이 뜬다. BEM이란 Block, Element, Modifier의 약자로서

클래스의 이름을 짓는데 구조적인 방법을 제시한다.

구글에서 검색해보니 노마트코더의 클론코딩 강의 내내 BEM방법론으로 CSS를 사용해왔더라.

https://webclub.tistory.com/263

BEM(Block Element Modifier) 방법론

자세한 내용은 위 블로그를 참고하면 된다.

오늘은 Modifier에 대해 기록을 남겨야겠다고 생각한 이유는 기존에 만들어놓은 css를 더 확장해서 효율적으로 사용할 수 있기 때문이다.

잘 이해해놓으면 위와 같은 상황에서 아주 효율적으로 해결할수있다. 위에 Flow가 보낸 메세지 한 박스를 

class="message-row"로 만들고 css파일을 만들었다. 그리고 내가 보낸 메세지 박스를 작업하는려는데 

message-row랑 비슷하게 생겨서 배경색만 바꾸고 border-radius만 조절하면 끝날것같은데? 라는 생각이 들었다.

근데 그대로 복사해서 쓰려니 class이름이 똑같으면 css가 똑같이 적용되어 버리니까 조금 난감했다. 

이때 Modifier를 쓰면 아주 쉽게 해결된다.

새로 만들 메세지 박스의 클래스에 modifier를 적용한다. class="message-row message-row__own" 이렇게 해놓고

img 랑 보낸사람이름 지우면 끝!

css파일로 돌아가서 .message-row__own .message__bubble{} 이렇게 새로운 html부분을 불러내면 나머지는 cascading 되니까

배경색만 노란색으로 바꾸고 border-radius수정하고 시간이랑 말풍선 방향만 바꿔주면 된다.

BEM방식을 쓰다보니 이름을 적절히 만들어놓으면 구조를 파악하기도 좋고

사람의 언어로 쉽게 파악할 수 있어서 유지보수에도 좋을 것 같다.

 

 

2. visibility

처음 화면을 켰을때 왼쪽과 같은 splash screen을 잠시 띄우고 사라지게 하는 애니메이션효과를 주려고 할때. 

body전체를 감싸는 div를 하나 만들고 background-color를 yellow로 왼쪽과 같이 만든다.

css파일로 돌아와서 @keyframe hidesplashscreen {from{opacity:1;}to{opacity:0;}}를 만들어서 애니메이션을 적용한다.

적용할때는

animation: hidesplashscreen 0.4s ease-in-out forwards;

이 코드를 splash screen에 그대로 넣었다. 0.4초간 ease-in-out 의 방식으로 진행된다. forwards는 애니메이션이 끝나고 다시 from의 상태로 돌아가지 않고 to의 상태를 기억하도록 한다. 위의 경우엔 opacity:0을 유지하기 때문에 자연스럽게 사라지고 다시 나타나서 화면을 가리지 않는다. forwards가 없으면 다시 opacity:1로 돌아가서 화면을 다 가려버린다.

하지만 splash-screen이 사라진다해도 오른쪽 화면을 제대로 클릭할 수 없다. 왜냐하면 opacity가 0이니까 투명하게 보일뿐이지 사실 투명한 splach-screen이 위에 올라가 있다는 뜻이다. 유리처럼 가로막고 있다.

이때 필요한게 visibility: hidden; 이다. 

@keyframes hidesplashscreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

visibility 단순히 브라우저가 해당 엘리먼트를 무시하도록 했을뿐

실제로 html을 없에거나 숨기고자 할때는 소용이 없다. 왜냐하면 브라우저상에서는 그대로 남아있기 때문. 이럴때는 javascript가 필요하다. 근데 다른 블로그에서 display:none;이랑 비교하는 글이 있어서 해봤는데..

display:none;은 splash-screen이 사라지고 나서도 클릭을 여전히 할수가 없다..

완전히 사라지는거라던데.왜일까?