HTML/CSS - 꿀팁 ( Tips - part 2 )

1.  <link rel="stylesheet" href=""> 한 번에 생성 

 

-  link 작성 뒤, Tab를 누르면 한 번에 생성 가능

 

 

 

2.  <li>안에 <a>가 있는 태크를 한 번에 n개 생성

 

-  (li>a)*n : <li>안에 <a>가 있는 태크를 그룹화하여 n 개 생성

 

 

 

3.  display : none 가 동작을 못할 경우

 

-  display : none !important; 작성

 

 

 

4.  자연스럽게 side bar를 나오게 하는 방법

 

-  첫 번째 아이디어 : 초기 width를 0px으로 설정한 뒤, "active" class를 추가하면 width를 원하는 만큼 늘어나도록 설정 

                           그리고, transition을 통해 자연스럽게 만들어 준다.

-  두 번째 아이디어 : 해당 div의 position을 fixed시켜 고정시킨 뒤, 화면 밖에 위치시켰다가 toggle button 클릭하면 

                            화면 안쪽으로 위치시키도록 만들어서 자연스럽게 나오게 만든다.

 

초기 너비를 0px로 설정한 뒤, transition을 통해 자연스러운 애니메이션 효과를 넣는다.

.active-side-bar 클래스를 넣으면 너비가 원하는 만큼 늘어난다.