부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-7 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

3. CSS - FE

7) 디버깅-HTML-CSS

 

[2] 개념 정리

크롬 개발자 도구 : 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공된다. 이를 개발자 도구라고 한다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있다.

Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구
Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구
Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. 
Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구

 

[3] 강의 정리

  크롬 개발자 도구의 Elements 탭 부분을 한번 알아보도록 하겠다. Elements 탭은 HTML과 CSS를 개발할 때 반드시 알아둬야 될 탭이다. 크롬 개발자 도구는 맥 기준으로 Opt + Cmd + I라는 단축키를 열어서 오른쪽에 있는 이 버튼을 누르면 이렇게 띄어낼 수도 있고 다시 붙일 수도 있다. 아래쪽으로 붙일 수도 있고 오른쪽으로 화면을 이동할 수도 있다. 아래쪽으로 붙이자. 조절도 된다. Cmd + -, +로 이렇게 축소, 확대도 된다. 먼저 우리가 왼쪽에 있는 HTML 화면과 오른쪽에 개발자 도구에서 나오는 것들을 살펴보도록 하겠다. 이걸 Inspect 한다고 했는데 이 인스펙터를 클릭한 다음에 해당하는 HTML 엘리먼트를 이렇게 선택 할 수 있다. 마우스 오버만 해도 태그와 이 사이즈 정보가 노출되고 있다. 블로그 이미지를 누르면 주의 깊게 봐야 될 거는 이 엘리먼트가 어떤 HTML의 구조 안에 존재하는가도 우리가 당연히 알 수 있고 하단에 보면 이것이 가지고 있는 DOM 노드의 순서가 나온다. 그래서 DOM 노드라는게 어떤 계층 구조를 가지고 있기 때문에 어느 태그의 어느 쪽 아래에 있느냐를 정확히 알 수가 있다. 그래서 HTML 정보는 이걸로 우리가 파악을 할 수가 있다. 이거를 눌렀을 때 오른쪽에 보면 이 엘리먼트, em 이라는 엘리먼트가 가지고 있는 스타일 정보가 쭉 나타난다. 얘가 원래 여러 가지 스타일 정보들을 가지고 있다.

  종합된, 즉 얘가 최종적으로 가지고 있는 스타일 정보로는 Computed 항목에 보면 나온다. Computed 항목에 보면 나오고 디폴트로 가지고 있는 속성을 제외하고 어떤 사용자가 지정한 정보는 여기 있고, Show all을 하면 기본적으로 가지고 있는 정보까지 모두 다 나타난다. 전체 리스트를 보려면 여기서 찾아면 된다. 예를 들어서 em의 display 값이 뭐지? 그러면 여기의 display라는 정보를 보면 이게 inline이구나라는 걸 알 수 있다. 다시 스타일 정보로 가서, 스타일 정보에는 브라우저가 CSS를 파악을 한 다음에 어떻게 얘가 파악을 했는지에 대한 정보를 나타낸다고 볼 수 있다. 어떻게 파악을 햇는가 라는 것은 소스 코드 레벨로 네가 어느 라인의 어떤 부분을 짠 부분 때문에 font-family가 이거라는 거다. 예를 들어서 CSS 내용 중에 id가 yHeader 아래 id가 yHeadWrap 아래 *로 했다. 모든 거는 다 font-family가 맑은 고딕이고 이거라고 했다. 그런데 CSS 파일에 더 아래쪽에 보면 이런 정보를 또 추가했다는 거다. 그래서 실제로 이게 반영된 게 아고 이 정보가 반영된 거다.

  순서와 상관없다라도 셀렉터에 보면 우선 순위라는게 존재한다. 셀렉터에 점수를 줄 수는데 점수에 따라서 id는 100점 , class는 10점 이런 식으로 점수를 줄 수 있다. 점수가 높은 거가 얘가 이제 나 이게 있었는데 이걸 무시했고 내가 CSS를 처리하는 과정에서 얘를 무시했고 이 값을 반영을 했다는 거를 디버깅하기 좋게 얘가 보여준다. 당연히 Computed 탭에 가서 font-family로 가보면 돋움 이런 내용들이 보이는 걸 확인할 수 있다. 여기 보면 이게 왜 취소가 됐는 지는 알 수있는 정보를 우리가 알 수 있다. 그리고 em이라는 것도 font-style을 normal을 줬는데 스타일에 대한 정보를 여기서 표시한 게 반영이 됐다. 이 코드는 gnb.css 파일이다 하고 클릭해서 들어가 보면 Sources 탭으로 이동을 한다. Sources 탭으로 이동을 해서 이 Source 탭에서 원래 탭 이런 걸 누르면 내비게이터를 숨길 수 있다. Sources 탭에서 이렇게 정보가 나온다. 왼쪽 아래에서 Format을 누르면 예쁜 글자로 gnb.css가 em 태그의 font-style이 normal이구나 라는 걸 우리가 알 수 있다. 다시 Elements 탭으로 이동을 해서 선택한, 인스펙터로 선택한 영역이 어떤 스타일 정보를 가졌는지 알 수 있다. 이런 것들은 우리가 이걸로 확인을 할 수가 있다.

  이거 같은 경우는 color가 #666이다. #666이라는 숫자로 이렇게 표시됐다. 666666인데 똑같기 때문에 이렇게 생략을 한 거다. 16진수 표기법으로 red, green, blue 이렇게 표시하는 거를 알 수 있다. 앞에 #를 붙였다. 이 정보는 Inherited from a 즉 a 태그로부터 상속받았다는 거다. 이렇게 color 값과 같은 일반적인 CSS 스타일은 상속을 받을 수가 있다. 보통 박스 모델에 해당하는 margin, padding 이런 배치 관련된 것들은 상속받지 않는다. 그걸 모두 배치받으면 배치 조정이 굉장히 어려울 거다. 그래서 이런 스타일 정보 같은 경우에는 상속을 받는다. 만약 a 태그의 색깔을 빨간색으로 바꾸면 당연히 상속받아서 이것도 이렇게 먹는다. 테스트를 해보면 color가 이 색깔인데 color를 다른 걸 주고 싶다고 하면 inline으로 직접 반영하면 가장 먼저 속성값을 여기다가 반영을 할 수 있다. 가장 높은 우선순위로 이런 것들을 할 수 있다. 또는 우리가 16진수로 999999 이렇게 할 수도 있다. 그런 식으로 색깔을 반영을 하면 얘가 취소 선이 됐다. 이게 취소됐다.

  이제 inline으로 들어간다. inline이 뭐냐면 HTML 안에 스타일 정보로 들어갔다. 이게 우리가 header 태그 안에 스타일 정보를 넣는 거랑 외부에 CSS 파일을 넣는 것보다 먼저 우선돼서 이렇게 반영이 된다. 이렇게 해서 간단히 테스트를 해볼 수가 있다. 색깔 같은 경우에는 눌러서 이런 식으로 Color picker라고 한다. 원하는 색깔을 이렇게 우리가 반영을 할 수도 있다. 그래서 아래 왜 취소됐는지 그리고 상속받았다는게 무슨 뜻인지, 부모 엘리먼트로부터 속성을 상속받은 것인지 그런 것들을 알 수 있다. 그 다음에 이제 만약에 새로운 룰울 만들겠다. 예를 들어서 모든 em 태그에 내가 어떤 값을 주고 싶다. 근데 또 새로운 룰을 만들 수도 있다. 예를 들어서 모든 em 태그에 내가 어떤 값을 주고 싶다. 새로운 룰을 만들 수 있다. 예를 들어서 li 안에 a 안에 em 태그인 경우에는 지금 자식이 아니라 자손이다. li 안에 a 안에 em 태그를, em 태그를, color를 font-size는 20픽셀이다. 그러면 이렇게 줄 수가 있다. 그러면 이렇게 새로운 룰을 테스트해볼 수도 있다. 얘는 inspector-stylesheet라고 해서 개발자 도구에서만 쓸 수 있는 임시의 영역에다가 저장을 해서 이렇게 화면에 표시해주고 있다. 이런 거를 확인을 할 수가 있다.

  자바 스크립트 제어하는거는 원래 이렇게도 할 수도 있다. 엘리먼트 같은 경우에는 이런 것들을 삭제, 이런 것들은 Delete element를 할 수도 있다. 그 다음에 여기를 한번 눌려보면 여기 있는데 이런 부분을 이렇게 해서 오른쪽 클릭해서 :hover를 할 수도 있고 이런 것들을 :hover 이렇게 할 수도 있고. 이 부분에 이런 식을 조정을 굉장히 많은 걸 할 수 있다. 여기다가 강제로 hover를 준다거나 할 수 있고 Hide element를 할 수도 있고. 아까처럼 Delete element를 하면 지워지기도 하고 그렇게 처리되는 걸 알 수 있다. 그래서 Computed라는 것은 결국에 최종 연산된 것이고. 스타일 정보는 해당 엘리먼트에 해당하는 스타일 정보. Computed는 이거 된 거. 스타일 정보가 굉장히 복잡한데 이것들을 우리가 새로운 룰도 만들고 inline으로 여기다가 반영도 가능한 거를 확인을 했다. 일단 이 정도로만 HTML을 우리가 디버깅해볼 수가 있다. 나중에 Source 탭을 통해서 로컬 파일과 싱크를 맞춰주면서 여기서 수정된 걸 로컬에 바로 수정할 수도 있다.

  간단하게는 지금처러만 필요한 값들을 우리가 수정을 해보면 여러분들이 개발하는데 큰 어려움 없이 할 수가 있다. 또 한번 더 해보자. 이런 값이 있다. 그런데 float 같은 것을 빼고 싶다. 글면 이렇게 빼보면 된다. 이렇게 빼서 조정을 할 수도 있고 width를 이렇게 바꿔볼 수도 있다. 지금 여기 영역의 왼쪽에 이렇게 지정된다. 이런 것들을 쭉 바꿀 수도 있다. 계속 쭉 바꿀 수도 있고 그 다음에 다른 값들을 자동완성이 되기 때문에 이런 것들도 역시 바꿀 수 있다. text-overflow, 텍스트가 멈출 때 어떻게 처리할 거라는 것도 이렇게 처리할 수 있다. 디버깅을 할때 이걸로 손쉽게 할 수 있다는 것을 알아봤다. 일단 Elements 탭을 잘 활용하기 바란다.