-
내일배움단 11일 메이킹챌린지 4일차코딩 2021. 7. 25. 11:11
📌할일
1. 프론트엔드 파트 나눈 부분을 한 번 만들어 보기
2. 백엔드 나눈 페이지 크롤링 해오기
→ 이미지, 제목, 가격, 링크, 하트 숫자 받을 데이터 공간, 카테고리이 중 내가 할 일은 프론트 엔드 파트 나눈 부분(상단/하단) 만들기
1. 검색창(search bar) 만들기
고민이었던 건 이런 원하는 스타일이 딱 있을까?였는데 없으면 만들자라는 무대포 정신으로 시작했다.
구글 스타일 검색창을 끌어와서
border: 1px solid #bbb;
로 검색창에 테두리를 만들어줬다.
조금 고민이었던건 1px, solid, #black;로 쳐야하나 고민이었는데
뭔지는 잘 모르겠지만 미묘한 차이가 있는 듯
border-width : 1px;border-style : solid;border-color: #bbb;
찾아보니 위의 문장이랑 아래의 문장이 같은 문장이라고 한다.
ctx는 context라고 한다.
2. 영상 가지고 오기
- 유튜브에 들어간다.
- 퍼가기 버튼을 누른다.
- <ifame~> Url를 코드에 넣는다.
- 완성
<body> <iframe width="560" height="315" src="https://www.youtube.com/embed/iDjQSdN_ig8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body>3. 아래 칼럼 부분
이를 할 때 고민이 카드 느낌으로 해야할까 아닐까였다. 유님은 카드 느낌으로 하셨는데 그러면 아이디어 스케치와 비슷한 느낌이 덜 나는 것 같아 그냥 이미지와 글로 진행했다.
boarder:7px;이 딱 예쁘다는 생각.
백엔드보단 훨씬 쉬운 '가나다'같은 일들일텐데도 처음이라 '내가 할 수 있을까?'라는 의구심이 들었지만,
생각보다 더 코딩러들은 친절했다...^^~ 이 영광을 구글, 코딩하는 분들께~ 돌립니다~
📌할일
1. 영상 대신 일러스트로 대체하기
2. 검색창의 간격 부분 조절
3. 카테고리, 카드 부분 크기 조절
4. 칼럼 카드로 바꿔오기'코딩' 카테고리의 다른 글
내일배움단 11일 메이킹챌린지 6일차 (0) 2021.07.25 내일배움단 11일 메이킹챌린지 5일차 (0) 2021.07.25 내일배움단 11일 메이킹챌린지 3일차 (0) 2021.07.22 내일배움단 11일메이킹챌린지 2일차 (0) 2021.07.22 내일배움단 11일메이킹챌린지 1일차 (0) 2021.07.20