TIL 12:: 실습과 코드리뷰

주어진 피그마에 맞게 만들어보는 것이었다. 이전에 수업 첫날 혼자 만들어서 포스팅 했었는데 3주동안 수업 들은 내용을 기준으로 새로 만들어서 코드리뷰를 받아봤다. 내 코드 하나하나를 보여준다는게 굉장히 민망하긴 했는데 HTML,CSS에 있어서 기존 방법이 웹표준에 적합한지 야매(?)로 하고있는게 아닌지 마음 한 켠에 걱정이 있어서 잘 하고있는가에 대한 검사 차원에서 코드리뷰를 받았다. 

 

내 코드 리뷰

---

👍 Good!

1. html, css validator 통과했다.

-> 기본적인 것 

2. 해당 영역을 article로 지정했다.

-> 어디에 가도 독립적이게 사용될테니 article이 적합하다. 

3. a태그로 padding을 주어 버튼 모양을 만들었다.

-> 수정이 있을 때 유연하다.  padding값을 주어 부모요소가 넓어져도 그에 맞게 따라 넓어진다.

4. 내부 영역을 잡을 때 padding으로 주었다.

-> 추후 width값이 바뀌거나 요소가 추가되어도 수정이 용이하기에 유연한 UI구성이다

 

⚠ 수정 필요

1. 위니브 로고 위치가 정렬되어있지 않다. 수평해결필요.

-> 윈도우에서는 제대로 보였지만 맥에서는 어긋난게 확인 필요하다. 

2. 높이 141px로 1px 어긋나있다.

-> 디자인대로 만들지 않았기때문에 전체 높이를 유념해서 수정하기 

3. 위니브 로고에 alt에 로고라는 말 빼기.

-> 읽었을 때 위니브 로고 로그인 이렇게 읽게되니 로고라는 말을 빼기

4. 설명이 필요없는 이미지는 alt값 비워두기

5. 불필요한 클래스명 지우기.

-> .search-wrap을 만들었는데 굳이 그렇게 할 필요없고 .search-signup으로 하면 된다. 필요없는 클래스는 쓰지마라!!

 

 

1. 문제의 해결법

Q. 그러면 text-top말고 어떻게 해서 정렬해야하는가?

1. float을 사용해서 margin을 준다.

2. vertical align이 top을 text-bottom으로 바꾸면 더 깔끔하게 보인다. 

os의 차이는 아니고 폰트의 문제로 지금 html파일에 //spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css로 글씨체가 연결이 되어있다. 이 주소앞에 https:를 붙여주면 경로가 확실해져서 바뀌게된다. 

 

 

❗❓ 좋지도 않고 나쁘지도 않다.

1. flex 사용 -> float을 사용하면 불필요한 container가 없어도 된다. 

flex의 단점

1) 크로스브라우징의 단점이 있다.

2) 부모요소가 많이 필요하기때문에 HTML 태그가 늘어난다. 

- flex 속성은 container요소를 많이 필요하기 때문에 많이 묶어주어야한다. 

 

 

---

강사님 코드 순서 

1. heading 태그부터 순차적으로 영역 짜기

1) <h1> 위니브 로그인

2) 더 편리해진~

3) 위니브 이미지 + 로그인 버튼

4) div 두 개로 아이디,비밀번호 찾기와 회원가입 나누기

 

2. reset.css 적용하기

 

3. 클래스명 지어주기

1) 냅다 전부 넣고나서 필요없는걸 지우기

클래스명 짓는것은 '형태-의미'

 

+ 입사하면 회사의 내규따르기

 

4. utility 클래스 해주기

1) .blind 해주기 - 네이버의 그 IR기법

-> h2의 위니브 로그인을 가려준다.

 

5. 피그마 보면서 css 속성 정렬

1) article부터 시작

속성 정리할때 레이아웃을 위로하는식으로 하는게 보기 편하다.

 

2) font 속성은

font-family (폰트정보), font-weight, font-size, line-height, color

 

3) 각 속성 정렬해주면서 피그마와 height값이 같은지 비교

 

4) float:left; float:right;을 했을때는 안에서 인식을 못하기때문에 해결해야한다..

- 클리어 픽스 방법 사용

- float은 margin-top으로 위치 맞춰서 올리기 (margin에 top -1 을 주던 bottom 1을 주던)

 

bfc영역이 생성되면 float이 사라진다

부모요소에 이미 float이 적용되어있어서 자식요소에 float이 적용되어도 자식을 알아본다( 저 멀리로 띄우지 않는다)

 

 

-- 가상요소에 after에서 display에 block 한 이유 : 보이지 않기때문에 width,height을 주려면 블록 요소가 되어야한다.

 

개발자 도구에서 .cls를 보면  저렇게 해제한 상태도 확인할 수 있다. 

 

 

---

🔎 나의 셀프 회고 

프로젝트들을 할 때 피그마와 px단위까지 그대로 맞춰서 진행하지 않고 적당히 맞게 했었는데 이번에 조건은 피그마와 똑같이 만들기였다. 그래서 똑같이 만드는게 처음다보니 수업 때 height값을 무조건 지정하지 말라는 내용은 기억했지만 그대로 만들어야한다는것은 생각하지 못한 점이 아쉽다. 전반적으로 잘 했다는 평을 받아 수업을 잘 듣고있다는 지표가 되어 흐뭇했다. 검사받는 다는게 두렵긴 하지만 그만큼 현재 위치를 파악할 수 있어 장점이 더 많은 것 같다.  

 

+ 추가 TIP

1. marign, padding같이 축약형이 가능한건 축약형으로 쓰는게 좋다. 

2. 닫힘태그가 없는태그에는 가상요소 불가하다. 

- 가상요소에는 img태그같은 혼자서 열고닫는 태그에 가상요소를 사용하지 않는다.  

3. <button> 안에 있는 요소는 중앙정렬된다. <button>은 inline요소이다.  

4. 백그라운드 이미지 

- 컨텐츠는 비우고 width, height만 주고 백그라운드 이미지로 넣어준다.

5. 팝업은 <button>, 페이지 이동은 <a>

6. 인라인 블럭은 버티컬 얼라인을 해야한다.

7. svg는 xml 기반으로 지금 같이 간단한 이미지는 png보다 용량이 적지만 이미지가 복잡해지면 용량이 더 커진다.

8. article로 감쌌는데 <h1~6>을 넣을 때 어떤 요소를 선택할 것인가 정해야하는데

위니브 로그인을 <h2>로 하기 -> 다른 곳에 갔을때 h1은 이미 존재할 수 있기에 h2로 한다.

9. 요소 선택자는 자제하기 

 

+ 피그마 사용할 때 팁

- width 가져오고 height은 참고용, top, left 무시해도 된다. 

- 거리 간격 확인할 때 border값이 포함되어있는지의 유무와 border의 px값 만큼 빼서 계산해서 주기

- inspect 할 때 2배 값으로 추출하기 -> 레티나 디스플레이에 대응하는 방법이다

- 피그마에서 글 내용을 복사할 때는 inspect- content -copy한다. 

 

++ 알아두면 좋은 사이트

https://jsbin.com/?html,output 

JS Bin