[Front-end🦁] #6-1 CSS float, 네이버 로그인 섹션 클론 코딩

1. 복습 + 추가설명

• position : #4-2 에 추가 정리
• float 추가 설명 : #6-2 에 추가 정리
• float 실습!
  

소스 코드

2. 네이버 로그인 창 클론코딩

소스코드

수업 시간에 직접 코딩해보는 시간을 가지고, 몇 사람의 코드를 강사님이 수정해주는 방향으로 진행했는데, 도움이 많이 됐다! 간단한 프로젝트인데도 사람마다 짜는 법이 다 다른 것도 신기했고 실무에서는 이런건 잘 안쓰고 이런건 많이 쓰고.. 등에 대한 내용을 많이 들을 수 있어서 좋았다.

3. 주의사항

• 안 넣어도 동작하는 불필요한 CSS 코드는 꼭 빼자.

• 재사용성 : nth-child 같은 것은 자식 요소가 추가되었을 때 순서가 바뀔 수 있어서 사용하지 말자. 클래스를 사용하는 것이 좋다.

• 웹 접근성 : icon과 글씨 설명이 둘 다 있으면 alt=""으로 비워두자.

• icon은 img보다는 before, after 를 사용해서 넣는다.

• vertical-align : baseline(default), top, 5px, ... - inline 요소가 블럭 기준으로 맨위에 정렬. 숫자가 커질수록 정렬 되는 위치가 위로 올라간다.

• img는 inline이지만 예외적으로 width를 가진다.

• 방탄웹 : 화면 상엔 문제가 없지만 나중에라도 문제가 생길 경우를 대비해서 적용해야 하는 것을 다 적용해서!!

4. CSS 진도

#6-2 에 정리했다.

• ) flex 같은게 없을 때는 수직 정렬을 위해 position을 이용했다.

/* 수평 정렬 */
margin: 0 auto; /* 상하 0 좌우 알아서 */
/* 자식 요소를 수직 정렬 */
top: 50%;
transform: translateY(-50%);

5. 느낀점

• 오늘은 position, float를 복습하고 직접 코딩하고 그 코드를 다시 리뷰하는 방식으로 수업을 했다. 완벽한 코드를 보는 것보다 부족한 코드를 고치는 것이 도움이 많이 된다는 것을 느꼈다.

• 또, 나는 디자인이 나와 있는 (아름다운 디자인이 아니라도, padding, margin, width, height 정도의 가이드라인이 있는) UI를 막힘없이 코딩하는걸 더 좋아한다는 것도 알게 되었다. 직접 1px씩 수정해보면서 이 정도면 될까? 하는것도 재밌지만 그런 숫자로 고민하기 보다는 호로로로록 코딩하고 싶다!!!

• float 하다가 flex 하니까 신세계였다. 다양한 브라우저에서 돌아가기 때문에 float를 그래도 써야 한다는 것이 정말 킹받음 포인트였다. iOS는 토이 프로젝트라 애초에 이전 버젼 OS는 고려도 안하고 만들었었는데 실무에서는 최소한의 것들은 고려해야 한다는 것이 많이 눈물을 흘릴 부분일 것 같다.