TIL #201229
📚 TIL
(어제 글을 안올리고 자서 오늘 올려요!!)
어제 열심히 만들던 코드잇 과제! 이것저것 많은 게 문제였는데요
그냥 해설보고 따라 만들어볼까..생각까지 했는데
시간이 좀 걸리더라도 제대로 만들어보자!!생각해서
구글에 열심히 검색해서 결국 완성했어요 흑흑 잘했다!
어제까지 만든 페이지 모습이에요
부트스트랩으로 글자랑 규격만 끼워맞춰놨어요
과제를 수행하면서 겪은 문제와 해결과정을 정리해봤어요
1. 회원가입/로그인 메뉴를 오른쪽으로 이동하기
(float: right;해도 오른쪽으로 안가고 줄어든 메뉴창에서 오른쪽으로 이동함)
한 리스트 안에 모든 메뉴를 넣어놨었는데요
리스트를 하나 더 만들어서 회원 가입과 로그인 메뉴를 넣으니
왼쪽에 있는 리스트가 마진이 자동으로 주어지면서 해결이 되었어요!
2. 캐러셀 배경화면으로 빼기
(부트스트랩으로 넣었는데 img를 div로 바꾸니 엉켜서 사라져요. img를 투명하게 해도 배경이 보이진 않네요)
배경으로 넣는 방법을 모르겠으니 이미지에 형식을 적용하는 법을 검색해서 해결했어요!
해설을 보니 img를 div로 바꾸는게 아니라 그냥 img를 삭제하고 상위코드에 배경을 입히더라고요
원래는 위처럼 화면을 늘리면 그림이 엿처럼 쭉 늘어났는데 이제 비율은 그대로 유지됩니다 ㅎㅎ
배운 코드 :
object-fit
object-position
3. 캐러셀에 있는 글씨 세로 가운데 정렬하기
(평소에 하던 세로 가운데 정렬방법으로 하니까 안되네요)
아무리 해도 안되길래 다시 검색찬스!
포지션이 relative일 때 가운데 정렬하는 방법이 나와있어서 적용해봤어요
부모코드 기준으로 50%로 내린다음 자기자신을 50% 위로 이동시키니 가운데로 올라가네요!
저는 부트스트랩으로 캡션코드까지 가져와서 만들었는데
해설에서는 캡션은 직접 코드를 입력해서 평소에 하던 방법으로 해결하셨어요
가장 고민을 많이 했던 문제였어요
배운 코드 :
transform: translate(50%, 50%);
3-1 작은 사이즈일때 글씨가 사라지는 현상
부트스트랩 설명에 작은 사이즈일 때 글씨가 사라지도록
d-none이 적용되어 있대서 클래스를 삭제해주니까 글씨가 잘 보였어요!
3-2 양옆 페이지 이동 버튼 위로 글씨가 들어가지 않음
글씨가 써져있는 코드 너비를 100%로 줬어요!
그러니까 창을 늘렸을 때 가운데 정렬이 안돼서 left도 50% 줬어요!
4. 튜터 모집 경고창 길이 조절
(그리드 길이랑 같게 하고 싶은데 길이를 따로 설정하는게 아니라 모르겠어요)
그리드 컨테이너 안에 경고창을 넣어줬어요
컨테이너 길이 = 그리드 길이 = 경고창 길이!
5. 그리드 간격 조절하기
(그리드 마진을 15px씩 뒀는데 더 넓어요!!)
div 코드랑 a 코드에 둘 다 마진이 들어가있어서 마진이 60px로 나온 거였어요!
div의 마진을 없애니 경고창과 길이가 달라져서 a의 마진을 없앴어요!
6. 그리드 상자 형식
그리드 사진에 그림자를 주는 줄 알았는데 상자에 주는거였네요!
상자에 그림자를 넣으니 텍스트 정렬이 안되어있는 것을 발견했어요
그래서 아이콘이랑 이름 세로 정렬까지 해주었습니다
p태그로 했었는데 span태그로 바꿔서 세로 가운데 정렬을 했습니다
아직 span태그는 확실히 이해하고 있진 않은데 이부분은 틀린줄도 모르고 있아서 해설보고 참고해서 수정했어요
몇시간이 걸려서 웹페이지를 하나 완성했습니다
해설강의에서는 20분도 안걸리시더라고요 ㄷㄷ
재미있는 수업이었어요!!
🎉 코드잇 웹 퍼블리싱 코스 수료! 🎉
셀프 채점까지 완료!
아직 걸음마 수준이지만 너무 뿌듯해요
오늘도 파이팅!!!
😁 오늘 한 일
🔥 해리포터 시리즈 다보기
- 결국 밤에 아침에 보다가 시리즈를 끝까지 다봤어요
- 다들 잘살았으면 좋겠어요 ㅠ 근데 조연들 너무 많이 죽였어ㅠㅠㅠ
- 책으로도 꼭 봐야겠어요 사람들이 책이 더 재밌고 영화에서 이해안가는 부분들이 책에는 다 나와있대요!
📕 코드잇 과제 완성하기
웹 퍼블리싱 강의를 완료했습니다!
연말되니 느려진 진행.. 이제 진도 팍팍 나가야겠다!!!
🎬 공포영화 보기
- 공포영화 엑스텐션을 봤어요! 어우 징그러워
- 제가 원래 공포영화를 좋아하는데 넷플릭스에는 왜이렇게 맘에 드는 영화가 없는지!
- 왓챠플레이로 봤는데 소름이었어요 좀 많이 잔인해요 ㅠㅠ 재밌어요!! 가볍게 보기 좋아요
🍁 메이플하기
- 이거는 매일 하는거지만 오늘은 친구랑 제로를 키웠어요
- 이제 코인 모으기도 귀찮은데 누적 15000개는 모아야돼서 ㅠ 본캐만 꾸역꾸역 하는 중
- 귀여운 다람단 옷 세트 샀어요! 한벌옷은 비싸서 다른걸로만 ㅎㅎ 귀엽다!!!
🎇 친구들과 집에서 줌으로 홈파티
- 각자 집에서 줌켜고 홈파티 했어요
- 맛있는거 먹고 게임도 하고 ㅋㅋ 요즘 친구들 잘 못만나는데 오랜만에 재밌었어요
