HTML/CSS - 꿀팁 ( Tips )

1.  <input>가 active or focus 할 때, input의 테두리를 없애는 방법

 

-  input{ outline:None; } 이용

 

 

2. Navigation basic structure

 

- <div class="navi">  --> <ul class="navi_lists"> --> <li class="navi__btn">*(navi 버튼 갯수) 

   --> <a href="" class="navi__link"> --> <i>

 

3. 빠르게 div을 만드는 방법

 

- ( tag 이름) . (class 이름) * (필요한 div의 갯수)

-  ' > ' 기호를 통해 div 내에 또 다른 div 생성 가능

- tag 이름 없을 경우 div로 생성

 

예시 - 1

예시 - 1 의 결과

 

4. 특정 container를 다른 lay-out으로 옮기는 방법

 

- 'z-index' 속성을 이용

- z-index는 z 방향으로 해당 container가 몇 번째 layer에 있는지를 표현

- z-index : 0 가 default 이며, z-index 값이 커질수록 위로 가게 됩니다.

 

5. 문서의 레이아웃을 변경하지 않고 요소를 숨기는 방법

 

- 'visibility: hidden;' 을 이용

- 이를 통해 레이아웃을 변경하지 않고 'visibility: hidden;' 가 적용된 layer의 영향을 받지 않고, 다른 layer에 접근 가능

 

6.  웹 페이지를 특정 화면에서만 보게 만들고 싶은 경우 

- media query 이용

- media query 와 min-width or max-width 등을 이용하여 특정 화면 크기보다 커지거나 작아질 경우 

  안내 문구를 화면에 띄움으로서 웹페이지를 특정 화면에서만 보게 만들 수 있습니다.

- media query 의 조건을 성립할 경우에만 실행

 

예시 - 2

- 예시 - 2 : 화면의 width가 max-width보다 작을 경우 #no-mobile은 display: None 이 된다.