웹 퍼블리싱 정복반 - 2주차 마무리 ( 화면 클론하기 )

2023. 3. 22. 20:49스터디/항해 99

2주차에서 CSS 레이아웃 분석하는 방법, position, float, display:flex, before, after를 배웠다.

배운 내용을 바탕으로 기존의 화면을 클론해서 만드는 과정을 연습해 보았다.

생각보다 시간이 오래걸렸다.

 

다같이 만들어 보는 것이 좋을 것 같다고 예시로 정한 화면은 다음과 같았다.

슬라이드 토글 버튼이랑, 체크 라디오 버튼이 있었다.

 

화면 배치에 대한 연습을 하기 위함이었기 때문에 최대한 로고를 가져다 쓰려고 했지만

그렇지 못한 부분도 많다.

 

클론해보기로 한 화면
클론한 결과물

before, after를 사용해서 토글 버튼을 만들어 보고 체크 라디오 버튼도 구현하였다.

또 디스플레이 플랙스를 여러번 사용할 수 있었다..

 

그럭저럭 돌아가게는 만들었지만 시간도 오래 걸렸고..

국민은행 글자를 원안에 넣는부분이랑 체크이미지 넣는 부분은 놓쳤다.

 

코드는정말.. 처참하다... 처음 완전 빈 페이지에서 이렇게 만들어 본 것이라

style 부분이 정리가 되지 않았다..

퍼블리셔 분들 진짜 존경한다..