웹 퍼블리싱 정복반 - 2주차 마무리 ( 화면 클론하기 )
2023. 3. 22. 20:49ㆍ스터디/항해 99
2주차에서 CSS 레이아웃 분석하는 방법, position, float, display:flex, before, after를 배웠다.
배운 내용을 바탕으로 기존의 화면을 클론해서 만드는 과정을 연습해 보았다.
생각보다 시간이 오래걸렸다.
다같이 만들어 보는 것이 좋을 것 같다고 예시로 정한 화면은 다음과 같았다.
슬라이드 토글 버튼이랑, 체크 라디오 버튼이 있었다.
화면 배치에 대한 연습을 하기 위함이었기 때문에 최대한 로고를 가져다 쓰려고 했지만
그렇지 못한 부분도 많다.
before, after를 사용해서 토글 버튼을 만들어 보고 체크 라디오 버튼도 구현하였다.
또 디스플레이 플랙스를 여러번 사용할 수 있었다..
그럭저럭 돌아가게는 만들었지만 시간도 오래 걸렸고..
국민은행 글자를 원안에 넣는부분이랑 체크이미지 넣는 부분은 놓쳤다.
코드는정말.. 처참하다... 처음 완전 빈 페이지에서 이렇게 만들어 본 것이라
style 부분이 정리가 되지 않았다..
퍼블리셔 분들 진짜 존경한다..
'스터디 > 항해 99' 카테고리의 다른 글
웹 퍼블리싱 정복반 - 4주차 마무리 (0) | 2023.03.23 |
---|---|
웹 퍼블리싱 정복반 - 3주차 마무리 (0) | 2023.03.23 |
웹 퍼블리싱 정복반 - 2주차 마무리 (0) | 2023.03.21 |
웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (3) (0) | 2023.03.21 |
웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (2) (0) | 2023.03.21 |