팀 프로젝트로 만들었던 웹페이지를 조금씩 수정해보며 공부하는 과정을 기록한다.
target= blank와 _blank의 차이점
링크를 클릭할 때마다 새 탭이 계속해서 생성되는 것이 거슬려서 검색을 해봤다. a 태그에 설정한 target 값을 수정해주면 되는 것이었는데 target=blank로 전체적으로 교체해 주었다.
target=_blank는 페이지를 클릭할 때마다 새로운 탭이 계속해서 생긴다.
target=blank는 하나의 탭만 새로 생성되고 그 탭에서 새로운 페이지가 열린다.
a 태그 밑줄, 색상 제거하기
내 개인 페이지에서 타이틀을 눌렀을 때 메인 페이지로 연결되도록 링크를 걸어놓고 싶었는데 a 태그를 넣으니까 타이틀이 왼쪽처럼 변해서 마음에 들지 않았다. 그래서 원래는 css 수정을 통해 해결하려고 했지만 실패했고 일단은 div 태그 안에서 밑줄을 없애고 색상을 화이트로 변경하는 방법으로 수정했다. 이렇게 자꾸 div 태그 안에 내용을 넣는 것이 좋은 방법은 아닌 거 같지만 일단은 이렇게 해결한다.
<h1><a href="/" style="text-decoration:none; color: white"><span style="font-family: 'Gaegu'; font-size: 1.2em;">let 리액트 천재</span></a></h1>
git 브랜치 공부하기
우리 팀의 웹페이지를 혼자 수정해보기로 하면서 수정 전 버전과 수정 후 버전을 분리해서 저장하고 싶어서 github을 살펴보다가 브랜치라는 기능을 발견했다. 일단 'update'라는 이름의 브런치를 새로 만들긴 했는데 아직 사용법은 잘 모르겠다.
브랜치 공부하기 좋은 사이트
https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html
CSS grid 공부하기
메인 페이지에서 개인 페이지로 연결해주는 짱구 캐릭터들의 배치를 일렬로 바꿔주고 싶었는데 메인 페이지는 내가 구현한 것이 아니기 때문에 코드를 자세히 보는 것은 처음이었다. 캐릭터 배치가 grid 태그로 되어 있었는데 다른 팀 발표 피드백 부분에서도 튜터님이 그리드 템플릿에 대해 언급하셔서 공부해 볼 생각은 있었기 때문에 좋은 기회라고 생각했다.
grid의 기본 구조를 이해하는 데 다음 블로그의 도움을 많이 받았다.
https://nykim.work/59
width를 1200px로 고정한 상태에서 비율을 1씩 주었는데 이미지가 width 값 밖으로 튀어나가 버렸다. (임시로 배경 색상 넣음)
grid-template-columns: repeat(5, 1fr);
이미지마다 설정했던 300px로 설정해뒀던 너비 높이 값이 문제인가 싶어서 지웠더니 이렇게 됐다... 이미지마다 각자 width값 설정해주는 방법도 있겠지만, 그리드 기능 이용해서 width 값 안에서 자동으로 5등분 해주는 기능은 없는 걸까 궁금해서 이것저것 시도 해 보고 실패했다. 월요일이 오면 튜터님께 물어보든가 더 연구해 봐야겠다.
느낀 점
주말에 혼자서 공부하려니 자꾸 딴 짓하게 되고 확실히 집중이 잘 안 된다. 평일에는 정규 일정만으로 체력이 딸려서 더 공부하기가 어렵고 결국엔 주말에 시간 내서 공부해야 되는데 시간은 한정적이다 보니 조급한 마음이 든다. 배우고 싶은 게 너무 많아!