WebApp_동물상앱 - 웹어플 디자인(2)

1.  Zeplin 디자인을 우리의 App에 적용시켜보자

(1). padding값 적용시키기

     - Zeplin예제를 Alt키를 눌러 동물상테스트 텍스트 바탕쪽으로 마우스커서를 두고 클릭하면

     - 해당텍스트 상하좌우의 paddig값이 %로 나온다 

     -padding-top : 2.1% , padding-left : 7,7% 를 숙지하고

   

 

  - 직접 앱상에서 개발자모드에 들어가 Ctrl + Shift + C로 동물상테스트 텍스트 윗 공간을 클릭하고 

  - Computed상태창에서 위에서 숙지한 padding값을 적용시켜 본다 

  *(개발자도구 우측상단 휴대폰그림을 클릭하면 아래와 같은 휴대폰상 나타나는 화면을 미리보기할 수 있음)

 

  - groomIDE에서 index.html 코드 중 nav태그 의 class이름으로 nav-padding을 추가하고

  - css를 관리하는 style.css에서 nav-padding에 대한 속성을 추가해주면 우리의 앱에 직접 적용이 완료된다

 

 

 

(2). 글자모양 색깔등 적용시키기

 

  - Zeplin디자인 예제에서 동물상 테스트 텍스트를 클릭하면 우측화면에 Content : 동물상 테스트에 대한 CSS 코드가      나온다

  - 해당 코드가 복잡해 보이면 noraml; 값을 가진 속성은 빼고 볼 수있다 방법은 CSS창 우측 상단에 오디오조절버튼

    처럼 생긴 부분을 클릭하면 나오는 여러 체크된 값들 중 Default values 버튼을 해제하면 된다

 

  - 위 코드를 복사하여 index.html에서 동물상테스트 텍스트가 들어가있는 태그(a) 와 그 태그의 class이름

    (navbar-brand)을 확인 후 style.CSS에 해당 class의 속성으로 위 코드를 붙여넣기 한다

 

- 결과는 아래와 같다... 우리가 원하는 그림이 아니다 그 이유가 무엇인지 살펴보자

- 현재 우리는 위에서 동물상테스트 텍스트를 가진 a태그의 navbar-brand에 style값을 주었다

- 아래 개발자도구 하단을 보면 우리가 붙여넣기한 속성값들이 보이는데 color값은 줄이 그어져 있다 적용이 되지 않았다는 뜻이다

- 그런데 그 바로위를 보면 .navbar-light .navbar-brand{}코드가 이미 존재하고 그 안에 color값이 이미 존재한다

   이 코드는 우리가 BootStrap을 통해서 네비게이션바 디자인을 가져왔기때문에 BootStrap상에 기본적으로 존재하고

   있던 속성이름들과 그 값들인 것이다(우리는 우리의 index.html이 BootStrap에 존재하는 css코드를 가져오도록 link로 연결했기 때문에 우리의  style.css에는 해당 class의 이름과 그에대한 속성값들이 보이지 않고 BootStrap웹 안에 들어 있는것이다)

- 우리의 color가 적용되지 않는것은 css의 우선순위에서 밀렸기 때문이고 텍스트의 글자가 생각보다 큰것은 텍스트 크기의 속성값이 px로 고정적인 값이기 때문이다

 

 

- CSS에는 적용 우선순위가 있다 몇가지 살펴보면 class이름을 많이 포함할 수록 우선 적용되며 .html 코드상

  더 아래에 link된 style.css의 적용이 우선적용된다

 

 - 위 코드의 변경사항(px값을 가진 속성 지움, class이름 추가로 우선순위 변경)으로 인해 텍스트크기가 작아지고

   color도 우리가 작성한 style.css의 속성값이 적용되었다.

 

 

 

(3) 배경색 하얀색으로 통일하기

 

  - Shift + Ctrl + C 를 이용해 우리가 바꾸고 싶은 부분을 클릭하여 해당 부분이 어떤 css코드를 가지고 있는지 확인

  - style.css:1 즉 우리의 App이 가진 style.css에서 관리하는 body태그 속성값의 background-color가 #eeeeee이기 때문에 배경색이 회색인 것이다

  - 이것을 #ffffff로 바꿔주면 된다는 것을 인지 후 

  - groomIDE의 style.css에서 직접 #ffffff로 코드를 변경해주면 된다

 

 

 

  - Shift + Ctrl + C 를 이용해 우리가 바꾸고 싶은 부분을 클릭하여 해당 부분이 어떤 css코드를 가지고 있는지 확인

  - 동물상테스트를 둘러싼 배경색은 be-light의 class이름으로 지정되어 background-color가 회색이고 배경색 외의 다른 기능은 없는 것을 확인 후

  - 우리의 groomIDE의 index.html코드에서 nav태그의 해당 class 이름을 지워버려 기본값인 하얀배경이 오도록한다

 

 

 

(4) - 목록을 보여주는 햄버거 모양 버튼의 테두리 없애기

 

    - 역시나 Ctrl + Shift + C 로 해당 버튼을 클릭하여 어떤 태그와 css스타일을 가지고 있는지 파악하고

    - 그 속성이 어떤 class 이름을 가지고 있으며 BootStrap상에 존재하는지 우리의 style.css상에 존재하는지 파악한다

    - 아래에서는 .navbar-light .navbar-toggler라는 class이름에 border-color 속성 값이 있는데 이를 체크해제하면 테두리가 사라지는 것을 미리보기로 파악한다

    - 해당 class는 _naver.scss:226에서 관리 되고 있는 것으로 보아 BootStrap상에서 관리중인 것으로 파악하고 이 class를 우리의 App에서 완전히 지우기엔 이 class가 기능적으로 다른 기능도 포함하고 있을 것 같다

    - 따라서 해당 class를 복사하여 우리의 App에 붙여넣고 border-color만 #ffffff으로 하얀색으로 바꾸어 덮어씌운다

    - 이렇게하면 BootStrap상에 있는 class의 이름과 같은 이름을 우리의 App에서 중복으로 관리한다고 했을때 css 우선적용법칙에 따라 우리의 App에서 설정한 속성을 우선으로 따르고 그 속성과 중복된 BootStrap상의 속성은 무시되며 우리의 App이 다루지 않은 다른 속성에 대해서는 BootStrap상의 속성값을 그대로 따르게 된다