화면단위 css 및 html 수정 tip

평소에 웹을 만들면서 f12를 눌러 개발자 창에서 콘솔창만 보거나 했는데 사실 여기엔 엄청난 장점들이 많다 특히 

 

나는 프론트를 잠깐잠깐 만져야 할때가 있었는데 이때는 

 

페이지 콘솔창에서 수정해서 원인을 찾는게 더 빠르고 유용하다.

 

일단 화면단위에대해 수정은 페이지에서 f12를 누르고 요소 또는 밑에 스타일에서 바로바로 수정하면서 어떤점을 수정해야하는지 즉각적으로 나와 이렇게 수정 보완하는게 편하고 빠르다!!

예시로 예전에 화면을 숨겼다 나타내는 것을 한적이 있는데 (화면 숨기기 참고)

 

여기서 style="display: none;" 에서 block로 숨겼다 나타내곤 했다.

 

하지만 이렇게 하면 기존 css가 무너지는 현상이 발생하게 되었다.(ex 화면중앙에 오던 로딩창이 숨겼다 나타내니 화면 좌측 상단으로 옴)

 

이럴땐 f12를 눌러 스타일에 들어가 display 다음으로 올 다양한 명령을 넣어보고(none, block, flex, inline-block, table, math...등등) 어떤것이 스타일에 무너지지 않는지 직접 확인하고 사용하였다.(block가 아닌 flex로 하니 됐음)

 

 

고로 구글링이나 챗지피티보다 더 빠르고 유용할 수도 있다.(+@ 혼자서 해냈다는 뿌듯함)

 

 

추가 TIP

그리고 혹시 CSS를 수정했는데 화면에 적용이 안되거나 한적이 있을거다.

분명 id, class, 태그 등등 적확히 썻고 css링크도 제대로 달았는데 왜그럴까 라고 이클립스를 재시작하고 그러했던 경우가 있는데

아는사람은 알겠지만 캐시가 비워지지 않아서 이다.

(개발자 모드 켰다는 가정하에 f12) 그럴땐 강력 새로고침을 하면 된다.

보통 새로고침은 F5를 누르거나 CTRL + R을 할텐데

CTRL + SHIFT + R(강력 새로고침) 을 하면 정상적으로 CSS가 적용되는것을 볼 수 있을것이다.