1. 미니프로젝트
1) 공간개념
어제에 이어 팀 제목, 소개 해주신 분과 Main Page 를 합쳤다.
팀 제목에 animation 을 추가해 놓으신게 잘 되지 않아서
머리를 부딪혀 고민하였다.
@keyframes slide {
from {
left: -400px;
opacity: 0;
}
to {
left: 0px;
opacity: 1;
}
}
@keyframes disappear {
from {
left: 300px;
opacity: 1;
}
to {
left: -50px;
opacity: 0;
}
}keyframes 를 사용하여 slide 를 추가하였는데
(수정 전)
같이 진행하시는 분의 화면에선 글씨가 중앙에 위치하지만
나와 다른분들 화면에선 글씨가
width 에선 center 로 오지만 height 가 아래쪽으로 계속 쏠렸다.
이유를 찾아보니
진행하시는 분이 HD 가 다른 모니터를 사용하셔서 보여지는 것으로
글씨 위치를 잡은 것이 문제였다.
center 를 잡지 않고 left 를 이용하셔서 position을 잡으셔서 그런 것이었다.
(수정 후)
자체적으로 position 을 잡으니 해결 되었다.
2) 투명도
또 애초에 이런 문제가 발생한 것은 배경의 투명도를 바꾸기 위해 발생했다.
배경에 투명도를 주는
opacity 는 0 ~ 1 사이 값으로 배경의 투명도를 변경해준다.
하지만 그 태그 속에 모든 내용의 투명도 까지 변경해 버린다.
그래서 선택한게
background-color: rgba( 0, 0, 0, 0~1 투명도 조절 );
이용하는 방법이다.
근데 이게 black 으로만 투명해지니 배경이 더 어두워지기만 해서
opacity 를 이용하려고 div를 나누다 보니 발생한 일이었다.
1시간동안 고민했는데 의외로 간단했다..
rgba( 255, 255, 255, 0~1 투명도 조절 );
이렇게 변경하니 투명도가 점점 밝아지는 식으로 되어 해결되었다.
당연히 둘다 똑같겠지! 라고 생각한 실수였다.
3) 태그
오늘 합치면서 느낀 것은 사람마다 태그 방법이 각각 이란 점이다.
난 style 을 넣을때 각 태그에 class 를 주어서 넣는 편인데
<style>
.mytitle{
}
</style>
<body>
<div class:"mytitle"></div>
</body>다른분들은 id를 주거나 자체에 넣으셔서 순간 알아보기가 힘들었다.
예를들면 h1, h2 태그를 h1 자체에 스타일을 넣으셔서
h1 으로 작업해서 합친 내 card 도 적용이 되어 문제가 발생할 수 있는 것이다.
<style>
div{
}
#title{
}
</style>다행이도 이번에 합칠땐 서로 겹치는 태그가 없었다.
하지만 앞으로는 협업 하기 전에 어떤 태그를 쓸지도 미리 맞춰보는 것이 중요하다고 생각했다.
기동대 사진은 언제봐도 알록달록 예쁘네요
협업을 어떻게 해야 효율적일지 점점 알아가시고 발전하시는것 같아 너무 보기좋습니다