HTML Style(CSS) 보정 w/ 개발자도구 F12

내가 구현하고자 하는 HTML 기능을 모두 구현하였다. (내 머릿속에서 구상한 선에서는 말이다.)

 

// 완성형 코딩은 없다고 본다. 기능을 보다 추가하거나 개선할 필요성이 끊임없이 제기되기 때문이다

 

// 실제로도 나는 주식 적정가치 추산과 관련하여 웹 크롤링 프로그램을 구현하였는데,

 

// 이를 한번 실행하고 프로그램 구동을 끝내는 데 1시간 넘게 걸린다는 점에서 최적화가 필요하지만

 

// 프로그램 실행을 분기별 1회 정도에 그치는 꼴이라 그냥 두었다. (한마디로 뒷짐 지고 있다는 소리다.)

 

이제는 없는 미적감각을 발휘해서 구현한 기능을 페이지에 시인성있게 배치하고 꾸며야 한다.

 

이 역시 재능기부 능력자님들의 게시글을 구글링 하여 참조하고 시도해 본다.

 

뿐만 아니라, 앞서 소개하였던 https://codepen.io/ 혹은 // CSS 디자인뿐만 아니라 기능까지도 공유해 준다.

 

https://getbootstrap.com/docs/4.0/components/navbar/ 을 참조하는 것도 방법이겠다.

 

Visual studio code상에서 style.css라는 파일을 만들어주자.

 

Visual studio code상 페이지 생성

 

그리고 그 style.css 파일에서 아래와 같이 설정을 해줘야 하는데,

body {

  font-family: 'Jua', sans-serif;

  background-color: #ffffff;

  box-sizing: border-box;

  color: #35465d;

}

.file-upload {

    padding: 5% 3%;

    margin: 0 auto;

    border-radius: 10px;

    border: solid 1.5px #f6f7fa;

    background-color: #f6f7fa;

}

#loading {

  display: none;

}

 

위 예시에서 .file-upload{}는 file-upload라는 class의 디자인을 {}와 같이 하겠다는 소리다.

 

그리고  #loading{}은 loading이라는 id의 디자인을 {}와 같이 하겠다는 말로 보인다.

 

jquery처럼 유사하게 class, id별로 처리하는 방식이 다르다.

 

(구글링 결과를 받아와서 그대로 쓰는 것이라 먼저 구현해 놓고 역으로 분석을 하게 된다.)

 

내가 이 글에서 말하고 싶은 요지는 style.css에서 UI를 디자인한 후에,

 

class 혹은 id별 디자인 보정을 style.css에서 바로 직접 하는 것이 아니라,

 

웹 페이지에서 개발자 도구(F12로 불러온다)를 통해 디자인을 여러 가지 수정해 보고,

 

맘에 드는 디자인이 있다면 그때 stle.css에 반영하자는 것이다.

UI 보정 전 @ 개발자도구(F12)

UI 보정 후 @ 개발자도구(F12)

 

개발자도구(F12)에서 UI 보정을 하여 그 설정 값을 

 

Visual code studio의 style.css에 반영하는 것이다.

 

.file-upload {

    padding: 5% 3%;

    margin: 0 auto;

    border-radius: 10px;

    border: solid 1.5px #f6f7fa;

    background-color: #f6f7fa;

    width: 1320px; // UI 보정을 위한 추가

}

 

이런 방법을 사용한다면 visual code studio에서 html 파일을 저장하고

다시 웹 페이지에 deploy하고, 확인하고, 이를 다시 보정하는 과정을 피할 수 있다는 점에서 이를 공유한다.