간단한 UI 만들기 (CSS 활용)

 

 

 

간단한 UI 를 만들기에 앞서, UI 만들기 법칙이 있다. 

 

UI 만들기 법칙

    1.내가 만들고 싶은 ui의 디자인을 다 해놓기.(html.css로)

    2. 필요할 때 보여달라고 코드 짜면 됨. (자바스크립트 활용) 

 

 

display : none  

UI를 평소에 숨기고 싶다.

 

display : block

UI를 다시 보여주고 싶다.    

 

visibility : hidden 

그렇지만 이거는 UI를 숨기는 거라서, 안보이지만 공백이 존재.

 

visibility: visible

UI를 숨긴걸 보이게 하고싶다.

근데 다시 보기버튼을 눌러도 보이지 않는다. 왜냐면  display: none을 걸어둬서 그런걸로 추정. 이게 더 쎈듯.

그냥 css파일에 display: none이거 지우고  visibility: visible 만 걸면 먹히니깐 이렇게 추측해 본다...